jQuery AJAX invia più volte l'invio a uno script PHP

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

Domanda

Sto tentando di inviare un modulo senza dover ricaricare la pagina.Funziona la prima volta, ma quando provo a eseguire un secondo invio la pagina viene aggiornata.

Mi piacerebbe essere in grado di fare diversi invii con i nuovi dati che si propagano nell'elemento corrente.Cosa mi manca.

Ecco la mia prima pagina 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>

ed ecco la mia seconda pagina 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>

Desidero poter riutilizzare lo stesso modulo per più invii di moduli rimanendo sulla stessa pagina e avendo l'apprear dei dati nello stesso div senza aggiornare la pagina.Tutte le idee

È stato utile?

Soluzione

Prova questo: 

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

Ne ho testato questo e funziona localmente per me.Spero che questo aiuti!

Altri suggerimenti

Si convalida che l'azione sia vincolata al modulo che esiste quando il documento è pronto (poiché è in document.ready).Tuttavia, il tuo script PHP sta sostituendo quel modulo con un modulo diverso, quindi il modulo a cui è associata la convalida non esiste più.Quando stai vincolando eventi, puoi utilizzare qualcosa come un associazione in tempo reale per aggirare il problema.Probabilmente non puoi usarlo con il plug-in di convalida, però.Quello che dovresti veramente fare è scrivere la tua risposta a un elemento diverso.

Quindi, qualcosa del genere: 

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

e poi solo 

<?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;
  }
?>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top