Pourquoi est-ce que je soumets le formulaire deux fois? jQuery submit() avec le bouton radio

Question

J'utilise jQuery pour envoyer un formulaire dans une application MVC. J'ai un point d'arrêt à l'intérieur du contrôleur et je vois qu'il est frappé deux fois. Qu'est-ce que je fais mal?

Voici mon jQuery

(function ($) { 

    $(document).ready(function() { 

     $(':radio').change(function() { 

      $('#frmMDR').submit(); 
     }); 

    }); 
})(jQuery); 

et voici le formulaire html

<form action="/Module/ModuleIndex" id="frmMDR" method="get"> 
    <input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label> 
    <input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label> 
    <input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label> 
<input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" /> 
</form> 

Je suppose que je ne devrais pas utiliser l'événement de changement. Si quelqu'un sait comment corriger le problème, j'aimerais entendre des idées. Merci beaucoup pour tous les conseils.

Cheers,
~ ck à San Diego

Answer 1

vous obtenez deux coups sûrs parce que deux boutons radio changent état. Les boutons radio permettent qu'un seul élément dans un groupe à sélectionner de façon lorsque vous cliquez sur un bouton radio, deux événements se produisent:

1. Un nouveau bouton radio est sélectionné
2. Le bouton radio sélectionné précédemment est décochée

Ceci est deux événements et la raison pour laquelle votre code est frappé deux fois. Pour le résoudre, vous pouvez donner une classe à vos boutons radio, puis gérer l'événement en cliquant sur la classe en tant que sélecteur.

<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label> 
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label> 
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label> 

Et votre jQuery pourrait être:

$('.radio').click(function() { 
    $('#frmMDR').submit(); 
}); 

Answer 2

Vous devriez probablement vérifier sélectionné dans la fonction de changement pour ce qui est sélectionné. De cette façon, il se déclenchera uniquement pour le bouton radio sélectionné, et vous n'avez pas besoin de vous soucier de lier ou de désengager les événements, et cela devrait fonctionner quelle que soit la méthode de saisie modifiée.

Voici un article sur handling events from check boxes and radio buttons in JQuery.