jquery .val() sur input undefined

**doncandid** · 10/08/2011, 21h08

Bonjour, m’intéressant de plus en plus a l'ajax, j'essai d'en metre ou je peu car je trouve le rendu très sympa.

le probleme est pour un formulaire que j'ai fait ou quand j'esai de recuperer les infos contenu dans les input ( de type text ) avec la fonction val de jquery je me retrouve avec que des variable non définit.

pour que sa soit plus parleur, voici le code qui pose probleme.

le formulaire:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<form id="form_modif">
<div style="float:left; width:350px;margin-top:15px;margin-left:65px;"><input type="text" id="info_nom" name="info_nom" value="<? echo $row['nom']; ?>"><br>
<input type="text" id="info_adresse1" name="info_adresse1" value="<? echo $row['adresse1']; ?>"><br>
<input type="text" id="info_adresse2" name="info_adresse2" value="<? echo $row['adresse2']; ?>"><br>
<input type="text" id="info_codepostal" name="info_codepostal" value="<?php echo $row['codepostal']; ?>" size="6">
<input type="text" id="info_ville" name="info_ville" value="<?php echo $row['ville']; ?>">
</div>
<div style="float:left;margin-top:15px">
<input type="text" id="info_tel1" name="info_tel1" value="<? echo $row['tel1']; ?>"><br>
<input type="text" id="info_tel2" name="info_tel2" value="<? echo $row['tel2']; ?>"><br>
<input type="text" id="info_email" name="info_email" value="<? echo $row['email']; ?>"></div>
<input type="submit" value="essai"></form>

et voici la fonction JS qui est censé produire ce que je veux:

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
$(function() {
 
$("#form_modif").submit(function() {
 
 
$(".info_client").html('<img src="style/ajax-loader.gif" />');
alert("nom="+$('#info_nom').val()+"&adresse1="+$('#info_adresse1').val()+"&adresse2="+$('#info_adresse2').val()+"&codepostal="+$('#info_codepostal').val()+"&ville="+$('#info_ville').val()+"&tel1="+$('#info_tel1').val()+"&tel2="+$('#info_tel2').val()+"&email="+$('#info_email').val());
	$.ajax({
		type: "POST",
  		url: "include/valid_info_espace_client.php",
 		data: "nom="+$('#info_nom').val()+"&adresse1="+$('#info_adresse1').val()+"&adresse2="+$('#info_adresse2').val()+"&codepostal="+$('#info_codepostal').val()+"&ville="+$('#info_ville').val()+"&tel1="+$('#info_tel1').val()+"&tel2="+$('#info_tel2').val()+"&email="+$('#info_email').val(),
 
  		success: function(html){
				 $(".info_client").empty();
 				 $(".info_client").append(html);
 				 $(".info_client_legend").html('<b>Mes coordonnées : <a href="" class="modif_info_client" style="margin-left:15px;">Modifier mes informations</a></b>');
 
 					}
});
 
 
 
    return false;
	});
 
});

donc tout a l'air de fonctionner sauf les variable qui reste non définit....

voila ce que donne l'alerte:

Code :

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

1
2
nom=undefined&adresse1=undefined&adresse2=undefined&codepostal=undefined&ville=undefined&tel1=undefined&tel2=undefined&email=undefin
ed

Pour info ( meme si sa ne sert a rien dans le probleme ):
.info_client correspond a la div ou se situe le formulaire ( elle meme dans un fieldset )
.info_client_legend correspond a la legend du fieldset

**NoSmoking** · 10/08/2011, 23h04

Bonsoir,
as tu regardé du coté de la méthode $("#form_modif").serialize();

Invité · 11/08/2011, 08h19

Bonjour,

Envoyé par doncandid

Pour info ( meme si sa ne sert a rien dans le probleme )... .info_client ...

Ben si, justement. Le problème était là ...
Comme quoi, il est toujours bon de donner des informations sur ce qui se passe "autour" du problème présumé ...
Et comme le dit Mulder à Scully :

"... La Vérité est ailleurs ..."

après avoir testé le code ... :
-> il faut d'abord récupérer les valeurs AVANT de remplacer le formulaire par l'image ajax-loader.gif
C'est en testant avec le formulaire "hors" du div que j'ai vu le problème (plus exactement : il n'y avait plus de problème)
Ca 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
	$(function() {
 
		$("#form_modif").submit(function() {
			var info_nom = $('#info_nom').val();
			var info_adresse1 = $('#info_adresse1').val();
			var info_adresse2 = $('#info_adresse2').val();
			var info_codepostal = $('#info_codepostal').val();
			var info_ville = $('#info_ville').val();
			var info_tel1 = $('#info_tel1').val();
			var info_tel2 = $('#info_tel2').val();
			var info_email = $('#info_email').val();
			// remplacement du formulaire par image
			$(".info_client").html('<img src="style/ajax-loader.gif" alt="... traitement en cours ..."/>');
			alert("nom="+info_nom+"&adresse1="+info_adresse1+"&adresse2="+info_adresse2+"&codepostal="+info_codepostal+"&ville="+info_ville+"&tel1="+info_tel1+"&tel2="+info_tel2+"&email="+info_email);
			$.ajax({
				type: "POST",
				url: "include/valid_info_espace_client.php",
				data: "nom="+info_nom+"&adresse1="+info_adresse1+"&adresse2="+info_adresse2+"&codepostal="+info_codepostal+"&ville="+info_ville+"&tel1="+info_tel1+"&tel2="+info_tel2+"&email="+info_email,
				success: function(html){
					 $(".info_client").empty();
					 $(".info_client").append(html);
					 $(".info_client_legend").html('<b>Mes coordonnées : <a href="" class="modif_info_client" style="margin-left:15px;">Modifier mes informations</a></b>');
				}
			});
			return false;
		});
	});

Remarques importante html / php :

remplacer :
<? -> <?php
<input ...> -> <input .../>
<br> -> <br />
<img src="..."> -> <img src="..." alt="..." />

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
<div class="info_client">
	<form id="form_modif">
	<fieldset><legend class="info_client_legend">essai formulaire</legend>
		<div style="float:left; width:350px;margin-top:15px;margin-left:65px;">
			<input type="text" id="info_nom" name="info_nom" value="<?php echo $row['nom']; ?>"/><br />
			<input type="text" id="info_adresse1" name="info_adresse1" value="<?php echo $row['adresse1']; ?>"/><br />
			<input type="text" id="info_adresse2" name="info_adresse2" value="<?php echo $row['adresse2']; ?>"/><br />
			<input type="text" id="info_codepostal" name="info_codepostal" value="<?php echo $row['codepostal']; ?>" size="6"/>
			<input type="text" id="info_ville" name="info_ville" value="<?php echo $row['ville']; ?>"/>
		</div>
		<div style="float:left;margin-top:15px">
			<input type="text" id="info_tel1" name="info_tel1" value="<?php echo $row['tel1']; ?>"/><br />
			<input type="text" id="info_tel2" name="info_tel2" value="<?php echo $row['tel2']; ?>"/><br />
			<input type="text" id="info_email" name="info_email" value="<?php echo $row['email']; ?>"/>
		</div>
		<input type="submit" value="essai"/>
	</fieldset>
	</form>
</div>

**doncandid** · 11/08/2011, 10h09

effectivement le problème venais bien de la, merci de ton aide.

avant ceci je ne savais pas trop utilisé l'ajax, mais a force de tester sa m'a permit d'en apprendre plus, mais sans votre aide j'aurais été coincé, donc un grand merci

jquery .val() sur input undefined

jQuery

Discussions similaires

Partager

Partager