Question

I am looking for a solution where on a select box if user selects
a item, the page refreshes with updated data.This is done using
onChange function. In the meanwhile if user clicks on submit and then reset button whatever changes made were reset because the subit is not happened after onChange.

One solution I thought is bringing up the modal window when
onChange function is called but it involves a lot of work for processing

So I am looking if there is any alternate to this

Answer 1

I’d go down the modal and/or overlay route, it’s a nicer user experience as the user can see that something is happening. Simplest solution is just stick a div somewhere on the page

<div id="overlay"></div>

and add some css:

#overlay {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    opacity: 0.7;
    z-index:10;
    position:fixed;
    display:none;
}

NB: opacity doesn’t work in IE 8 and older, but there are alternatives that a quick Google will uncover.

Then in your onChange (assuming your using jQuery) just put a $(‘#overlay’).show() or .fadeIn(), and either hide it when complete or if the page refreshes there no need to do anything.

If you don’t want anything visible take out the background-color and opacity and it will be invisible.

I would recommend sticking a loading gif in the middle of #overlay for the sake of clarity.

Hope that helps.