en utilisant jquery pour montrer sa soumission sous forme Successfull

Question

j'ai le fichier javascript suivants nommé coupon.js -

jQuery(document).ready(function(){ 
     jQuery('.appnitro').submit(function() { 
$.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         for(var id in data) { 
          jQuery('#' + id).html(data[id]); 
         } 
         } 

     }); 

     return true; 
    }); 

}); 

sms.php -

<?php 
//process form 
$res = "message deliverd"; 
$arr = array('content' => $res); 
echo json_encode($arr);//end sms processing 
unset ($_POST); 
?> 

J'appelle comme ça -

<form id="smsform" class="appnitro" method="post" action="sms.php"> 
... 
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"/> 
</form> 
<div id="content"></div> 

Maintenant, je m'attendais à ce qu'après une soumission de formulaire réussie le div "content" montrerait le message avec ut actualisation de la page. Mais au lieu la page redirige vers /sms.php puis sorties -

{"content":"message deliverd"} 

S'il vous plaît dire où je me trompe. Mon javascript est correct. Aucune erreur affichée par firebug. Ou s'il vous plaît dites une autre méthode pour atteindre le reqd. fonctionnalité.

Même cette coupon.js n'est pas WORKING

jQuery(document).ready(function(e){ 
     jQuery('.appnitro').submit(function() { 
$.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         for(var id in data) { 
          jQuery('#' + id).html(data[id]); 
         } 
         } 

     }); 

e.preventDefault(); 
    }); 

}); 

ne fonctionne pas, même si j'ajoute Fasle de retour à la fin. S'il vous plaît suggérer une autre méthode pour acheive cette fonctionnalité

Answer 1

La raison pour laquelle la page est rafraîchissant parce que l'événement submit n'a pas été supprimé.

Il y a deux façons de le faire:

• Accepter un objet événement comme paramètre au gestionnaire d'événements, puis appelez preventDefault() sur elle.
• return false du gestionnaire d'événements.

Réponse à votre question révisée: Vous acceptez le paramètre e dans la mauvaise fonction, vous devez l'accepter dans le gestionnaire submit, pas le gestionnaire ready.

Answer 2

Je crois que vous devez annuler la soumission de formulaire dans votre jquery. De la documentation jQuery:

Maintenant, lorsque le formulaire est soumis, le message est alertée. Cela se produit avant à la soumission réelle, de sorte que nous pouvons annuler l'action d'envoi en appelant .preventDefault() sur l'objet d'événement ou en renvoyant false à partir de notre gestionnaire . Nous pouvons déclencher l'événement manuellement lorsqu'un autre élément est cliquée:

donc dans votre code:

//add 'e' or some other handler to the function call 
jQuery(document).ready(function(e){ 
      jQuery('.appnitro').submit(function() { $.ajax({ 
       url  : $(this).attr('action'), 
       type : $(this).attr('method'), 
       dataType: 'json', 
       data : $(this).serialize(), 
       success : function(data) { 
          for(var id in data) { 
           jQuery('#' + id).html(data[id]); 
          } 
          } 

      }); 
      //return false 
      return false; 

      //or 
      e.preventDefault(); 
     }); 

    });