[AJAX] Button v/s Submit. Y a-t-il une différence ?

**GérardMartinelli** · 18/02/2014, 09h38

Bonjour,

Je suis toujours dans me premiers tests avec Ajax, et suis confronté à un autre problème (j'espère que ma question n'est pas trop stupide).
Lorsque j'utilise le code suivant cela marche très bien (j'entre dans JS et php est bien appelé):

Code html :

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

1
2
3
4
5
<form action="" > 
Numéro du département : <input type="text" size="2" id="MonDep" /><p>
</form><p>
<button type="button" onclick="detailVille()">  Chercher </button> 
<div id="MonTexte"></div>

par contre avec celui ci, j'entre bien dans JS qui n'a pas été modifié, mais la procédure PHP n'est pas exécutée.

Code html :

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

1
2
3
4
5
<form action="" > 
Numéro du département : <input type="text" size="2" id="MonDep" /><p>
<input type="submit" onclick="detailVille()" value="Chercher" />  
</form><p>
<div id="MonTexte"></div>

Ci-dessous le code complet. Merci d'expliquer où je fais une erreur.

Gérard

Code html :

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

1
2
3
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><head><head> <meta http-equiv="Content-type" content="text/html; charset=Windows-1252"/> 
<title>Test Ajax</title> 
<script type="text/javascript" >

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
function detailVille()
{
	var xmlhttp;
	str = document.getElementById("MonDep").value ;
	if (window.XMLHttpRequest)
  	{  // code for IE7+, Firefox, Chrome, Opera, Safari
 		 xmlhttp=new XMLHttpRequest();
  	}
	else
 	 { // code for IE6, IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	 }
  	 if (str.length==0)
	{
		alert("zero");
		  document.getElementById("MonTexte").innerHTML="OK entré";
		  return;
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		    document.getElementById("MonTexte").innerHTML=xmlhttp.responseText;
		}
	}
	 params="Departement="+str;
	 /*
	//  Utilisation du mode GET    
	xmlhttp.open("GET","testAjax.php?"+params,true);
	xmlhttp.send();
	 */ 
 
	//  Utilisation du mode POST   
	 alert(params); 
	 xmlhttp.open("POST","testAjax.php",true);
	 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	 xmlhttp.setRequestHeader("Content-length", params.length);
	 xmlhttp.setRequestHeader("Connection", "close");
	 xmlhttp.send(params);
 
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
</script>
</head> 
<body>
<center>
<h2><font color="blue"> Taper un numéro  pour lister les différents marchés de ce département,  puis cliquez sur "Chercher". </font></h2><p><p>
<form action="" > 
Numéro du département : <input type="text" size="2" id="MonDep" /><p>
<input type="submit" onclick="detailVille()" value="Chercher" />  
</form><p>
<!button type="button" onclick="detailVille()"> <!Chercher> <!/button> 
<div id="MonTexte"></div>
</body>
</html>

**Bovino** · 18/02/2014, 09h48

C'est juste une question de comportement des éléments...

Par définition, une balise <button> ou <input> de type button ne fait rien, alors que les mêmes éléments de type submit soumettent le formulaire.
Donc dans le premier cas, le bouton ne fait rien et ton code AJAX est exécuté, dans le second, le code JavaScript s'exécute puis le formulaire est soumis, donc la requête part dans le vide !

**GérardMartinelli** · 18/02/2014, 09h54

Merci pour cette réponse claire. Je n'aurais jamais trouvé tout seul.

[AJAX] Button v/s Submit. Y a-t-il une différence ?

AJAX

Vue hybride

Discussions similaires

Partager

Partager