Supposons qu'il y ait une zone de texte dans ma page Web et que j'aie joint un événement 'change' à cette zone de texte en utilisant jQuery.
$('.myFormClass').on('submit', 'form', function (e) {
// some code in which I use the response from the earlier AJAX call returned against 'change' event
});
Et j'ai également un événement de soumission de formulaire, p >
$('.myFormClass').on('change', '.amount', function () {
// Some AJAX call here, and the response is assigned to a variable
});
Le problème est que l'événement 'change' fonctionne correctement individuellement, mais lorsque le formulaire est soumis, ils sont déclenchés presque simultanément et jusqu'au moment où l'appel AJAX contre l'événement 'change' est renvoyé ( censé être), le formulaire avait déjà été soumis à ce moment-là, je ne peux donc pas utiliser la réponse AJAX, qui est nécessaire avant la soumission du formulaire.
Y a-t-il quelque chose de jQuery intégré pour cette situation? Si non, une autre solution efficace?
3 Réponses :
Ajoutez un bouton. Lorsque l'utilisateur clique sur le bouton, un booléen est défini sur tru et s'il est vrai, alors uniquement la soumission se produira, sinon seule la fonction onchange fonctionnera pas la fonction d'envoi.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="myFormClass"> aa <input class="amount"> <input type="submit"> </form> <button>Want to submit the form?</button>
var sub=false;
$(document).ready(function(){
$('button').click(function(){sub=true;console.log(sub)})
$('.myFormClass').on('change', '.amount', function () {
// Some AJAX call here, and the response is assigned to a variable
console.log('changed')
});
$('.myFormClass').keypress((e)=>{if(e.keyCode=='13'){e.preventDefault();console.log('not submitted on enter')}})
$('.myFormClass').click( function (e) {
e.preventDefault();
console.log("submit cancelled")
if(sub)
$(this).submit();
// some code in which I use the response from the earlier AJAX call returned against 'change' event
});
})
SyntaxError non intercepté: jeton inattendu (
Parce que je n'ai pas créé l'appel ajax. Il indique simplement qu'en cas de succès de l'ajax, soumettre doit être appelé
oh désolé mon mal
Cette solution ne fonctionnera pas car je ne souhaite PAS soumettre le formulaire à chaque événement onChange , plutôt lorsque l'utilisateur a l'intention de soumettre le formulaire en utilisant des méthodes conventionnelles.
@AshayMandwarya Votre modification ne fonctionnera pas lorsque le formulaire est soumis via la touche ENTRÉE.
Vérifiez les modifications maintenant. Travailler pour entrer la touche aussi
Vous pouvez utiliser:
function test () {
console.log('test');
}
function test2 (callback) {
console.log('test2');
callback();
}
test2(test);Ou une fonction imbriquée après qu'une fonction est terminée avec:
function method1(){
// some code
}
function method2(){
// some code
}
$.ajax({
url:method1(),
success:function(){
method2();
}
})
Peut-être lié
p>
je le ferais aussi sur votre première solution
Votre réponse est hors contexte. Répétez la question.
Je ne sais pas quel est votre problème avec ma réponse, mais vous avez clairement déclaré: "Le problème est que l'événement 'change' fonctionne bien individuellement mais lorsque le formulaire est soumis, il est déclenché presque simultanément et jusqu'au moment où l'appel AJAX contre l'événement 'change' est renvoyé (supposé être), le formulaire avait déjà été soumis d'ici là donc je ne peux pas utiliser la réponse AJAX , qui est nécessaire avant la soumission du formulaire. " Utilisez simplement nested pour vous assurer qu'ils sont traités, puis obtenez la réponse.
Stockez la promesse ajax et attendez sa résolution dans le gestionnaire d'envoi de formulaire
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testForm">
<form>
<input type="number" class="amount" />
<button type="submit">Submit</button>
</form>
</div>
let amountReady = null;
$('.testForm').on('change', '.amount', function(ev) {
amountReady = $.ajax({
method: 'POST',
url: 'https://httpbin.org/post',
data: {
amount: $(this).val()
}
});
});
$('.testForm').on('submit', 'form', function(e) {
e.preventDefault();
if (!amountReady) return;
amountReady.then((amountAjaxResult) => {
console.log('submit now', amountAjaxResult.form.amount);
});
});
enregistrez votre méthode
.submit ()dans votre premier appelajaxfonctionsuccess@VasuKuncham Votre suggestion est invalide dans mon cas car je ne veux PAS soumettre le formulaire à chaque événement
onChange, plutôt lorsque l'utilisateur a l'intention de soumettre le formulaire en utilisant des méthodes conventionnelles.