2010-11-23 7 views
2

J'ai un formulaire avec des boutons radio en elle. Avant que le formulaire ne soit soumis, je dois vérifier que 10 boutons radio sont cochés. Ce code fait l'affaire (ie je reçois l'alerte quand 10 ont été vérifiés) mais je ne peux pas savoir où mettre mes instructions return true et return false pour l'arrêter ou le laisser soumettre si mon compte a atteint 10.jquery soumettre formulaire problème

$('.submit').click(function() { 
     var radios = $(':radio'); 
     var count = 0; 
     $.each(radios, function() { 
      if ($(this).is(':checked')) { 
       count++; 
       alert(count); 
      } 

      if (count === 10) { 
       alert('hi') 
       return true; 
      } 
     }) 
     return false; 
}) 

En ce moment le return false en bas arrête le formulaire en soumettant même quand le compte est 10 mais je dois retourner false là pour arrêter le formulaire en soumettant tout de suite.

Espérons que cela a du sens.

Répondre

3

Utilisation event.preventDefault() au lieu de return false;. En outre, utiliser le soumettre événement au lieu de l'événement click:

var the_form = $('#theformid'); 
the_form.submit(function (event) { 
    var radios = the_form.find(':radio:checked'); 
    if (radios.length !== 10) { 
     event.preventDefault(); 
     // provide feedback here. 
    } 
}); 

Si vous attachez à l'événement click, votre formulaire peut encore être soumis à l'aide du clavier.

2

Essayez quelque chose comme ceci:

$('.submit').click(function(){ 
    return $('#yourform :radio:checked').length == 10; 
}); 

Espérons qu'il y a un identifiant de conteneur comme #yourform vous pouvez utiliser pour rendre plus spécifique le sélecteur, comme ci-dessus.


Edit: Selon votre commentaire, si vous voulez intercepter la soumission du formulaire fiable (par exemple, même lorsqu'il est soumis sans le bouton étant cliqué), comme d'autres ont suggéré que vous devez attacher le comportement à présenter de la forme un événement.

$('#yourform').submit(function(e){ 
    var hasTen = $(this).find(':radio:checked').length == 10; 
    if(!hasTen){ 
    e.preventDefault(); 
    alert('Please check ten boxes.'); 
    } 
}); 
+0

C'est génial. Très succinct ... mais je dois fournir une alerte si 10 n'ont pas été vérifiés alors j'ai besoin de quelque chose avec un si. event.preventDefault() ressemble au blaireau. –

0

Pourquoi vérifiez-vous le nombre à l'intérieur de l'itération? Vous devriez le résoudre en mettant le contrôle en dehors de chaque func.

$('.submit').click(function() { 
    var radios = $(':radio'); 
    var count = 0; 
    $.each(radios, function() { 
     if ($(this).is(':checked')) { 
      count++; 
     }   
    }); 

    if (count == 10) { 
      return true; 
      alert("great!"); 
    } 
    return false; 
}) 

Je vous conseille aussi d'utiliser console.log (msg) au lieu d'alerte (msg), bien meilleure mise au point;)

EDIT: Je vois maintenant vos commentaires sur l'alerte, je pensais il était là pour des buts de débogage c'est pourquoi un vous a parlé du console.log;)

Questions connexes