[FORM] récupérer les données d'un formulaire

Version imprimable

29/11/2007, 10h08
dragonfly

[FORM] récupérer les données d'un formulaire
Bonjour à tous,

desolé si ce sujet a déja été traité dans le forum mais je ne l'ai pas trouvé.
Je voudrais savoir si il est impossible d'automatiser la récupération de données contenu dans un formulaire sans faire les input un par un.

Ex:
Code:

1 2 3 4 5 Pour chaque elementDeFormulaire dans Formulaire variable nom=elementDeFormulaire.id variable valeur=elementDeFormulaire.valeur fin pour
Si quelqu'un a un script je suis preneur, si ca marche aussi avec les boutons radio alors la :lahola:

MICI
29/11/2007, 10h14
E.Bzz
Bonjour,
quelque cose comme
Code:

1 2 3 le_form = document.forms['name_du_form']; for (i=0; i<le_form.length; i++) alert(le_form.elements[i].name + ' = ' + le_form.elements[i].value);
Pas de raison que les radio passent à la trappe ;)

EDIT : par contre, attention à ne pas mélanger ID et NAME (seul IE se laisse avoir)

A+
29/11/2007, 10h45
dragonfly

Merci pour le code, j'osai pas espérer aussi simple ^^.

Je l'essaye et je reviens donner mes impressions.

P.S : j'utilise toujours l'ID comme ca pas de probléme8-)
29/11/2007, 10h56
dragonfly

Aprés vérification, mes impressions sont les suivantes.

Script trés court, efficace, agréable a utiliser , etc...

MAIS parce qu'il y'a un mais, concernant les boutons radios, il me les affiche tous alors que moi je ne veut que celui qui coché...:aie:
C'est pour ca je disais les boutons radios ...
29/11/2007, 11h00
E.Bzz

Citation:

Envoyé par dragonfly

concernant les boutons radios, il me les affiche tous alors que moi je ne veut que celui qui coché...:aie:
C'est pour ca je disais les boutons radios ...

C'est pour ça que je disais de pas mélanger NAME et ID :mrgreen:

En utilisant bien les name (logique de formulaire) tu n'aurais que la value de celui coché ;)

A+

Je viens d'essayer et non, en mettant les names, j'ai la même chose.

Voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
	this.recupForm = function(id){
		le_form = document.forms[id];
		for (i=0; i<le_form.length; i++){
			this.ajoutOption(le_form.elements[i].name,le_form.elements[i].value);
		}	
		this.httpRequest();
	}
 
	this.ajoutOption = function(nomOpt,option){
		var caracMag="&";
		if(this.option==0){
			caracMag="?";
		}	
		this.option++;
		this.url=this.url+caracMag+nomOpt+"="+option;
	}

et voici mes boutons radio

Code:

1
2
3
4
5
6
 
 Foil
<input id="foil" type="radio" value="oui" name="foil"/>
Oui
<input id="foil" type="radio" value="non" name="foil"/>
Non

A moins que je ne me sois planté dans la conception de mes boutons radio

29/11/2007, 11h33
E.Bzz

Citation:

Envoyé par dragonfly

A moins que je ne me sois planté dans la conception de mes boutons radio

Certains de tes id sont dupliqués (un id doit être unique) ...

A+

OK OK je viens de corriger
Code:

1 2 3 4 5 6 Foil <input id="yFoil" type="radio" value="oui" name="foil"/> Oui <input id="nFoil" type="radio" value="non" name="foil"/> Non
Mais j'ai toujours le même probléme...

29/11/2007, 12h05
E.Bzz

Citation:

Envoyé par dragonfly

Mais j'ai toujours le même probléme...

Faudrait voir le code HTML de ton formulaire, ainsi que l'appel des fonctions ...

Et puis je vois des id dans ton code JS, alors qu'il s'agissait d'une logique basée sur les name.

A+

Des id, ou ca ?8O8O8O

Voici le code entier de mon formulaire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
<form action="javascript:var ajaxe=new ajax("chgCara","ajoutCarte.php"); ajaxe.recupForm("formAjout");" method="post" name="formAjout" id="formAjout"> 
<select onchange="" name="type" id="type">
<option value="">-------</option><
option value="1">Créature</option>
<option value="2">Artefact</option>
<option value="3">Créature-artefact</option>
<option value="4">Rituel</option>
<option value="5">Ephémère</option>
<option value="6">Enchantement</option>
<option value="7">Terrain</option>
</select><br/> 
<br/>Rareté <input type="text" value="" name="rarete" id="rarete"/><br/> Illustrateur 
<input type="text" value="" name="illustrateur" id="illustrateur"/>
<br/> Foil <input type="radio" value="oui" name="foil" id="yFoil"/> 
Oui   <input type="radio" value="non" name="foil" id="nFoil"/> Non   
<input type="submit" value="Ajouter" name="subAjout" id="subAjout"/></form>

et le code javascript en entier

Code:

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
 
 
// Création de la classe
// Parametre(s):
// id => Id de la div concernée
// url => URL du fichier a injecter dans la div
function ajax(id,url){
	this.id=id;
	this.url=url;
	// Ce paramétres permet de savoir si une option a été ajouté ou non (pour savoir si faut mettre (? ou &)
	this.option=0;
 
	// Fonction permettant de balancer une HTTPrequest
	this.httpRequest = function(){
		alert(this.url);
		var texte= '';
		var id=this.id;
		if (document.getElementById){
			document.getElementById(id).innerHTML= 'Ca arrive...';
		}
		var xmlhttp=false;
		try{
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(E){
				xmlhttp = false;
			}
		}
		if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
			try{
				xmlhttp = new XMLHttpRequest();
			} catch (e){
				xmlhttp = false;
			}
		}
		if(!xmlhttp && window.createRequest){
			try{
				xmlhttp = window.createRequest();
			} catch(E){
				xmlhttp = false;
			}
		}
		xmlhttp.open('POST',this.url,true);
		xmlhttp.onreadystatechange=function() {
			if (xmlhttp.readyState==4) {
				if(document.getElementById){
					document.getElementById(id).innerHTML = xmlhttp.responseText;
				}
			}
		}
		xmlhttp.setRequestHeader('Content_type','application/x-www-form-urlencoded');
		var data = 'texte='+escape(texte);
		xmlhttp.send(data);
	}
 
 
	// fonction permettant de rajouter des options a la fin de l'URL
	// Paramétres
	// nomOpt => Nom de l'option a mettre dans l'URL
	// option => Valeur de cette option
	this.ajoutOption = function(nomOpt,option){
		var caracMag="&";
		if(this.option==0){
			caracMag="?";
		}	
		this.option++;
		this.url=this.url+caracMag+nomOpt+"="+option;
	}
 
 
	// Fonction permettant de facon automatique de récupérer les données d'un formulaire
	this.recupForm = function(id){
		le_form = document.forms[id];
		for (i=0; i<le_form.length; i++){
			this.ajoutOption(le_form.elements[i].name,le_form.elements[i].value);
		}	
		this.httpRequest();
	}	
}

Voila

Au final , je rajoute juste une condition dans la boucle for pour gérer les boutons radio et les checkbox.
Si quelqu'un est intéréssé, voici le code
Code:

1 2 3 4 5 6 7 8 le_form = document.forms[id]; for (i=0; i<le_form.length; i++){ if( (le_form.elements[i].type!="radio" && le_form.elements[i].type!="checkbox") || (le_form.elements[i].checked!=false) ){ this.ajoutOption(le_form.elements[i].id,le_form.elements[i].value); } }