Différencier les formulaires

Par Jaya, il y a 12 ans


Bonsoir :)

Je reviens vers vous car je n'ai rien trouvé sur google...
Je m'explique, j'ai 3 questionnaires et un seul qui s'affiche lorsqu'on répond et on appuie sur valider (je fais disparaitre l'ancien formulaire et apparaitre le nouveau formulaire via jQuery) mais quand je clique sur valider sans cocher une case sur le 1er questionnaire le message d'erreur s'affiche (Vous devez cocher une case avant d'appuyer sur valider) par conte le problème c'est que sur les deux autres le message d'erreur ne s'affiche pas vu que tous les formulaires ont le même attribue name dans l'input et que je génère dynamiquement les formulaires, donc je souhaiterai savoir s'il y a une fonction en jQuery qui permet d'ajouter des numéros dans l'attribue name afin de différencier les formulaires et afficher le message d'erreur correctement.

Je vous remercie.

Exemple de script que je souhaite :

<input type="text" name="test-1">
<input type="text" name="test-2">
<input type="text" name="test-3">
etc..

Ma fonction check :

function Check(){
   var $radios = $('input[type=radio]');
    if($radios.is(':checked') == false) {
            $('.error').text("Vous devez cocher une case avant d'appuyer sur valider");
            return false;
            console.log("Oups j'ai oublié de coché");
            }
        else{
             $('.error').text("");
             return true;
             console.log("j'ai coché");
        }
}

9 réponses

antho07, il y a 12 ans

Bonjour, j'imagine que tes formulaires sont dans un div différente chaque fois ?
Dans ce cas il faut lancer au click une fonction, se débrouiller pour lui passer dans quel formulaire on est, puis adapter la fonction en fonction de ça..

Jaya, il y a 12 ans

Oui dans un div, je pensais aussi de cette manière mais ça ne fonctionne pas donc je pense faut plus passer par l'attribue name mais je ne sais pas comment faire...

antho07, il y a 12 ans

quel est le code html complet des formulaires (avec les divs englobantes) ?

Jaya, il y a 12 ans

Voilà :)

<div id="push_survey">
    <div class="title">Question</div>
    <span class="success"></span>
    <span class="error"></span>
                <div id="question1" class="content survey" style="">
            <div class="question">Question 1</div>
            <div id="form-poll">

                            <label class="label_radio" for="radio-01">
                    <input name="radio-set" id="radio-01" value="1" type="radio">Loremp ipsum
                </label>
                            <label class="label_radio" for="radio-02">
                    <input name="radio-set" id="radio-02" value="2" type="radio">Loremp ipsum
                </label>
                            <label class="label_radio" for="radio-03">
                    <input name="radio-set" id="radio-03" value="3" type="radio">Loremp ipsum
                </label>
                            <label class="label_radio" for="radio-04">
                    <input name="radio-set" id="radio-04" value="4" type="radio">Loremp ipsum
                </label>

             <input type="submit" id="submit-form-poll" value="Valider" class="submit">
             </div>
        </div>
                <div id="question2" class="content survey" style="display: none;">
            <div class="question">Question 2/div>
            <div id="form-poll">

                            <label class="label_radio" for="radio-01">
                    <input name="radio-set" id="radio-01" value="1" type="radio">Loremp ipsum
                </label>
                            <label class="label_radio" for="radio-02">
                    <input name="radio-set" id="radio-02" value="2" type="radio">Loremp ipsum
                </label>
                            <label class="label_radio" for="radio-03">
                    <input name="radio-set" id="radio-03" value="3" type="radio">Loremp ipsum
                </label>

             <input type="submit" id="submit-form-poll" value="Valider" class="submit">
             </div>
        </div>

                <div id="question3" class="content survey" style="display: none;">
            <div class="question">Question 3/div>
            <div id="form-poll">

                            <label class="label_radio" for="radio-01">
                    <input name="radio-set" id="radio-01" value="1" type="radio">Loremp ipsum
                </label>
                            <label class="label_radio" for="radio-02">
                    <input name="radio-set" id="radio-02" value="2" type="radio">Loremp ipsum
                </label>
                            <label class="label_radio" for="radio-03">
                    <input name="radio-set" id="radio-03" value="3" type="radio">Loremp ipsum
                </label>

             <input type="submit" id="submit-form-poll" value="Valider" class="submit">
             </div>
        </div>

    </div>
antho07, il y a 12 ans

Attention .. un id doit être unique sur une page... id="radio-01" est présent 3 fois etc...

antho07, il y a 12 ans

Personnellement si je devais avoir à faire ça :
Je mettrai un attribut data-form (ou data-truc) sur les submit:
genre

form1 
...
<input type="submit" data-form="1" class="submit" etc....>
form2
...
<input type="submit" data-form="2" class="submit" etc....>
form3 
...
<input type="submit" data-form="3" class="submit" etc....>

puis

$(".submit").click(function(event){
var numeroForm = event.target.dataset.form;
//On passe ensuite ce numero à la fonction check
if(check(numeroForm)){
//Ton traitement
}
});

Et enfin on récupère les bons input dans la fonction check

function Check(numero){
   var $radios = $('.question'+numero+' input[type=radio]');
    if($radios.is(':checked') == false) {
            $('.error').text("Vous devez cocher une case avant d'appuyer sur valider");
            console.log("Oups j'ai oublié de coché"); //avant le return sinon ça s executera jamais
             return false;

            }
        else{
             $('.error').text("");
             console.log("j'ai coché");
             return true;

        }
}

A adapter suivant les cas et modulo erreurs de syntaxes XD

Jaya, il y a 12 ans

Pour l'id Radio c'est générer automatiquement donc c'est normal... (je pense)

$(".submit").click(function(event){
    var numeroForm = event.target.dataset.form;
        //On passe ensuite ce numero à la fonction check
    if(check(numeroForm)){
        //Ton traitement
    }
});

Quand tu dis "on passe ensuite ce numéro à la fonction check" comment faire pour le passer ?

Merci beaucoup :)

Pewel-OutOfNutella, il y a 12 ans

Le commentaire "on passe ensuite ce numéro à la fonction check", dit par antho, n'est qu'une traduction française de la ligne en dessous, à savoir :

if(check(numeroForm)) {
//Ton traitement
}
Jaya, il y a 12 ans

Ah d'accord merci problème résolu :)