[JQuery] formulaire et jquery

Version imprimable

Bonjour à tous toujours dans l'apprentissage

pourquoi si je fais

test3.html

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>                                                                  
	<head>           
		<title>test 3</title>    
		<script type="text/javascript" src="lib/js/jquery.js"></script>   
		<script type="text/javascript">
			$(function() {
				$('#varForm').submit(function() {
				nom = $('#nom');
			$.post("test.php", { name: nom },  
     function success(data){  
           alert(data.name +' '+data.email);  
       },"json"); // on passe en parametre optionnel le type de retour ici JSON  				
				});
			});
		</script>
		<style type="text/css">
 
		</style>                                                 
	</head>                                                                 
	<body>                  
		<form id="exemple3Form" action="">
			<label for="nom">Votre nom</label>
			<input type="text" id="nom"  /><br />
			<input type="submit" />
		</form>
	</body>                                                                 
</html>

et dans mon fichier test3.php

Code:

1
2
 
<?php echo json_encode($_POST);   ?>

ca ne fonctionne pas ??

également le contenu ici remonte dans une alertbox, mais pour qu'il aille dans une div comment faire ??

et si c'est un formulaire avec plusieurs champs si j'ai bien compris il faut utiliser serialize, mais peut ont faire $('#monForm').serialize ??

Merci par avance

26/08/2008, 12h25
franculo_caoulene

Salut,

"Ca ne fonctionne pas" ne veut rien dire. Que constates-tu? As-tu une erreur HTTP 404 ou 500, par exemple? 404 car tu nous montre le code d'un fichier test3.php mais dans ton script tu appelles test.php.
Que retourne ton code serveur (à poster plutôt que le code php la prochaine fois).

Pour que le contenu s'affiche dans un élément il faut utiliser une des ces méthodes : http://docs.jquery.com/Manipulation. Il faudrait plus de précisions.

Pour serialize(), même réponse que ci-dessus. Voici la documentation à lire : http://docs.jquery.com/Ajax/serialize
26/08/2008, 13h27
Hotfirenet

justement dans firebug, c'est ça le problème c'est que ça ne m'affiche rien

erreur de frappe pour test.php

je met un exemple a cette adresse : http://labo.hotfirenet.com/Apprentis.../exemple3.html

pour l'exmple 2 sur http://labo.hotfirenet.com/Apprentis.../exemple2.html fonctionne
26/08/2008, 14h37
franculo_caoulene

Dans exemple3 le formulaire n'a pas d'id et tu attaches l'évènement à un élément identifié en tant que "varForm"
26/08/2008, 14h56
Hotfirenet

Ok autant pour moi c'est corriger mais je ne pense pas que j'utilise la méthode post de la bonne façon ..

J'ai reussi en faisant

comme ceci :

mais j'aurais préféré passer par $post

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>                                                                  
	<head>           
		<title>Apprentissage jQuery - Exemple 3</title>    
		<script type="text/javascript" src="lib/js/jquery.js"></script>   
		<script type="text/javascript">
			$(function() {
				$('#exemple3Form').submit(function() {
					jQuery.ajax({
						type: "POST",
						url: "exemple3.php",
						data: $('#nom'),
						error: function() {
							console.debug("Probleme de submit");
						},
						success: function(r) {
							$('#resultat').text(r);
						}
					});
					return false;
				} );
			} );
		</script>
		<style type="text/css">
 
		</style>                                                 
	</head>                                                                 
	<body>                  
		<form id="exemple3Form" action="">
			<label for="nom">Votre nom</label>
			<input type="text" name="nom" id="nom"  /><br />
			<input type="submit" />
		</form>
		<div id="resultat"></div>
	</body>                                                                 
</html>

Bonjour,

Tu veux passer par des données type JSON ou ?nom=toto ? Ce n'est pas la même chose!
Dans ton exemple précédent, la valeur du data est mauvaise.

Il faut :
Code:

1 2 3 4 5 6 7 8 jQuery.ajax({ type: "POST", url: "exemple3.php", data: "nom="+$('#nom').val(), // ou data: {nom: $('#nom').val()} et c est jquery qui transformera en nom=toto error: function() {console.debug("Probleme de submit");}, success: function(r) {$('#resultat').text(r);} });
Ou via serialize():
Code:

1 2 3 4 5 6 7 8 jQuery.ajax({ type: "POST", url: "exemple3.php", data: $('#exemple3Form').serialize(), error: function() {console.debug("Probleme de submit");}, success: function(r) {$('#resultat').text(r);} });
A+

26/08/2008, 17h48
Hotfirenet

je fais bien la différence entre get et post en php y'a pas de prob

c'est surtout après la j'utilise jQuery.ajax, mais qu'elle est la différence entre jQuery.ajax et $ajax
et que sont $post et $get si l'on peut faire ajax({ type: 'POST' })

je pensais passer par json car je pense que c'est plus propre mais c'est après pour récupérer les variables que je en sais pas faire, alors je pense retourner un contenu html avec mes valeurs intégrer je pense que c'est plus facile mais moins propre

en tout cas merci de ton aide
26/08/2008, 18h31
Invité

Re,

Pas de différence entre jQuery.ajax() et $.ajax(), $ est un alias de jQuery (pas oublier le point).

$.ajax() est la fonction complète où il est possible de tout paramétrer.
$.post() et $.get() sont des fonctions "simplificatrices", certains paramètres sont déjà fixés (requète de type POST ou de type GET).

Le script PHP peut effectivement renvoyer une réponse sous forme JSON, HTML, XML, ... Il n'y a pas, à mon sens, de plus ou moins propre. Simplement, pour jquery, si tu lui transmets une réponse en JSON, il faut le lui indiquer, et il fera une évaluation de la réponse pour créer un objet javascript en représentation JSON, donc facilement manipulable. Si la réponse est au format HTML, ce qui est aussi propre, il est possible simplement de l'inserrer dans le DOM (ex: $('#lediv').html(mareponse) ).

Pour ce qui est de JSON, tu me lire ce post

A+