Comment puis-je optimiser mon formulaire avec jQuery

**pierrot10** · 31/03/2013, 23h01

Bonjour,
En deux mots, j'utilise ajax pour etraire les infromations d'une base de donnée.
Elles sont affichées dans un formaulire <form>, pour permettre a l'utilisateur de modifier les données et les sauver dans la base de donnée.

Mon code html est ainsi:

Code html :

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
<form class="form">
<table>
<tr>
<td><input type="text" id="1-marque" value="vovlo" /></td><td><input id="1-modele" type="text" value="V40" /></td><td><input type="button" id="1" value="sauver" /></td>
</tr>
 
<tr>
<td><input type="text" id="2-marque" value="vovlo" /></td><td><input id="2-modele" type="text" value="V40" /></td><td><input type="button" id="2" value="sauver" /></td>
</tr>
 
<tr>
<td><input type="text" id="3-marque" value="Fiat" /></td><td><input id="3-modele" type="text" value="Panda" /></td><td><input type="button" id="3" value="sauver" /></td>
</tr>
 
<tr>
<td><input type="text" id="4-marque" value="VW" /></td><td><input id="4-modele" type="text" value="Golf" /></td><td><input type="button" id="4" value="sauver" /></td>
</tr>
[... jusqu'à 30 autres lignes ...]
</table>

A savoir que je peux avoir jusqu'à 30 lignes. Evidemment , je n'en fait pas autent dans mon exemple.

Pour chauqe ligne, j'ai un bouton "sauver".

J'aimerais que lorsque je clique sur sauver d'une ligne, il en envoie uniquement les données de la ligne souhaitée/sélectionnée. Il envoie donc les données au script PHP qui va mettre a jour la base de donnée.

A savoir que l'id du champs de type bouton correspond à l'ID de la base de donnée.

J'aimerais donc savoir qu'elle est la meilleur facon de faire proprement.
Es-ce que je peux utiliser des bouton submit?

Code html :

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

<input type="submit" id="1" value="sauver" />

Comment puis-je recupérer les données de la lignes ou j'appuie sur "sauver"?

Milles mercis

**pierrot10** · 31/03/2013, 23h04

Je ne suis pas certain si je dois utiliser ceci

Code :

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

1
2
3
4
5
 
    $('.form').on('submit', function() {
 
		//Recupère les données de la ligne souhaitée
	});

Je crois que ceci ne marchera pas car j'tilise de buton de type "button" et non pas "submit"

**danielhagnoul** · 01/04/2013, 10h38

Bonjour

Exemple :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					$( "form.voiture" ).on( "submit", function(){
						var str = $( this ).serialize() + "&ref=" + $( this ).data( "ref" ),
							jqXHR = $.get( "monFichier.php", str );
 
						// debug
						console.log( str );
 
						jqXHR.done( function( data, textStatus, jqXHR ){
							// succès de la transaction, on doit traiter le contenu de data
 
							//debug
							console.log( data, textStatus, jqXHR );
 
							// votre code
 
						});
 
						jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
							// échec de la transaction, gérer la catastrophe
 
							// debug
							console.log( jqXHR, textStatus, errorThrown );
 
							// votre code
 
						});
 
						// Eventuellemnt:
						/*
						jqXHR.always( function( jqXHR, textStatus ){
							// la transaction est terminée
 
							// debug
							console.log( jqXHR, textStatus );
						});
						*/
 
						return false; // indispensable !
					});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<table>
	<tbody>
		<tr>
			<form class="voiture" data-ref="voiture1">
				<td><input type="text" name="marque" value="vovlo"></td>
				<td><input type="text" name="modele" value="V40"></td>
				<td><input type="submit" value="sauver"></td>
			</form>
		</tr>
		<tr>
			<form class="voiture" data-ref="voiture2">
				<td><input type="text" name="marque" value="Fiat"></td>
				<td><input type="text" name="modele" value="Panda"></td>
				<td><input type="submit" value="sauver"></td>
			</form>
		</tr>
		<tr>
			<form class="voiture" data-ref="voiture3">
				<td><input type="text" name="marque" value="VW"></td>
				<td><input type="text" name="modele" value="Golf"></td>
				<td><input type="submit" value="sauver"></td>
			</form>
		</tr>
	</tbody>
</table>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-03-31T22:39:49.552+02:00" pubdate>2013-03-31T22:39:49.552+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**pierrot10** · 01/04/2013, 12h14

Salut Daniel,

Je te remercie pour ta reponse, mais je t'avoue resté un peu confu.
D'abord j'ai quelques restions:
Qu'es-ce ceci:
http://cdnjs.cloudflare.com/ajax/lib...99/head.min.js
http://cdnjs.cloudflare.com/ajax/lib...raphael-min.js
http://danielhagnoul.developpez.com/lib/dvjh/base.js

Je pense que dans mon cas, j'en ai pas besoin, car pour faire fonctionné mon AJAX j'ai besoin de
jquery-1.9.1.min.js et
getXhr.js

Je ne comprends cette partie (ce début)

Code jquery :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					$( "form.voiture" ).on( "submit", function(){

Je suppose que si je la mets dans le head de ma page, ca ne resoudra pas mon problème car la page sera chargée avant que je clique sur mon bouton qui va extraire le donnée de ma base de donné grâce a AJAX.

Je pense que je dois mettre ceci dans le code qui est extrait et affiché par AJAX? N'es-ce pas?

Exemple:
Ceci est le fichier PHP qui est traité par AJAX. (Je mets que la partue important)

Code PHP :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
if($nb_search >= 1){

/* JE DOIS AJOUTER TON CODE ICI?? */

echo '
<script>
		"use strict";
 
		head.js( 
			"http://path-to-my-script/getXhr.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",

			function(){
 
				$( function(){
 
					$( "form.voiture" ).on( "submit", function(){
						var str = $( this ).serialize() + "&ref=" + $( this ).data( "ref" ),
							jqXHR = $.get( "monFichier.php", str );
 
						// debug
						console.log( str );
 
						jqXHR.done( function( data, textStatus, jqXHR ){
							// succès de la transaction, on doit traiter le contenu de data
 
							//debug
							console.log( data, textStatus, jqXHR );
 
							// votre code
 
						});
 
						jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
							// échec de la transaction, gérer la catastrophe
 
							// debug
							console.log( jqXHR, textStatus, errorThrown );
 
							// votre code
 
						});
 
						// Eventuellemnt:
						/*
						jqXHR.always( function( jqXHR, textStatus ){
							// la transaction est terminée
 
							// debug
							console.log( jqXHR, textStatus );
						});
						*/
 
						return false; // indispensable !
					});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
';



	while($data_search=mysql_fetch_assoc($query_search)){
		
		/* SELECT Marques */
		$sql_marque = 'SELECT * FROM marques ORDER BY label ASC';
		$query_marque = mysql_query($sql_marque)or die(mysql_error());
		$nb_marque = mysql_num_rows($query_marque);
		$select_marque='<select id="'.$data_search['int'].'-marque">';
		while($data_marque=mysql_fetch_assoc($query_marque)){

			$select_marque .= '<option value="'.$data_marque['id'].'"';
			($data_marque['id'] == (int)$_POST['marque']) ? $select_marque.= 'selected="selected"' : $select_marque.='';
			$select_marque .= '>'.$data_marque['label'].'</option>';
		}
		$select_marque .= "</select>";
		
		/* SELECT CARBURANT */
		$sql_carbu = 'SELECT * FROM carburants ORDER BY carburant_id DESC';
		$query_carbu = mysql_query($sql_carbu)or die(mysql_error());
		$nb_carbu = mysql_num_rows($query_carbu);
		
		$select_carbu='<select id="'.$data_search['int'].'-carburant">';
		
		while($data_carbu=mysql_fetch_assoc($query_carbu)){
		
			$select_carbu .= '<option value="'.$data_carbu['carburant_id'].'"';
			($data_carbu['carburant_id'] == $data_search['carburant']) ? $select_carbu .= 'selected="selected"' : $select_carbu.='';
			$select_carbu .= '>'.$data_carbu['label'].'</option>';
		}
		$select_carbu .= "</select>";
		
		echo '<tr>';
		echo '<td>'.$data_search['int'].'</td><td>'.$select_marque.'</td><td>'.$select_cat.'</td><td>'.$select_carbu.'</td><td><input type="text" class="fType" id="'.$data_search['int'].'-type" value="'.$data_search['type'].'" /></td><td><input type="text" class="fBatterie" id="'.$data_search['int'].'-batterie" value="'.$data_search['batteries'].'" /></td><td><input type="text" class="fAnnee" id="'.$data_search['int'].'-annee" value="'.$data_search['annee'].'" /></td><td><input type="text" class="fPrixcat" id="'.$data_search['int'].'-prixcat" value="'.$data_search['prixcat'].'" /></td><td><input type="text" class="fPrix" id="'.$data_search['int'].'-prix" value="'.$data_search['prix'].'" /></td><td><input class="submit" type="button" id="'.$data_search['int'].'-save" value="Sauver" /></td>';
	}	echo '</tr>';
}else{
	echo '<tr><td colspan="10">Aucunes batteries n\'a été trouvées selon les critères sélectionnés.  </td></tr>';
}

Mais , il n'y a pas plus simple?
Genre refresh le DOM?

Merci

**danielhagnoul** · 01/04/2013, 12h20

C'est ma page de test, il suffit de copier-coller pour tester !

Pour votre code, prenez uniquement la partie qui vous intéresse, la table et le code jQuery : $( "form.voiture" ).on( "submit", function(){ ... });.

**pierrot10** · 01/04/2013, 13h08

J'ai encore une petite question
Es-tu sure que l'on peu faire ceci

Code HTML :

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
 
<table>
	<tbody>
		<tr>
			<form class="voiture" data-ref="voiture1">
				<td><input type="text" name="marque" value="vovlo"></td>
				<td><input type="text" name="modele" value="V40"></td>
				<td><input type="submit" value="sauver"></td>
			</form>
		</tr>
		<tr>
			<form class="voiture" data-ref="voiture2">
				<td><input type="text" name="marque" value="Fiat"></td>
				<td><input type="text" name="modele" value="Panda"></td>
				<td><input type="submit" value="sauver"></td>
			</form>
		</tr>

mettre des form entre de tr?
Le form ne devrait pas englober les <table>?

**danielhagnoul** · 01/04/2013, 22h40

Tag "form" dans le tag "tr"

Oops !

Distraction, le plus étrange c'est que cela fonctionne et ne produit aucune erreur !

Code corrigé :

Code html :

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
<table>
	<tbody>
		<tr>
			<td><input type="text" name="marque" value="vovlo"></td>
			<td><input type="text" name="modele" value="V40"></td>
			<td><input class="voiture" data-ref="voiture1" type="submit" value="sauver"></td>
		</tr>
		<tr>
			<td><input type="text" name="marque" value="Fiat"></td>
			<td><input type="text" name="modele" value="Panda"></td>
			<td><input class="voiture" data-ref="voiture2" type="submit" value="sauver"></td>
		</tr>
		<tr>
			<td><input type="text" name="marque" value="VW"></td>
			<td><input type="text" name="modele" value="Golf"></td>
			<td><input class="voiture" data-ref="voiture3" type="submit" value="sauver"></td>
		</tr>
	</tbody>
</table>

Code javascript :

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
28
29
30
31
32
33
34
35
36
37
38
$( "input[type='submit'].voiture" ).on( "click", function(){
	var jObjTr = $( this ).parents( "tr" ),
		jObjTds = jObjTr.children(),
		jqXHR = $.get( "monFichier.php", {
			"ref" : $( this ).data( "ref" ),
			"marque" : jObjTds.find( "input[name='marque']" ).val(),
			"modele" : jObjTds.find( "input[name='modele']" ).val()
		} );
 
	// debug
	console.log(
		"ref : ", $( this ).data( "ref" ),
		"marque : ", jObjTds.find( "input[name='marque']" ).val(),
		"modele : ", jObjTds.find( "input[name='modele']" ).val()
						 );
 
	jqXHR.done( function( data, textStatus, jqXHR ){
		// succès de la transaction, on doit traiter le contenu de data
 
		//debug
		console.log( data, textStatus, jqXHR );
 
		// votre code
 
	});
 
	jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
		// échec de la transaction, gérer la catastrophe
 
		// debug
		console.log( jqXHR, textStatus, errorThrown );
 
		// votre code
 
	});
 
	return false;
});

Comment puis-je optimiser mon formulaire avec jQuery

jQuery

Discussions similaires

Partager

Partager