jquery .val() sur input undefined [Résolu]

[doncandid]

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 :

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 :

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 :

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]

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

[jreaux62]

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 :

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 :

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]

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