jQuery AJAX nach mehrfacher Übermittlung an ein PHP-Skript

StackOverflow https://stackoverflow.com/questions/7382995

Frage

Ich versuche, ein Formular zu senden, ohne dass die Seite neu geladen wird.Es funktioniert beim ersten Mal, aber wenn ich versuche, eine zweite Übermittlung durchzuführen, wird die Seite aktualisiert.

Ich möchte in der Lage sein, mehrere Übermittlungen mit den neuen Daten durchzuführen, die in das aktuelle Element übertragen werden.Was fehlt mir?

Hier ist meine erste Seite form.php 

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict();
    jQuery(document).ready(function () {
        jQuery("#form").validate({
            debug: false,
            submitHandler: function (form) {
                jQuery.post('formPost.php',
                    jQuery("#form").serialize(), function (data) {
                    jQuery('#Box').html(data);
                });
            }
        });
    });
    // ]]>
</script>

  </head>
  <body>
    <div id="Box">
      <form id="form" name="form" method="POST" action="">
        <select name="color">
          <option>red</option>
          <option>white</option>
          <option>blue</option>
        </select>
        <input type="submit" name="submit" value="submit" /><br />
      </form>
    </div>
  </body>
</html>

und hier ist meine zweite Seite formPost.php 

<?php

  switch ($_POST['color'])
  {
    case 'red':
      echo 'you chose red<br /><br />';
      break;

    case 'blue':
      echo 'you chose blue<br /><br />';
      break;

    case 'white':
      echo 'you chose white<br /><br />';
      break;
  }
?>
<form id="form" name="form" method="POST" action="">
  <select name="color">
    <option>red</option>
    <option>white</option>
    <option>blue</option>
  </select>
  <input type="submit" name="submit" value="submit" /><br />
</form>

Ich möchte in der Lage sein, dasselbe Formular für mehrere Formularübermittlungen wiederzuverwenden, während ich auf derselben Seite bleibe und die Daten in derselben Abteilung angezeigt werden, ohne die Seite zu aktualisieren.Irgendwelche Ideen

War es hilfreich?

Lösung

Versuchen Sie das: generasacodicetagpre.

Ich habe das getestet und es funktioniert lokal für mich.Ich hoffe das hilft!

Andere Tipps

Sie überprüfen, ob die Aktion an das Formular gebunden ist, das vorhanden ist, wenn das Dokument bereit ist (da es sich in document.ready befindet).Ihr PHP-Skript ersetzt dieses Formular jedoch durch ein anderes Formular, sodass das zu validierende Formular nicht mehr vorhanden ist.Wenn Sie Ereignisse binden, können Sie eine Live-Bindung verwenden, um dies zu umgehen.Sie können das wahrscheinlich nicht mit dem Validierungs-Plugin verwenden.Was Sie wirklich tun sollten, ist Ihre Antwort auf ein anderes Element zu schreiben.

Also so etwas: 

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict ();
    jQuery(document).ready(function(){
      jQuery("#form").validate({
        debug: false,
        submitHandler: function(form) {
        jQuery.post('formPost.php', 
                     jQuery("#form").serialize(), 
                     function(data) {
                       jQuery('#result').html(data); // Note that this modifies #result instead of #Box.
                     });
        }
      });
    });
    // ]]>
  </script>
</head>
<body>
  <div id="Box">
    <form id="form" name="form" method="POST" action="">
      <select name="color">
        <option>red</option>
        <option>white</option>
        <option>blue</option>
      </select>
      <input type="submit" name="submit" value="submit" /><br />
    </form>
  </div>
  <div id="result" /> <!-- Here is where we put out result. -->
</body>
</html>

und dann einfach 

<?php

  switch ($_POST['color'])
  {
    case 'red':
      echo 'you chose red<br /><br />';
      break;

    case 'blue':
      echo 'you chose blue<br /><br />';
      break;

    case 'white':
      echo 'you chose white<br /><br />';
      break;
  }
?>

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top