Différencier les formulaires
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
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
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
}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..
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...
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>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 :)