2010-12-11 34 views
0

J'ai un formulaire avec deux boutons, un bouton Soumettre et un bouton Annuler/Fermer. Lorsque l'utilisateur clique sur Envoyer, les données saisies sont validées à l'aide de http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/. Si tout est validé, le formulaire est soumis avec jQuery/AJAX. Tout cela fonctionne bien et dandy. Je rencontre cependant des problèmes avec le bouton d'annulation. Je veux que le bouton d'annulation nécessite une confirmation. Si l'utilisateur choisit de poursuivre, ils sont redirigés vers une page de mon choix. S'ils décident qu'ils ne veulent pas annuler, ils sont simplement laissés sur la page. C'est la dernière partie qui ne fonctionne pas.Comment puis-je arrêter un formulaire de traitement/soumission utilisant jquery AJAX?

Mon code de forme ressemble à ceci:

<form name="createPage" id="createPage" method="post" action="pager.php" class="ajax updateForm"> 
<input name="whatever" type="text" /> 
      <button type="submit" id="submitQuickSave" class="submitSave"><span>save</span></button> 
      <button type="submit" id="submitCancel" class="submitClose" onclick='confirm_close()'><span>close</span></button> 
</form> 

Mon script annuler en cours ressemble à ce qui suit. Si l'utilisateur souhaite effectivement annuler, je délie le formulaire de soumission afin que la validation ne soit pas exécutée. Le formulaire procède ensuite à la soumission et inclut l'annulation en tant que paramètre dans l'attribut d'action. Je gère le côté serveur d'annulation et dirige l'utilisateur vers une nouvelle page.

function confirm_close() 
{ 
var r=confirm("All changes since your last save operation will be discarded."); 
if (r==true) 
    { 
    $(".ajax").unbind("submit"); 
    } 
else 
    { 

    } 
} 

Je ne sais pas quoi mettre dans l'argument 'else'. Ce qui se passe, c'est que si les utilisateurs annulent l'annulation (c.-à-d., Renvoie false), alors le formulaire essaie toujours de soumettre. Je ne peux pas le faire arrêter. J'ai essayé plusieurs choses de ce site et d'autres sans succès:
event.stopImmediatePropogation
.abort()

Toutes les idées? Fondamentalement, comment puis-je obtenir le bouton annuler/fermer correctement?

Répondre

3

Envisager separating your JavaScript from your HTML. Avec cela à l'esprit, vous pouvez écrire le gestionnaire pour votre l'événement de clic que vous essayez d'intercepter comme ceci:

$("button#cancel").click(function($event) { 
    var r = confirm("All changes since your last save operation will be discarded."); 
    if (r) { 
     $(".ajax").unbind("submit"); 
    } 
    else { 
     $event.preventDefault(); 
    } 
}); 

Vous devrez modifier votre code HTML et ajouter un attribut id au bouton cancel:

<button id="cancel" type="submit" value="cancel">Cancel</button>

Exemple ici: http://jsfiddle.net/wvFDy/

Hope that helps!

+0

Bingo. Merci beaucoup. – technoTarek

0

Je crois que vous venez

return false; 

Laissez-moi savoir si cela fonctionne.

+0

Malheureusement non, la soumission ajax est toujours en cours. – technoTarek