Develop Reference

Queue list of SQL commands to run at a later time without PostBack

I have a fairly long modal form displaying information to the user. The user is able to add new records and delete records (from a gridview), and update information through normal form fields. While I'd like to show the changes on the form, I do not want to save the changes to the database until the Submit button is clicked. I thought I could Queue the SQL commands in a List and run them all once Submit is clicked
However, I'd like to do this without having to do a postback each time a gridview is updated as waiting for the server to respond can be quite annoying if adding/deleting a lot of items. Is this possible only using JavaScript/jQuery, only doing a postback once submit is clicked? The only way I could think of is to append the SQL to a hidden HTML tag and run its contents when submitting, but of course that is not very secure.
Alternatively, is there a way to do this through ASP itself and I am just completely over thinking this?
Thanks in advance!

How to handle browser back button using javascript?

In my application, First I need to select an option and press next button.
Then I click on browser provided back button. That option should be selected when I come back to that page.
How can we do this with javascript?

You need to use Jquery/JS Session object to store your data. In your scenario whenever you select the option just update your storage object localStorage.setItem("optionVal", "test");
so when you go next and comeback to using back button just check if the optionVal is not null and has some value if it has some value just bind it with the drop down DOM. To check/get data you need to use localStorage.getItem("lastname"); since you have not provided I can just tell you the approach. Here are some links that might help:
http://www.w3schools.com/html/html5_webstorage.asp

You can create a Wizard for this process like payment option in e-commence site
http://bootsnipp.com/snippets/featured/form-wizard-and-validation
http://formvalidation.io/examples/bootstrap-wizard/
if you send the whole scenario then may me help with complete code

Javascript: Making divs hold state of display='block' when user clicks BACK button in browser

I have a few divs on a form that are hidden by default (style="display:none;"). When the user clicks a certain radio button, an onclick event executes and exposes the divs. The user is then taken to a review page upon form submit that shows him any errors. If there are any, he clicks the BACK button on his browser to go back to the form and correct them. Caching is enabled so that all of his form contents are there. The problem is, since the form is looking for an onclick event, all of the previously exposed divs are hidden again. Is there any way to make sure they stay exposed when the user clicks back to the form from the review page? I thought a document.ready function would do it, but no joy.

As Yair mentioned, you can use cookies. It cannot be done with pure JS. However, you can also use PHP.
Before the user is transferred to the second page, have JS scan the divs in question, and find which ones are visible. (I'm assuming they all have individual IDs). Store these IDs in a comma-delimited string, or array, and send it as a _POST or _GET to the new page.
Have PHP store it as a hidden value somewhere. You could use a hidden input, or a data-x on something ... as long as it's there.
Have JS on that page that watches for the back click, stops it, and then redirects the user to the previous page, and sends the string or array back to it. Have PHP on that page print it as a JS value, and have JS on pageload show all divs with matching IDs.

Cookies or localStorage if you aim for only modern browsers:
localStorage

Is there any way to make sure they stay exposed when the user clicks
back to the form from the review page? I thought a document.ready
function would do it, but no joy.
You can use cookies in order to manage state in a web-browser. Cookies will help you save the desired user's state.

All javascript code is reinitialized on browser reload. You cannot identify whether the user comes back through the browser.
You can use cookies or local storage to save a value when initial display happens and show/hide the div later on document.ready.

Fill and add select options and sync with database

I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?

No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.

Ways to manage Cancel button

Assume I have a dialog with some checkboxes, radio buttons, text inputs etc that represent some options. I open this dialog by clicking some link on the page. I want to be able to save options as well as cancel by clicking Save and Cancel buttons inside the dialog.
Processing Save button looks straightforward - I just go through the controls and get current values. What I wonder about is how I should better control Cancel button. So, I change some options inside the dialog, then change my mind and click Cancel button. Obviously I need to return all controls to their state before changing.
How do I better do this? Should I save current state on dialog loading to some hidden fields or attributes? Please share your thoughts.

I would make a copy of the current state when opening the dialog, modify the copy in the dialog, and when the user presses a button, replace current state with the new state or simply delete the copy accordingly.

You could just use the built in reset to return the form values to default, then process a save, which would essentially return the state to the original values before changes were made.

You can save the currently saved state within data attributes. In HTML such attribute looks like data-something="some value", but you can simply access it from JavaScript. Eg. jQuery has shortcut for it, which looks like jQuery(element_selector).data('something'). You can also set it from JavaScript like jQuery(element_selector).data('something', 'some other value').
Using that mechanism you can initially set these values and with each save overwrite them. In case someone clicks "cancel", you will just restore your controls / form elements to the state matching the value you store as data associated with that element.
Just keep in mind such data is associated with DOM elements, so deleting them you will delete data, but it is very clean and flexible approach in such cases.
More:
on data- attributes: http://ejohn.org/blog/html-5-data-attributes/
jQuery's implementation: http://api.jquery.com/data/