Stopper le submit au retour d'un appel ajax

**nawbacan** · 09/03/2011, 10h35

hello,

je ne sais pas si je suis pile poil dans la bonne section. Mes excuses si ceci n'était pas le cas.

J'ai une formulaire dont l'envoi est déclanché par un bouton :
code jquery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("#boutonsubmite").click(function (){
     $("#coursedateForm").submit();
});

lors du submit je check à l'aide d'un script php si les datas soumises sont correctes. Ceci se fait par l'intermédiaire d'un appel Ajax.
Je dois bloquer la soumission du formulaire si le retour de l'appel ajax n'est pas une chaine de caractères vise.
Un return false fonctionne en jquery, mais il ne fonctionne pas en ajax. J'ai donc trouvé la directive e.preventDefault(); qui me permet de stopper le submit en cas de besoin. mais ca marche que sous firefox et pas sous chrome. Voyez-vous une autre solution ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
$("#coursedateForm").submit(function(e) {       
   var dataStr = $("#coursedateForm").serialize();
   var res='  ';
   $.ajax({
      type: "POST",
      url: "checkDataCourseDate.php",
      data: dataStr,
      dataType: "json",
 
success:function(response){									$("#error_formular").text('  ');
        for (key in response) {
              res= key;
	      $("#error_formular").append("<br />"+key+" : "+response[key]);
	}
	if (res!= '  '){
	      $("#error_formular").slideUp("fast");
									      $("#error_formular").slideDown("fast");
e.preventDefault();
		return false;
	}
	else {
		return true;
	}
 
       }
});
if (res=='  '){
    return true;
}
else {
e.preventDefault();
return false;
  }
  });

**erox44** · 09/03/2011, 17h02

Hello,
ce que tu peux faire c'est, laisser l'event .click() sur ton bouton, et dans la fonction, tu fais ton appel ajax et en fonction du résultat recu , tu fais un .submit() ou non.

**ABCIWEB** · 09/03/2011, 17h48

Tu pourrais aussi faire une requête synchrone plutôt qu'asynchrone (qui est le comportement par défaut).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$.ajax({
      type: "POST",
      url: "checkDataCourseDate.php",
      data: dataStr,
      dataType: "json",
      async: false,

Dans ce cas le navigateur attendra la réponse avant d'entreprendre toute autre action.

**x-zolezzi** · 11/03/2011, 09h59

Juste une idée, non testée, mais si tu bind l'événement submit de ton formulaire, sur le success de ton ajax, un return false, peut être que ça peut marcher....a voir....

**danielhagnoul** · 11/03/2011, 11h00

Bonjour

Exemple de transactions AJAX :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<form id="coursedateForm">
	<input type="text" name="mot" value="Un mot pour remplir"/>
	<input type="submit" value="go"/>
</form>
 
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script>
		$(function(){
 
$("#coursedateForm").submit(function(){
	var boolOK = false,
		myData = $(this).serialize();
 
	console.log(myData);
 
	$.getJSON("test3.json", myData, function(data, textStatus, jqXHR){
		console.log(data, textStatus, jqXHR);
 
		// succès de la transaction, on doit traiter le contenu de data
		$(".conteneur").append("<section>" + data[0].Nom + "</section>");
 
		$.post("qr6.php", myData, function(data, textStatus, jqXHR){
			console.log(data, textStatus, jqXHR);
 
			// succès de la transaction, on doit traiter le contenu de data
			$(".conteneur").append("<section>" + data + "</section>");
 
		}, "text").error(function(jqXHR, textStatus, errorThrown){
			console.log(jqXHR, textStatus, errorThrown);
 
			// échec de la transaction, gérer la catastrophe
 
		}).complete(function(jqXHR, textStatus){
			console.log(jqXHR, textStatus);
 
			// la transaction s'est terminée par un succès ou par un échec
		});
 
	}).error(function(jqXHR, textStatus, errorThrown){
		console.log(jqXHR, textStatus, errorThrown);
 
		// échec de la transaction, gérer la catastrophe
 
	}).complete(function(jqXHR, textStatus){
		console.log(jqXHR, textStatus);
 
		// la transaction s'est terminée par un succès ou par un échec
	});
 
	return boolOK;
});
 
		});
	</script>
</body>  
</html>

**nawbacan** · 14/03/2011, 09h50

hello à tous,

merci pour vos réponses. J'ai essayé la méthode Daniel avec le
$.getJSON. ça roule à un 2 détail près.

lorsque je retourne ma condition de réussite boolOK, celle-ci n'est jamais mise à true.

en fait l'exécutions du code dans le $.getJSON est effectuée après le return. Je comprend pas très bien pourquoi..

Stopper le submit au retour d'un appel ajax

jQuery

Vue hybride

Discussions similaires

Partager

Partager