Récupérer les données d'un formulaire

Version imprimable

Bonjour,

Je souhaite récupérer les données d'un formulaire se trouvant dans une fenêtre modal qui utilise Fancybox 2.

J'ai trouvé ici même une fonction javascript répondant parfaitement à mes besoins
Code:

1 2 3 4 5 6 7 8 function getDataFromForm(Form) { var data=""; var key=0; for (key=0; key< Form .elements.length;key++) { data+=escape(Form.elements[key].name)+"="+escape(Form.elements[key].value)+"&"; } return data.substr(0, data.length-1); }
Cela ne fonctionne pas et Firebug me renvoit l'erreur suivante :
Code:

1 2 3 TypeError: Form.elements is undefined [Stopper sur une erreur] for (key=0;key<Form.elements.length;key++) {
J'ai essayé de mieux cibler mon formulaire, mais sans succès.
Code:

1 2 3 4 5 6 7 8 function getDataFromForm(formu) { var data=""; var key=0; for(key = 0 ; key < document.forms[formu].elements.length ; key++) { data += escape(document.forms[formu].elements[key].name)+"="+escape(document.forms[formu].elements[key].value)+"&"; } return data.substr(0, data.length-1); }
Si quelqu'un pouvait m'aider se serait sympa !

Merci par avance

19/02/2013, 09h20
SpaceFrog

tu passes quoi en paramètre ?

Bonjour,

Ton code JS est bon, j'imagine que c'est la façon dont tu l'appelles qui n'est pas bonne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
	<head>
		<script type="text/javascript">
			function getDataFromForm(formu) {
			var data="";
			var key=0;
			for(key = 0 ; key < document.forms[formu].elements.length ; key++) {         
				 data += escape(document.forms[formu].elements[key].name)+"="+escape(document.forms[formu].elements[key].value)+"&";
			}
			return data.substr(0, data.length-1);
		}
		</script>
	</head>
	<body>
		<form name="nomForm">
			<input type="text" name="text1" value="1"/>
			<input type="text" name="text2" value="2"/>
			<input type="text" name="text3" value="3" />
		</form>
	    <input type="button" onclick="alert(getDataFromForm('nomForm'))" value="appel de la fonction"/>
 
	</body>
</html>

EDIT: c'est la deuxième fois en quelque minute que tu me devances Spaffy :aie:.

A+.

En paramètre je passe le nom du formulaire.

Mon lien se trouver sous la forme suivante :

Code:

<a style="cursor: pointer;" onclick="javascript:dossierSuiviPiecesManquante();">Valider</a>

Où j'appelle la fonction dossierSuiviPiecesManquante() qui utilise getDataFromForm.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function dossierSuiviPiecesManquante(){
 
    $.fancybox.close();
 
    var dataForm = getDataFromForm('piecesmanquantes') ;
 
    $.ajax({
        type: "POST",
        url: urlweb+ "ajax.php",
        data: "composant=dossiers&action=adminSuiviChangeEtat&"+dataForm ,
        processData: function(){
            $('#message').html('En cours...');
        },
        success: function(data){
            if( data.erreur == null ) {
 
            } else {
            } 
        },
        dataType: "json"
    });
}

19/02/2013, 12h38
SpaceFrog

Code:

<a style="cursor: pointer;" onclick="dossierSuiviPiecesManquante();return false;">Valider</a>
19/02/2013, 13h40
albedo0

Merci bien Spacefrog !

Ça marche (j'ai cru d'où mon edit)... même si je vois pas trop à quoi sert ce return false ;

Sinon j'ai toujours cette erreur de firebug... est-ce normal ??
19/02/2013, 13h40
Bovino

escape() :nono:

Il est préférable de passer par encodeURIComponent().
19/02/2013, 13h47
albedo0

Je n'ai remercié que spacefrog....

Mea culpa ! Merci à tous :ccool:

Sinon je croyais ne plus avoir l'erreur de firebug, mais elle persiste... et j'ai réussi à récupérer les données (d'où ma joie intense) une fois mais là cela ne fonctionne plus...
19/02/2013, 14h12
SpaceFrog

le return false inhibe le href ...

pour ce qui est du message d'erreur, utilise une syntaxe plus rigoureuse

Code:

document.forms[nomform].elements
19/02/2013, 14h19
albedo0

Enfin plus d'erreur avec firebug !

Juste un dernier point... j'utilise des checkbox et je reçois la liste des checkbox qu'elles soient cochées ou non... :oops:
19/02/2013, 14h25
Bovino

Si tu regardes le code de ta fonction getDataFromForm(), tu ne cherches à aucun moment de savoir de quel type de champ il s'agit et donc, tu ne cherches pas à savoir si les champs sont cochés ou pas...

Ceci dit, puisque tu utilises jQuery, pourquoi ne pas utiliser .serialize() qui fait ça tout seul ? :whistle:
19/02/2013, 14h27
andry.aime

A titre d'information, si tu n'as pas utilisé jQuery, tu peux tester si le tagName de l'élément est égal à "input", le type est égal à "checkbox" et s'il est coché (attribut checked).

A+.

Effectivement...

J'ai donc changé pour :
Code:

1 2 3 4 5 6 7 8 9 10 function getDataFromForm(formu) { var data=""; var key=0; for (key=0; key< document.forms[formu].elements.length;key++) { if($('#piece_'+document.forms[formu].elements[key].value).attr('checked')){ data+=encodeURIComponent(document.forms[formu].elements[key].name)+"="+encodeURIComponent(document.forms[formu].elements[key].value)+"&"; } } return data.substr(0, data.length-1); }
Je me rapproche du résultat mais je n'ai plus les input :calim2:

Mais je vais essayer de voir avec cette fonction serialize... Pourquoi je ne l'ai pas utilisé avant.. hum comment dire... j'aime me compliquer la vie ??? :lol:

19/02/2013, 14h39
andry.aime

Erreur de ma part, si c'est un input checkbox, et qu'il n'est pas coché, tu ne fais pas la concaténation.

Merci à tous pour votre aide !!!!

La fonction que j'ai posté précédemment fonctionne mais ne ramène que les checkbox cochées ! Il faudrait amélioré la condition pour récupérer les input...

Mais pour ma part, j'ai écouté le conseil de Bovino et exploité la fonction serialize de Jquery...

D'où quelque chose de bien plus simple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function dossierSuiviPiecesManquante(){ $.fancybox.close(); var data = $("#piecesmanquantes").serialize(); $.ajax({ url: urlweb+ "ajax.php", type: "POST", data: data, success: function(data) { alert('test'); }, dataType: "json" }); }