AJAX, formulaires, meme function

Bonjour a tous,

J'ai des formulaires générer dynamiquement qui ressemble à ça sur la meme page

<form action="" method="post">
<input type="hidden" id="send_user" name="send_user" value="<? echo $dnn['id_user_active'];?>">
<input type="hidden" id="receive_user" name="receive_user" value="<? echo $user['id_neighbor'];?>">
<button type="submit" class="btn" id="envoi-form1">Envoyer</button>

<form action="" method="post">
<input type="hidden" id="send_user" name="send_user" value="<? echo $dnn['id_user_active'];?>">
<input type="hidden" id="receive_user" name="receive_user" value="<? echo $user['id_neighbor'];?>">
<button type="submit" class="btn" id="envoi-form2">Envoyer</button>

et ce javascript

<script language="JavaScript">
$(document).ready(function() {
	$('#envoi-form,#envoi-form1').click(function(){  		
				
		var subject = $('#subject').val();
		var send_user = $('#send_user').val();
		var receive_user = $('#receive_user').val();
		var message = $('#message').val();
						
		$.ajax({
   		type: "POST",
   		url: "comm/envoi-message.php",
   		cache: false,
   		async: false,
   		data: {'subject':subject, 'send_user':send_user,'receive_user':receive_user,'message':message},
   		success: function(retour1) { 
	$('.confirm-message').load('comm/confirm-message.php');
	}
	
 		});	 		
	}); 
});
</script>

j'essai d'avoir un javascript qui gère tout mes formulaires pour ne pas avoir 30 javascript dans ma page a écrire.

Mes variables de ces formulaires sont générés dynamiquement tel

#envoi-form, envoie form1.

ça marche pour pour #envoi-form mais pas pour les autres ??

Bonjour,
Vous ne pouvez pas utiliser votre événement click sur la class de votre bouton?

De plus si tout vos formulaires sont sur la même page, vous risquez d'avoir des soucis au moment de la récupération des données parce que vous allez avoir des id identiques.

L'idéal sera de mettre un id unique à chaques formulaire et récupérer les données par l'id du formulaire.

ça donnerai :

<form id="form1" action="" method="post">
<input type="hidden" id="send_user" class=send_user"" name="send_user" value="<? echo $dnn['id_user_active'];?>">
<input type="hidden" id="receive_user" class="receive_user" name="receive_user" value="<? echo $user['id_neighbor'];?>">
<button type="submit" class="btn" id="envoi-form1">Envoyer</button>

<script language="JavaScript">
$(document).ready(function() {
	$('.btn').click(function(){  		
				
		var subject = $('#form1').find('.subject').val();
		var send_user = $('#form1').find('.send_user').val();
		var receive_user = $('#form1').find('.receive_user').val();
		var message = $('#form1').find('.message').val();
						
		$.ajax({
   		type: "POST",
   		url: "comm/envoi-message.php",
   		cache: false,
   		async: false,
   		data: {'subject':subject, 'send_user':send_user,'receive_user':receive_user,'message':message},
   		success: function(retour1) { 
	$('.confirm-message').load('comm/confirm-message.php');
	}
	
 		});	 		
	}); 
});
</script>

J'espère que je suis assez clair
Modifié par epi (26 Feb 2013 - 17:24)

bonjour,

Voici ce que j'ai fait mais seul le premier formulaire fonctionne.

foreach($content['neig'] as $neig) {
if(is_numeric($neig['id_neig']))
echo '
<form action="" method="post" id="form'.$neig['id_neig'].'">
<input type="hidden" id="send_user" name="send_user" value="'.$user_data['id_user_active'].'">
      <input type="hidden" id="receive_user" name="receive_user" value="'.$neig['id_neig'].'">

<button type="submit" class="btn btn-primary send_message" id="envoi-form_'.$neighbor['id_neig'].'">Envoyer</button>

et mon javascript

<script language="JavaScript">
$(document).ready(function() {
	$('.send_message').click(function(){  		
				
		var subject = $('#subject').val();
		var send_user = $('#send_user').val();
		var receive_user = $('#receive_user').val();
		var message = $('#message').val();
						
		$.ajax({
   		type: "POST",
   		url: "comm/envoi-message.php",
   		cache: false,
   		async: false,
   		data: {'send_user':send_user,'receive_user':receive_user},
   		success: function(retour1) { 
	$('.confirm-message').load('comm/confirm-message.php');
	}
	
 		});	 		
	}); 
});
</script>

Modifié par damien_55 (26 Feb 2013 - 17:38)

@ epi on s'est croisé, j'étudie votre post

epi a écrit :
Bonjour,
Vous ne pouvez pas utiliser votre événement click sur la class de votre bouton?

De plus si tout vos formulaires sont sur la même page, vous risquez d'avoir des soucis au moment de la récupération des données parce que vous allez avoir des id identiques.

L'idéal sera de mettre un id unique à chaques formulaire et récupérer les données par l'id du formulaire.

ça donnerai :

<form id="form1" action="" method="post">
<input type="hidden" id="send_user" class=send_user"" name="send_user" value="<? echo $dnn['id_user_active'];?>">
<input type="hidden" id="receive_user" class="receive_user" name="receive_user" value="<? echo $user['id_neighbor'];?>">
<button type="submit" class="btn" id="envoi-form1">Envoyer</button>

<script language="JavaScript">
$(document).ready(function() {
	$('.btn').click(function(){  		
				
		var subject = $('#form1').find('.subject').val();
		var send_user = $('#form1').find('.send_user').val();
		var receive_user = $('#form1').find('.receive_user').val();
		var message = $('#form1').find('.message').val();
						
		$.ajax({
   		type: "POST",
   		url: "comm/envoi-message.php",
   		cache: false,
   		async: false,
   		data: {'subject':subject, 'send_user':send_user,'receive_user':receive_user,'message':message},
   		success: function(retour1) { 
	$('.confirm-message').load('comm/confirm-message.php');
	}
	
 		});	 		
	}); 
});
</script>

J'espère que je suis assez clair

Je suis bien d'accord avec vous @epi, j'avais bien vu ça. Mais mon problème, c'est de ne pas écrire 30 fois ce javascript d'autant plus que le nombre de formulaires est dynamiques donc il me faudrait autant de javascript qu'il y a de retour de base.

Mon soucis est de faire en quelque sorte un foreach ou un script javascript qui prennent en consideration les valeurs du formulaire sur lequel on clique. Un seul unique javascript quelque soit le formulaire rempli puisque ils ont la meme action.

hmm j'avais oublié 2 trois chose. J'ai donc modifier l'id des bouton du formulaire, cette id va permttre de récupérer le formulaire en court par une concaténation de "form_"+id du bouton

<form id="form_1" action="" method="post">
<input type="hidden" id="send_user" class=send_user"" name="send_user" value="<? echo $dnn['id_user_active'];?>">
<input type="hidden" id="receive_user" class="receive_user" name="receive_user" value="<? echo $user['id_neighbor'];?>">
<button type="submit" class="btn" id="1">Envoyer</button>
</form>
<form id="form_2" action="" method="post">
<input type="hidden" id="send_user" class=send_user"" name="send_user" value="<? echo $dnn['id_user_active'];?>">
<input type="hidden" id="receive_user" class="receive_user" name="receive_user" value="<? echo $user['id_neighbor'];?>">
<button type="submit" class="btn" id="2">Envoyer</button>
</form>

donc on a :
- on clic sur un bouton '.btn'.
- on récupére l'id de ce bouton ( dans cette exemple ça sera 1 ou 2 )
- on fait une concaténation de l'id récupérer plus la chaine 'form_' ce qui nous donnera l'id du formulaire en cour

<script language="JavaScript">
$(document).ready(function() {
	$('.btn').click(function(){  		
		var id;
                id = $(this).attr('id'); // récupération de l'id du bouton cliqué ( ça sera 1 ou 2 dans notre exemple)
                // récupération des données du formulaire qui aura pour id "form_1" ou "form_2"
		var subject = $('#form_'+id).find('.subject').val();
		var send_user = $('#form_'+id).find('.send_user').val();
		var receive_user = $('#form_'+id).find('.receive_user').val();
		var message = $('#form_'+id).find('.message').val();
						
		$.ajax({
   		type: "POST",
   		url: "comm/envoi-message.php",
   		cache: false,
   		async: false,
   		data: {'subject':subject, 'send_user':send_user,'receive_user':receive_user,'message':message},
   		success: function(retour1) { 
	$('.confirm-message').load('comm/confirm-message.php');
	}
	
 		});	 		
	}); 
});
</script>

grrr, non ça ne marche pas.

J'ai fait une page test avec ce code

<div class="confirm-message">
<form id="form_1" action="" method="post">
<input type="text" class="input-xlarge" class="subject" name="subject" placeholder="Sujet" required><br>
<textarea rows="7" class="input-xlarge" class="message" name="message" placeholder="Message" required></textarea>

<input type="hidden" id="send_user" class="send_user" name="send_user" value="<? echo $user_id;?>">
<input type="hidden" id="receive_user" class="receive_user" name="receive_user" value="21"></form>
<button type="submit" class="btn send_message" id="1">Envoyer</button></div>
<hr size=2>
<div id="content2">
<form id="form_2" action="" method="post">
<input type="text" class="input-xlarge" class="subject" name="subject" placeholder="Sujet" required><br>
<textarea rows="7" class="input-xlarge" class="message" name="message" placeholder="Message" required></textarea>
<input type="hidden" id="send_user" class="send_user" name="send_user" value="<? echo $user_id;?>">
<input type="hidden" id="receive_user" class="receive_user" name="receive_user" value="25"></form>
<button type="submit" class="btn send_message" id="2">Envoyer</button>
</div>

et ce javascript

<script language="JavaScript">
$(document).ready(function() {
	$('.send_message').click(function(){  		
		var id;
                id = $(this).attr('id'); // récupération de l'id du bouton cliqué ( ça sera 1 ou 2 dans notre exemple)
                // récupération des données du formulaire qui aura pour id "form_1" ou "form_2"
		var subject = $('#form_'+id).find('.subject').val();
		var send_user = $('#form_'+id).find('.send_user').val();
		var receive_user = $('#form_'+id).find('.receive_user').val();
		var message = $('#form_'+id).find('.message').val();
						
		$.ajax({
   		type: "POST",
   		url: "comm/envoi-message.php",
   		cache: false,
   		async: false,
   		data: {'subject':subject, 'send_user':send_user,'receive_user':receive_user,'message':message},
   		success: function(retour1) { 
	$('.confirm-message').load('comm/confirm-message.php');
	}
	
 		});	 		
	}); 
});
</script>

j'ai juste changer la class .btn par .send_message par ce qu'elle etait déjà prise.

Je clique, j'ai bien le retour ajax mais rien dans ma base. On dirait qu'il ne récupère pas les valeurs '#form_'+id.

Petit tour dans Firebug pour debugger, aparement il me post bien les classes .receive_user et send_user mais pas .message et .sujet ??

ton soucis vient du fait que tu as 2 attirbuts 'class' dans ton input type="text" et textarea, jquery n'aime pas beaucoup quand on declare x fois le meme attribut dans une balise.

Merci @epi pour ton aide. Tu m'as sauvé

Effectivement, je m'en suis rendu compte aprés.

ça marche impec!