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

**albedo0** · 19/02/2013, 09h12

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 :

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

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 :

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

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 :

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

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

**SpaceFrog** · 19/02/2013, 09h20

tu passes quoi en paramètre ?

**andry.aime** · 19/02/2013, 09h26

Bonjour,

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

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
<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

.

A+.

**albedo0** · 19/02/2013, 12h08

En paramètre je passe le nom du formulaire.

Mon lien se trouver sous la forme suivante :

Code :

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

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

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

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
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"
    });
}

**SpaceFrog** · 19/02/2013, 12h38

Code :

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

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

**albedo0** · 19/02/2013, 13h40

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 ??

**Bovino** · 19/02/2013, 13h40

escape()

Il est préférable de passer par encodeURIComponent().

**albedo0** · 19/02/2013, 13h47

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

Mea culpa ! Merci à tous

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...

**SpaceFrog** · 19/02/2013, 14h12

le return false inhibe le href ...

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

Code :

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

document.forms[nomform].elements

**albedo0** · 19/02/2013, 14h19

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...

**Bovino** · 19/02/2013, 14h25

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 ?

**andry.aime** · 19/02/2013, 14h27

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+.

**albedo0** · 19/02/2013, 14h30

Effectivement...

J'ai donc changé pour :

Code :

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

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

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 ???

**andry.aime** · 19/02/2013, 14h39

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

**albedo0** · 19/02/2013, 15h04

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 :

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
function dossierSuiviPiecesManquante(){
 
    $.fancybox.close();
 
    var data = $("#piecesmanquantes").serialize();
 
    $.ajax({
        url: urlweb+ "ajax.php",
        type: "POST",
        data: data,
        success: function(data) {
            alert('test');
        },
        dataType: "json"
    });
}

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

JavaScript

Discussions similaires

Partager

Partager