JQUERY AJAX POST Soumission à un script PHP plusieurs fois

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

Question

J'essaie de faire une soumission de formulaire sans que la page recharge. Cela fonctionne la première fois, mais lorsque j'essaie de faire une deuxième soumission, la page est actualisée.

Je voudrais pouvoir faire plusieurs soumissions avec les nouvelles données se propageant dans l'élément actuel. Qu'est-ce que je rate.

Voici ma première page 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>

Et voici ma deuxième page 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>

Je veux pouvoir réutiliser le même formulaire pour les soumissions de formulaires multiples tout en restant sur la même longueur d'onde et en ayant les données d'approit dans la même div sans rafraîchir la page. Des idées

Était-ce utile?

La solution

Essaye ça:

<!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 () {
        initializeForm();
    });

    function initializeForm() {
        jQuery("#form").validate({
            debug: false,
            submitHandler: function (form) {
                jQuery.post('formPost.php',
                    jQuery("#form").serialize(), function (data) {
                    jQuery('#Box').html(data);
                    initializeForm();
                });
            }

        });
    }

    // ]]>
</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>

J'ai testé cela et cela fonctionne localement pour moi. J'espère que ça aide!

Autres conseils

Vous validez l'action est liée au formulaire qui existe lorsque le document est prêt (car il est dans document.ready). Cependant, votre script PHP remplace cette forme par une forme différente, de sorte que la forme qui valide est liée à ne plus existe. Lorsque vous vous liez des événements, vous pouvez utiliser quelque chose comme un reliure en direct pour contourner cela. Cependant, vous ne pouvez probablement pas utiliser cela avec le plugin Validate. Ce que vous devriez vraiment faire, c'est écrire votre réponse à un élément différent.

Alors, quelque chose comme ça:

<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>

Et puis juste

<?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;
  }
?>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top