I'm using jQuery to submit a form in an MVC app. I have a breakpoint inside the controller and I see it is being hit twice. What am I doing wrong?

Here is my jQuery

 (function ($) {

    $(document).ready(function () {

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

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

    });
})(jQuery);

and here is the form 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>

I'm guessing I shouldn't be using the change event. If anyone knows how to correct the problem, I'd love to hear any ideas. Thanks so much for any tips.

Cheers,
~ck in San Diego

I'm using jQuery to submit a form in an MVC app. I have a breakpoint inside the controller and I see it is being hit twice. What am I doing wrong?

Here is my jQuery

 (function ($) {

    $(document).ready(function () {

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

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

    });
})(jQuery);

and here is the form 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>

I'm guessing I shouldn't be using the change event. If anyone knows how to correct the problem, I'd love to hear any ideas. Thanks so much for any tips.

Cheers,
~ck in San Diego

• javascript
• jquery
• html
• radio-button
• double-submit-problem

Share Improve this question Follow edited Mar 13, 2013 at 18:26 Roman C 1 asked Dec 15, 2010 at 16:47 HcabnettekHcabnettek 12.9k3838 gold badges129129 silver badges192192 bronze badges 6

• One probable reason could be the event handler being attached twice. Try $(":radio").data('events').change.length in the browser console(Firebug). If it return 2, you have 2 change handlers attached. – vsr Commented Dec 15, 2010 at 17:02
• aside: $(':radio') will attach the event handler to all radio buttons(if there are any) on the page. I prefer $('#frmMDR :radio').change(function () { or $(':radio','#frmMDR').change(function () {. – vsr Commented Dec 15, 2010 at 17:13
• yes this is absolutely the problem. How do I resolve it? Why am I wiring the handler twice? Thanks! – Hcabnettek Commented Dec 15, 2010 at 17:14
• I ended up using this... It works ok but seems a bit hacky. I'm all ears for a better solution... $('#frmMDR :radio').unbind('click').bind('click', function () { $('#frmMDR').submit(); }); – Hcabnettek Commented Dec 15, 2010 at 17:24
• Maybe if you print out the original click handler, it will give you a clue where it came from. – jm. Commented Dec 15, 2010 at 18:18

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

You are getting two hits because two radio buttons are changing state. Radio buttons only allow one element in a group to be selected so when you are clicking a radio button, two events are happening:

1. A new radio button is selected
2. The previously selected radio button is deselected

This is two events and the reason why your code is being hit twice. To solve it you could give your radio buttons a class and then handle the event on click using the class as the selector.

<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>

And your jQuery could be:

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

You should probably just check for selected within the change function for which is selected. This way it'll only fire for the selected radio button, and you don't need to worry about binding or unbinding any events, and it should work regardless of what input method changed it.

Here's an article on handling events from check boxes and radio buttons in JQuery.