[RESOLVED]Form Submit: Allowed before page finishes loading?

Greetings,

We have some larger data entry screens, with Save/Cancel buttons at the top, and the bottom of the page. If the page is loading, and say takes 2-3 seconds, you can see the screen load while the ‘page loading’ wheel is spinning in the browser.

Every so often, the user just needs to change a piece of information at the top of the page, and hit ‘Save’, but does so before the page is finished loading (big page, slow connection, whatever), and page/form will submit with only say 50%-70% of the expected
variables in the FormCollection that is passed into the HttpPost even/submit routine in the controller. From here the page usually crashes etc.

What is the most appropriate or accepted way to handle this? Sure, we could only have the Save/Cancel buttons at the end of the screen, so those buttons are the last to show up, therefore the page has loaded completely – but is there a way to otherwise ensure
the page has loaded completely before accepting a submit / post back? jQuery or something with a ‘Page Loading’ spinner before the page can be used? 

Looking for ideas and/or best practices.

 

You can use Ajax.BeginForm and handle OnBegin and OnSuccess events to show dynamically display the loading spinner images.

Reference:

http://www.codeproject.com/Articles/41749/Displaying-JQuery-Progress-using-ASP-NET-MVC-with

The article below uses AjaxOptions LoadingElementId property:

http://stackoverflow.com/questions/17688552/show-loader-on-ajax-beginform-submit

http://stackoverflow.com/questions/6466612/mvc3-ajax-loading-icon

Hope this helps.

Another option is to use CSS to position the buttons, but put the HTML for the buttons as the last line of your page code.  That way all the other HTML would have loaded before the buttons are even there for the client’s browser to render.

The users can still enter return to post even if submit buttons hidden. You should place the form in a div, and mark it as display:none. On Dom ready event or just after the the end form, , change the display to block. You could also include a loading div before
the form div, and hide it when the form is ready.
@using (Ajax.BeginForm("OwnFundTransferLoadConfirm", "FundTransfer",
    new AjaxOptions
    {
        UpdateTargetId = "function_page",
        InsertionMode = InsertionMode.Replace,
        LoadingElementId = "ulProgress",
        HttpMethod = "POST",
        OnSuccess=""
    }, new { @class = "form-horizontal row-fluid well", id = "frmOAFT" }))
{


}

use ajax submit and onsuccess function ….

This will not work. The ajax code is attached at Dom ready event, so until this time a standard form submit will be performed, if the user clicks a submit button or hit enter.

Leave a Reply