Formulaire plusieurs boutons

kamelzagger
Javascript

Bonjour à tous,

Je suis actuellement sur la création d'un site et je coince dans l'élaboration du formulaire d'inscription.

J'ai crée un formulaire à étape qui fonctionne en jquery (afin d'éviter le rechargement de la page), la dernière partie du formulaire consiste à choisir l'abonnement souhaiter par l'utilisateur. Il y en a 6 j'ai donc créé 6 bouton dans mon formulaire :

<form id="FormStep10" class="form-home">
    <button type="submit" name="abonnement" value="Semaine" class="btn">start</button>
    <button type="submit" name="abonnement" value="SemainePro" class="btn">start PRO</button>
    <button type="submit" name="abonnement" value="Mois" class="btn">start</button>
    <button type="submit" name="abonnement" value="MoisPro" class="btn">start PRO</button>
    <button type="submit" name="abonnement" value="3Mois" class="btn">start</button>
    <button type="submit" name="abonnement" value="3MoisPro" class="btn">start PRO</button>
</form>

Ensuite j'ai ce script coté js pour récupéré les donnés du formulaire :

// Formulaire etape 10
    $("#FormStep10").submit(function(e){

      e.preventDefault();

        $.post(
            "trait/step/step10.php",
            {
                abonnement : $(this).find("button[name=abonnement]").val(),
            },

            function(data){

                if(data === 'ok'){

                    // Si c'est ok on affiche la prochaine etape
                    $("#progressbar li.etape6").addClass("active");

                    $('#ModalStep10').fadeOut().animateCss('fadeOutLeftBig');

                    $('#ModalStep11').fadeIn().animateCss('fadeInRightBig', function() {

                    $('#ModalStep11').animateCss('pulse');

                    });

                }
                else{
                     // Sinon on affiche les erreurs.
                    $("#errorStep10").empty().fadeIn().append(data);
                }

            },
            'text'
         );
    });

Côté php j'ai simplement ajouter un var_dump pour avoir un retour.

Je souhaites donc récupérer la valeur uniquement sur le bouton qui est cliqué. Actuellement je recois toujours la valeur du premier bouton, donc toujours "semaine", même si je clique sur un autre bouton.

Je suppose que le probleme viens du JS, dans l'appel du bouton abonnement.. Je sais pas...je sèche...

Je vous remercie d'avance pour votre aide

8 réponses

Pierrot01

Salut,
Au lieu de mettre un submit, tu met un buton simple (enfin 6) et tu fais $(this).val() ;)
@plus

Pierre

JeremieMeunier

Bonjour,

Pourquoi ne pas utiliser les input radio avec un bouton choisir en dessous de toutes tes solutions ? Et si besoins voilà une explication pour personnaliser les bouton radio et checkbox !

Psylozoff

les boutons radio/checkbox nécessitent deux clics! Et niveau ergonomie, l'utilisateur ne s'attend pas à ce que ces contrôles "submit" sans une validation via un autre bouton... La solution des 6 boutons ayant chacun leur évènement onclick me semble plus logique ^^' Pas besoin de s'emmerder avec un form si on gère ensuite le tout en JS..!

kamelzagger
Auteur

Merci pour vos réponses.

Tu dis comme ca @pierrot01 ? 

<button name="abonnement" value="3Mois" class="btn">start</button>
<button name="abonnement" value="3MoisPro" class="btn">start PRO</button>
etc...
 $.post(
            "trait/step/step10.php",
            {
                abonnement : $(this).val(),
            },
            .....

Car se ne semble pas fonctionner, ou je t'ai surement mal compris...

@JeremieMeunier, @Pyslozoff oui en effet, les boutons radio nécessitent deux cliquent. Je souhaite vraiment récupéré la valeur du bouton directement au clique et soumettre le formulaire.

Pierrot01

faut utiliser l'évenement click :;
@plus
Pierre

kamelzagger
Auteur

click ou onClick ? Et je dois le mettre ou exactement ?

Psylozoff

Bah tu cherches :-s On va pas bosser à ta place :-D On t'a dit quoi chercher, c'est easy maintenant... Quand t'auras trouvé, essayé et que tu n'y arriveras tu pourras revenir nous montrer ton nouveau code et poser des questions..!
Et si t'as réussi, tu pourras mettre ta solution en tant que résolution du problème et passer le sujet en résolu!

Pierrot01 
<form id="FormStep10" class="form-home">
    <button class = "qchose" type="button" name="abonnement" value="Semaine" class="btn">start</button>
    <buttonclass = "qchose" type="button" name="abonnement" value="SemainePro" class="btn">start PRO</button>
    <button class = "qchose" type="button" name="abonnement" value="Mois" class="btn">start</button>
    <button class = "qchose" type="button" name="abonnement" value="MoisPro" class="btn">start PRO</button>
    <button class = "qchose" type="button"" name="abonnement" value="3Mois" class="btn">start</button>
    <button class = "qchose" type="button" name="abonnement" value="3MoisPro" class="btn">start PRO</button>
</form>
$(".qchose").click(function(e){
               .......................
               ........................
               $.post(
            "trait/step/step10.php",
            {
                abonnement : $(this).val(),
            },
            ..............................
            ..........................

}

@pluche
Pierre