[SRC] Envoyer un formulaire avec Ajax

**SpaceFrog** · 25/08/2008, 16h33

Suite à une question qui m'a été posée sur le chat, j'en profite pour déposer ici un petit script qui permet d'envoyer les saisies d'un form avec ajax sans rechargement de page ...

Le script scanne les éléments du form afin de concaténer la chaine de paramètres qui sera ensuite passé en send ...

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ajax Form</title>
<script type='text/javascript'>
function SendAjaxForm(){
var Params=""
var i=0;
var Elt;
 
while (Elt=document.forms['myform'].elements[i] ){
         if(Elt.value && Elt.type!='submit'){Params+="&"+Elt.name+"="+Elt.value;}
         i++;
         }
 
 Params=Params.replace(/^&/,"")
// alert(Params)    
 
//l'ajax    
   if (window.XMLHttpRequest) {                   
                                xhr = new XMLHttpRequest();                   
                                }
   else if (window.ActiveXObject) {                
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");   
                                }
 
 
   xhr.open('POST',' pagecible.php', true);
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   xhr.send(Params);
 
 
   xhr.onreadystatechange = function() {          
                                         if (xhr.readyState == 4) {                   
                                              if (xhr.status == 200) {                  
                                                                          //ici le traitment du retur ajax
                                                                     }
                                                 else{ alert ("Erreur : " + xhr.status) };
                                         }
                                       }
 
}
 
</script>
</head>
 
<body>
<form name="myform" method="submit" action="javascript:SendAjaxForm()">
<input type='text' name="text1" />
<input type='text' name="text1" />
<input type='text' name="text1" />
<input type='text' name="text2" />
<input type='text' name="text2" />
<input type='text' name="text2" />
<select name='sel'>
    <option value='one'>un</option>
    <option value='two'>deux</option>
    <option value='three'>trois</option>
    <option value='four'>quatre</option>
</select>    
<input type='submit' value="go" />
 
</form>
</body>
 
</html>

**le_chomeur** · 25/08/2008, 20h59

pas mal du tout spaffy, as tu testé ?

car tu concatènes toutes les valeurs , via une url que tu envois en post

autre chose , le .value pour le select fonctionne ?
et les boutons radio et checkbox ?

à part ça , pas mal du tout

**SpaceFrog** · 25/08/2008, 21h38

Non pas testé , mais je n'envoie rien en url ...
il n'y a pas d'autre action au form que la fonction et la chaine des paramètres se concatène de la sorte pour faire un post ... car l'ajax est en post ...
et à partir du moment ou le radio ou le checkbos à une value ...
et oui pour le select cela fonctionne ...

je teste demain ...

**SpaceFrog** · 26/08/2008, 11h37

bon après avoir testé il s'avère que :

si plusieurs inputs texte ont le même name il ne prend que le dernier ...
mais à priori c'est la même chose avec un post classique ??

pour le radios et checkboxes il va falloir que je rajouter un test supplémentaire pour ne garder que celui qui est selectionné ...
une petit boucle devrait faire l'affaire ...

Je continue dans cette lancée ...

**le_chomeur** · 26/08/2008, 13h47

alors la ... j'vais tester , car tu envois ta requète ajax en post ok, mais la string que tu passes est sous forme "d'url" que l'on récupère normalement en GET

je me trompe peut-être ou alors je vais revoir mes notions . . .

**SpaceFrog** · 26/08/2008, 13h54

revois tes notion d'ajax

xhr.send il faut passer le même type d'url dans le send pour un ajax en post ...

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ajax Form</title>
<script type='text/javascript'>
function SendAjaxForm(){
var Params=""
var i=0;
var Elt;
 
while (Elt=document.forms['myform'].elements[i] ){
 		if(Elt.value && Elt.type!='submit'){Params+="&"+Elt.name+"="+Elt.value;}
 		i++;
 		}
 
 Params=Params.replace(/^&/,"")
 alert(Params)	
 
//l'ajax   
 alert('here')
   if (window.XMLHttpRequest) {                   
								xhr = new XMLHttpRequest();                   
								}
   else if (window.ActiveXObject) {                
								xhr = new ActiveXObject("Microsoft.XMLHTTP");   
								}
 
 
   xhr.open('POST', 'cible.php', true);
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   xhr.send(Params);
 
 
   xhr.onreadystatechange = function() {          
									     if (xhr.readyState == 4) {                   
									          if (xhr.status == 200) {                  
									      			alert(xhr.responseText)					//ici le traitment du retur ajax
									     							}
									 			else{ alert ("Erreur : " + xhr.status) };
									     }
									   }
 
}
 
</script>
</head>
 
<body>
<form name="myform" method="post" action="javascript:SendAjaxForm()">
<input type='text' name="text1[]" />
<input type='text' name="text1[]" />
<input type='text' name="text3" />
<input type='text' name="text4" />
<input type='text' name="text5" />
<input type='text' name="text6" />
<select name='sel'>
	<option value='one'>un</option>
	<option value='two'>deux</option>
	<option value='three'>trois</option>
	<option value='four'>quatre</option>
</select>
<input type='radio' value='rad1' />	
<input type='radio' value='rad2' />
<input type='submit' value="go" />
 
</form>
</body>
 
</html>

et la page cible php
qui fait juste un dump:

Code :

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

1
2
3
<?php
var_dump($_POST);
?>

l'alert est correcte !

reste juste à traiter le cas des radios et des selects
sachant qye pour des inout avec names identiques il faut mettre [] pour recupérer un array ...
et l'alert montre qu'avec cette concaténation de cheine pour le send en post ajax on a bien le bon résultat

**Bovino** · 26/08/2008, 14h02

Envoyé par le_chomeur

alors la ... j'vais tester , car tu envois ta requète ajax en post ok, mais la string que tu passes est sous forme "d'url" que l'on récupère normalement en GET

je me trompe peut-être ou alors je vais revoir mes notions . . .

Bonjour, ta confusion vient peut-être du fait que de nombreuses bibliothèques Ajax acceptent des paires nom/valeur comme paramètre en post, mais le send s'effectue effectivement au final sous forme 'url encoded'.

**le_chomeur** · 26/08/2008, 14h42

merci de ces précisions bovino,
cela fait 3/4 ans que j'avais en tête cette méthode de fonctionnement (

)

en tous cas fonction TRES pratique spaffy !

**SpaceFrog** · 26/08/2008, 15h04

j'ai pas encore trouvé exactement comment gérer les elts de même name ... vu qu'il ne sont pas forcément groupés sur le form ...
Je continue ..
mais pour le reste c'est au poil ...

Je bloque un peu ...
en fait il faut qu'au lieu de scanner un a un les elements, je recence en premier les groupe de names ...
le plus difficile c'est que les groupes de name sont aussi sujets au type ...
En effet si le type est text il faut que le name se termine par [] sinon il ne capte que le dernier de la liste du flux (tout comme dans un post normal)
si ce sont des radios ou select il faut chopper ceux qui sont cochés.
Faut d'ailleurs que je teste le name avec ou sans [] sur des select ...

si vous avez un idée de comment gérer tout ça ...

**SpaceFrog** · 26/08/2008, 17h46

Bon à priori j'ai trouvé l'idée ...

en passant par un hash

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function groupNames(){
var n=0;
var hashNames={};
while(document.forms['myform'].elements[n]){
        if(!hashNames[document.forms['myform'].elements[n].name]){hashNames[document.forms['myform'].elements[n].name]=1}
		else{hashNames[document.forms['myform'].elements[n].name]++}
		n++;
		}
return HashNames;
}

je n'ai plus qu'à faire une boucle for sur le hash pour scanner les elements et un switch sur le type pour voir comment récupérer la value ...

**SpaceFrog** · 27/08/2008, 17h35

Bon alors voici quelque chose qui commence à se comporter comme un POST normal ...

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ajax Form</title>
<script type='text/javascript'>
function groupNames(){
var n=0;
var hashNames={};
while(document.forms['myform'].elements[n]){
        if(!hashNames[document.forms['myform'].elements[n].name]){hashNames[document.forms['myform'].elements[n].name]=1}
		else{hashNames[document.forms['myform'].elements[n].name]++}
		n++;
		}
return hashNames;
}
 
 
 
function SendAjaxForm(){
var ScanNames=groupNames()
var Params="";
regEnd=/\[\]$/;
for (EltName in ScanNames){
     switch (true){
		case(regEnd.test(EltName)): for (i=0;i<ScanNames[EltName];i++){
											Params+="&"+EltName+"="+document.getElementsByName(EltName)[i].value;
									}
									break;
		case(document.getElementsByName(EltName)[0].type=='radio' || document.getElementsByName(EltName)[0].type=='checkbox'):	
									for (i=0;i<ScanNames[EltName];i++){
	                                        if (document.getElementsByName(EltName)[i].checked){								
												Params+="&"+EltName+"="+document.getElementsByName(EltName)[i].value;
 
											}
									}
									break;
		case(document.getElementsByName(EltName)[0].tagName.toLowerCase()=='select' && document.getElementsByName(EltName)[0].multiple==true):
									for (i=0;document.getElementsByName(EltName)[0].options[i];i++){
										if(document.getElementsByName(EltName)[0].options[i].selected){
											Params+="&"+EltName+"="+document.getElementsByName(EltName)[0].options[i].value;
										}
									}			
									break;
		default:					Params+="&"+EltName+"="+document.getElementsByName(EltName)[0].value;
 
	 } 
  }
 
 
 
 Params=Params.replace(/^&/,"")
 alert("la chaine send est : \n"+ Params)	
 
//l'ajax   
   if (window.XMLHttpRequest) {                   
								xhr = new XMLHttpRequest();                   
								}
   else if (window.ActiveXObject) {                
								xhr = new ActiveXObject("Microsoft.XMLHTTP");   
								}
 
 
   xhr.open('POST', 'cible.php', true);
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   xhr.send(Params);
 
 
   xhr.onreadystatechange = function() {          
									     if (xhr.readyState == 4) {                   
									          if (xhr.status == 200) {                  
									      			alert('le dump du POST :\n '+xhr.responseText)					//ici le traitment du retur ajax
									     							}
									 			else{ alert ("Erreur : " + xhr.status) };
 
		     }
									   }
 
}
 
</script>
</head>
 
<body >
<form name="myform" method="post" action="javascript:SendAjaxForm()">
<input type='text' name="text1[]" />
<input type='text' name="text1[]" />
<input type='text' name="text3" />
<input type='text' name="text4" />
<input type='text' name="text5" />
<input type='text' name="text6" />
<select name='sel' multiple>
	<option value='one'>un</option>
	<option value='two'>deux</option>
	<option value='three'>trois</option>
	<option value='four'>quatre</option>
</select><br />
<input type='radio' value='rad1' name='rad' />rad1	<br />
<input type='radio' value='rad2' name='rad'/>rad2<br />
 
<br />
<input type='checkbox' value='check1' name='check' />check1<br />	
<input type='checkbox' value='check2' name='check'/>check2<br />
<input type='submit' value="go" name='submit'/>
 
</form>
</body>
 
</html>

Bon ça c'est la version au pied de biche ...
Mais je me demande si il n'y aurait pas moyen avec un premier post en GET dans un iframe de recupérer la chaine GET pour en faire un ajax sur la page mère ???

**SpaceFrog** · 28/08/2008, 17h12

Bon au lieu de bidouiller à scanner les elements, il est plus simple de poster une première fois le form en get dans un iframe et de parser l'url ...
Au moins on est sur de récupérer les bons éléments sans avoir à faire des tests dans tous les sens ...

ce qui donne :

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ajax Form</title>
<script type='text/javascript'>
function sendAjaxForm(){
document.getElementById('myform').submit();
var Params="";
setTimeout(function(){
					Params=unescape(parent.getpost.location.href.split('?')[1]);
 
					alert("la chaine send est : \n"+ unescape(Params))
					//l'ajax
 
					   if (window.XMLHttpRequest) {                   
													xhr = new XMLHttpRequest();                   
													}
					   else if (window.ActiveXObject) {                
													xhr = new ActiveXObject("Microsoft.XMLHTTP");   
													}
 
 
					   xhr.open('POST', 'cible.php', true);
					   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					   xhr.send(Params);
 
 
					   xhr.onreadystatechange = function() {          
														     if (xhr.readyState == 4) {                   
														          if (xhr.status == 200) {                  
														      			alert('le dump du POST :\n '+xhr.responseText)					//ici le traitment du retur ajax
														     							}
														 			else{ alert ("Erreur : " + xhr.status) };
 
																}
														   }
					},500)
}
 
</script>
</head>
 
<body >
<form name="myform" id="myform" method="get" action="#"  target="getpost" onsubmit="sendAjaxForm();return false;")>
<input type='text' name="text1[]" />
<input type='text' name="text1[]" />
<input type='text' name="text3" />
<input type='text' name="text4" />
<input type='text' name="text5" />
<input type='text' name="text6" />
<select name='sel' multiple>
	<option value='one'>un</option>
	<option value='two'>deux</option>
	<option value='three'>trois</option>
	<option value='four'>quatre</option>
</select><br />
<input type='radio' value='rad1' name='rad' />rad1	<br />
<input type='radio' value='rad2' name='rad'/>rad2<br />
 
<br />
<input type='checkbox' value='check1' name='check' />check1<br />	
<input type='checkbox' value='check2' name='check'/>check2<br />
<input type='submit' value="go" name='soumettre' />
</form>
<iframe name="getpost" src="" style="display:none"></iframe>
</body>
 
</html>

**SpaceFrog** · 01/09/2008, 16h48

Il est même possible de créer dynamiquement l'iframe à la volée et de le supprimer ensuite ...

**DoubleU** · 04/09/2008, 11h41

Mouais, ca exécute une requete qui n'a pas lieu d'etre quand même... Niveau perf et charge du serveur c'est quand même pas top du tout ...

A voir la fonction Form.serialize de Prototype

**SpaceFrog** · 04/09/2008, 13h36

il est vrai que niveau performance le seconde solution est médiocre...
je ne connaissais pas cette fonction de prototype :red: .
En fait serialize c'est ce que tente de faire mon premier code ...

Merci pour le lien

[SRC] Envoyer un formulaire avec Ajax

Contribuez

Discussions similaires

Partager

Partager