Home/ Questions/Q 7972701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:56:10+00:00

I have a MVC3 page that is split into tabs. Each tab has a

  • 0

I have a MVC3 page that is split into tabs. Each tab has a partial view on it with an AJAX form with different ids. 

@using (Ajax.BeginForm("Create1", "ControllerName", ajaxOptions, new { id = "frmCreate1" }))
...
@using (Ajax.BeginForm("Create2", "ControllerName", ajaxOptions, new { id = "frmCreate2" }))
...
@using (Ajax.BeginForm("Create3", "ControllerName", ajaxOptions, new { id = "frmCreate3" }))

Each tab has a save button on it with different ids. 

<input type="submit" id="btnSave1" />
...
<input type="submit" id="btnSave2" />
...
<input type="submit" id="btnSave3" />
...

Each tab includes a javascript file that has handlers for the buttons:

// Submit Button
    $('#btnSave1').button({ label: "Save" });
    $('#btnSave1').click(function () {
        $.blockUI({ message: 'We are constructing your new Type 1, please wait just a moment...', theme: true, title: 'Saving' });
        $('frmCreate1').trigger('submit');
    });

...
// Submit Button
    $('#btnSave2').button({ label: "Save" });
    $('#btnSave2').click(function () {
        $.blockUI({ message: 'We are constructing your new Type 2, please wait just a moment...', theme: true, title: 'Saving' });
        $('frmCreate2').trigger('submit');
    });
...

// Submit Button
    $('#btnSave3').button({ label: "Save" });
    $('#btnSave3').click(function () {
        $.blockUI({ message: 'We are constructing your new Type 3, please wait just a moment...', theme: true, title: 'Saving' });
        $('frmCreate3').trigger('submit');
    });

Everything is submitting properly to the back end and it’s getting the data it needs from the form. However I changed the selector in the method to

$('#frmCreate1).trigger('submit');

and now when running it the form gets submitted more than once causing me to jump in the debugger and subsequently post the same data twice.

I’m guessing that it’s submitting the form via Ajax with the right selector and then subsequently firing the actual submit for the form again but I’m not for sure what’s happening.

I want to make sure the code is correct in terms of what I’m really trying to do. These should be 3 single and separate submits. Do I change the “Submit” buttons to just button types instead of submit or should there be more in the javascript to prevent that second submit from happening? preventDefaults or something?

Thanks!

Edit: Should also include the Ajax Options, they occur on each and correspond to the tabs, they are all named differently but just in case the “Post” method had anything to do with this.

@{
    AjaxOptions ajaxOptions = new AjaxOptions
    {
        HttpMethod = "Post",
        UpdateTargetId = "tabs-1",
    };
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Re-posting my answer from the comments:

    The issue was that the submit button was actually submitting the form while the selector $('frmCreate1').trigger('submit'); was doing nothing since it didn’t return any elements. When the selector was made valid by adding the ‘#’ so that it looked for an id rather than a tag name, then that triggered the submit as well. Hence the double submit. If you pick one or the other that should stop the double submit.

    • 0