[Résolu] Fonction qui gère plusieur boutons

Bonjour et désolé pour le titre qui n'est pas terrible, je vais décrire mon problème.

Pour mettre dans la situation, j'ai une page avec plusieurs formulaires dans des div qui apparaisse selon la sélection de l'utilisateur.

Au total j'ai 3x7 formulaires avec donc autant de bouton pour les soumettre.

je ne souhaite pas charger une page à chaque validation d'un formulaire donc je suis passé par ajax : via script jquery, je capture le clic sur le bouton, je fait ma requête via ajax et je retourne le résultat.

ce qui donne côté code :

HTML:

<form id="ajout_mot_clef" method="post" action="testjquery.php">
	<input type="hidden" name="action" value="add">
	<input type="hidden" name="type" value="mot_clef">
	<label>Nouveau mot clef : </label>
	<input type="text" id ="mot_clef" name="mot_clef" size="20" maxlength="30" value="">
	<input id="add_mot_clef" type="submit" name="add_mot_clef" value="Ajouter le mot clef">
</form>

JQUERY:

$(document).ready(function() {

	var $form = $('#ajout_mot_clef');

	$('#add_mot_clef').on('click', function() {
		$form.trigger('submit');
		return false;
	});
	
	$form.on('submit', function() {
		$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: function(json) {
					if(json.retour == 'ok') {
						alert('Mot clef ajout\351e avec succ\350s.');
					} else if(json.retour == 'erreur') {
						alert('Erreur : cette entr\351e existe d\351j\340 dans la table');
					} else {
						alert('Erreur : '+ json.reponse);
					}
				}
			});
		return false;
	});
});

ça marche très bien, quand le clic sur le bouton pour valider, ma page ne bouge pas et j'ai mon résultat qui s'affiche nickel mais faire ce code x 21... ça va être un peu lourd^^

De ce fait, je souhaite faire UNE fonction qui gère le tout avec des switch and co. j'ai fait ceci :

HTML:

<!--Premier form-->
<form id="ajout_meta" method="post" action="testjquery.php">
    <!--Blablabla le code de son contenu-->
    <input id="add_meta" class="envoi" type="submit" value="Ajouter">
</form>

<!--Second form-->
<form id="ajout_mot_clef" method="post" action="testjquery.php">
    <!--Blablabla le code de son contenu-->
    <input id="add_mot_clef" class="envoi" type="submit" name="add_mot_clef" value="Ajouter le mot clef">
</form>

JQUERY:

$(document).ready(function() {

	$(".envoi").on('click', function() { // Capture du clic par la class
		var id_envoi = (this.id); // On récupère l'id du bouton cliqué
		
		switch(id_envoi) // on switch sur l'id
		{
			case 'add_meta': // Si id du bouton = add_meta
				$form = $('#ajout_meta'); // le formulaire à soumettre est ajout_meta
				break;
			case 'add_mot_clef': // Si id du bouton = add_mot_clef
				$form = $('#ajout_mot_clef'); // le formulaire à soumettre est ajout_mot_clef
				break;
		}
		$form.trigger('submit'); // on soumet le formulaire
		return false; // normalement empèche la page de soumettre elle même (il me semble)
	});
	
	$form.on('submit', function() {
		$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: function(json) {
					if(json.retour == 'ok') {
						alert('Ajout\351e avec succ\350s.');
					} else if(json.retour == 'erreur') {
						alert('Erreur : cette entr\351e existe d\351j\340 dans la table');
					} else {
						alert('Erreur : '+ json.reponse);
					}
				}
			});
		return false;
	});
});

Résultat :
Quand je clic sur un bouton, le script me soumet bien le bon formulaire (en passant via le script, testé avec des alert) mais il me charge la page testjquery.php au lieu de passer par ajax.

Personnellement, je ne vois pas pourquoi... Si quelqu'un peu m'aider, ça serré vraiment le top

Merci d'avance
Modifié par elihos (05 Jun 2012 - 09:31)

Salut,

Si tu ajoutes une classe commune à tous tes formulaires ("ajax-form" par exemple), tu peux ensuite les sélectionner avec jQuery facilement, ca donnerait grossièrement quelque chose de le genre (il y a des optimisations à prévoir):

	$('.ajax-form').on('submit', function() {
		$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: function(json) {
					if(json.retour == 'ok') {
						alert('Ajout\351e avec succ\350s.');
					} else if(json.retour == 'erreur') {
						alert('Erreur : cette entr\351e existe d\351j\340 dans la table');
					} else {
						alert('Erreur : '+ json.reponse);
					}
				}
			});
		return false;
	});

Et tu peux même enlever l'écouteur d'évènement sur le bouton submit car de toute façon cliquer sur un bouton submit déclenche l'évènement "submit" du formulaire associé donc c'est redondant.
Modifié par martint (04 Jun 2012 - 19:43)

martint a écrit :
Si tu ajoutes une classe commune à tous tes formulaires ("ajax-form" par exemple), tu peux ensuite les sélectionner avec jQuery facilement

Ou juste la balise <form>, pas besoin de classe dans ce cas.

	$('form').on('submit', function() {...

Oui, à condition qu'il n'y ait pas d'autres formulaires dans la page auxquels il ne faudrait pas attacher l'évènement

Milles merci à vous!

Suffisait d'y penser mais je devais avoir trop le nez dans mon code, borné sur ma capture des boutons^^

J'ai utilisé la classe communes aux form concernés car j'ai deux form d'upload que je ne peux donc pas gérer via ajax.

Encore merci à vous