ajout de formulaire avec incrementation des id

Version imprimable

Bonjour,

j'ai un formulaire avec :

Code:

1
2
<form id="formulaire1" ...
<input id = "bouton1" type="submit" class = "buttonmulti"...

la fonction jquery qui valide :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("input:submit.buttonmulti").click(function(){
		idinput = $(this).attr("id");
		parentformname = $("#"+idinput).parents("form").attr("id");
		//alert(parentformname);
		$("#"+parentformname).submit(function(){
			var str = $(this).serialize();
			$.ajax({
				//ajaxOptions: { cache: false },
				type: "POST",
				url: "traitement_formultiligne.php",
				data: str,
				success: function(msg){
					alert(msg);
					if(msg != 'erreur'){
					alert("Formulaire enregistré");
					}else{
					alert("Formulaire en erreur");
					}
				}
			});
			return false;
		});
	});

ça marche nickel.

Maintenant je voudrais ajouter le meme formulaire avec des ids incrementés pour le "form" et pour le bouton submit

j'ai donc un lien

Code:

1
2
	echo '<div id="newformajout"></div>';
	echo '<div id="addForm" style="clear:both"><a href="#">Ajouter</a></div>';

geré par la fonction suivante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	$('#addForm').click(function() {
		$.ajax({
			//ajaxOptions: { cache: false },
			type: "POST",
			url: "traitement_ajout_form.php",
			data: "compteur=<?php echo $cpt?>",
			success: function(msg){
				alert(msg);
				$('#newformajout').replaceWith(msg);
				//nouveau = $('#addForm').val();
				//alert(nouveau);
			}
		});
	});

sachant que

Code:

<?php echo $cpt?>

est = au nombre de formulaire deja affiché

au premier clic sur le lien "ajouter" le nouveau form s'affiche
mais si je clic une seconde fois : rien ne se passe !

Merci de votre aide

Bon j'arrive à afficher autant de formulaire que de clic sur le lien ajouter
avec les ids incrementés

par contre la fonction jquery d'enregistrement ne se fait pas
je resume :
fonction qui affiche un nouveau formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$('#addForm').click(function() {
		$.ajax({
			//ajaxOptions: { cache: false },
			type: "POST",
			url: "traitement_ajout_form.php",
			data: "compteur=<?php echo $_SESSION['cptforminsert']?>",
			success: function(msg){
				alert(msg);
				$('#newformajout').replaceWith(msg);
			}
		});
	});

fonction qui enregistre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
	$("input:submit.buttonmulti").click(function(){
		idinput = $(this).attr("id");
		parentformname = $("#"+idinput).parents("form").attr("id");
		//alert(parentformname);
		$("#"+parentformname).submit(function(){
			var str = $(this).serialize();
			$.ajax({
				//ajaxOptions: { cache: false },
				type: "POST",
				url: "traitement_formultiligne.php",
				data: str,
				success: function(msg){
					alert(msg);
					if(msg != 'erreur'){
					alert("Formulaire enregistré");
					}else{
					alert("Formulaire en erreur");
					}
				}
			});
			return false;
		});
	});

on dirait que cette fonction n'est pas appelée !
pourtant le bouton submit a bien la class "buttonmulti"

merci de votre aide

resolu

il fallait mettre la fonction qui enregistre dans le success da la fonction ajax

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
 
	$('#addForm').click(function() {
		$.ajax({
			//ajaxOptions: { cache: false },
			type: "POST",
			url: "traitement_ajout_form.php",
			data: "compteur=<?php echo $_SESSION['cptforminsert']?>&id=<?php echo $trans_id?>&table=<?php echo $trans_table?>",
			success: function(msg){
				alert(msg);
				$('#newformajout').replaceWith(msg);
				$("input:submit.buttonmulti").click(function(){
					idinput = $(this).attr("id");
					parentformname = $("#"+idinput).parents("form").attr("id");
					alert(parentformname);
					$("#"+parentformname).submit(function(){
						var str = $(this).serialize();
						$.ajax({
							//ajaxOptions: { cache: false },
							type: "POST",
							url: "traitement_formultiligne.php",
							data: str,
							success: function(msg){
								alert(msg);
								if(msg != 'erreur'){
								alert("Formulaire enregistré");
								}else{
								alert("Formulaire en erreur");
								}
							}
						});
						return false;
					});
				});
			}
		});
	});

mais est ce la bonne methode ?

07/09/2009, 11h25
danielhagnoul

Bonsoir.

Avec :

Code:

$("input:submit.buttonmulti").live("click", function(){

vous deviez pouvoir en faire une fonction externe à la fonction AJAX, comme dans votre premier post.

Merci, c'est une surtension. Il faut que je me branche sur un courant moins puissant ;).

EDIT : fausse manœuvre, j'ai effacé le contenu de mon post par erreur ! Je pensais écrire un nouveau post et non édité celui-ci ! Je suis vraiment malade ! :oops:

donc :

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
 
$('#addForm').click(function() {
		$.ajax({
			//ajaxOptions: { cache: false },
			type: "POST",
			url: "traitement_ajout_form.php",
			data: "compteur=<?php echo $_SESSION['cptforminsert']?>&champs_id=<?php echo $trans_champs_id?>&id=<?php echo $trans_id?>&table=<?php echo $trans_table?>",
			success: function(msg){
				//alert(msg);
				$('#newformajout').replaceWith(msg);
				$("input:submit.buttonmulti").click(function(){
					idinput = $(this).attr("id");
					parentformname = $("#"+idinput).parents("form").attr("id");
					//alert(parentformname);
					$("#"+parentformname).submit(function(){
						var str = $(this).serialize();
						$.ajax({
							//ajaxOptions: { cache: false },
							type: "POST",
							url: "traitement_formultiligne.php",
							data: str,
							success: function(msg){
								//alert(msg);
								if(msg != 'erreur'){
								alert("Formulaire enregistré");
								}else{
								alert("Formulaire en erreur");
								}
							}
						});
						return false;
					});
				});
			}
		});
	});

est equivalent à

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
 
$('#addForm').click(function() {
		$.ajax({
			//ajaxOptions: { cache: false },
			type: "POST",
			url: "traitement_ajout_form.php",
			data: "compteur=<?php echo $_SESSION['cptforminsert']?>&champs_id=<?php echo $trans_champs_id?>&id=<?php echo $trans_id?>&table=<?php echo $trans_table?>",
			success: function(msg){
                                       $('#newformajout').replaceWith(msg);
				$("input:submit.buttonmulti").live(function(){
					idinput = $(this).attr("id");
					parentformname = $("#"+idinput).parents("form").attr("id");
 
				});
			}
		});
	});
 
$("#"+parentformname).submit(function(){
						var str = $(this).serialize();
						$.ajax({
							//ajaxOptions: { cache: false },
							type: "POST",
							url: "traitement_formultiligne.php",
							data: str,
							success: function(msg){
								//alert(msg);
								if(msg != 'erreur'){
								alert("Formulaire enregistré");
								}else{
								alert("Formulaire en erreur");
								}
							}
						});
						return false;
					});

bon retablissement :)

07/09/2009, 20h49
danielhagnoul

Bonsoir.

Avec :

Code:

$("input:submit.buttonmulti").live("click", function(){

vous deviez pouvoir en faire une fonction externe à la fonction AJAX, comme dans votre premier post.

Merci, c'est une surtension. Il faut que je me branche sur un courant moins puissant ;).