I am working on a ECommerce Project. During the checkout process there is the button to purchase the item at the end of the checkout process. Clicking on that button submits the form on the page using a POST request (Standard, no AJAX). However, if you click on that submit button multiple times really quick, multiple POST Requests are sent to the server and so there are also multiple Orders being created.
My Question: Is it save to prevent these multiple button clicks by javascript, or is the page in a weird state at some point because the new page load kicks in?
Is there a difference about that if I do it with inline script:
onsubmit="if(submitted) return false; submitted = true; return true"
Or in my JS external file?
Another option would be to disable the submit button right after the form submit, but IE adds really Ugly Font Color to the button, which cannot be removed by CSS.
The page continues to process events and run javascript until the form Post returns new content which then replaces the current document, thus loading a new document. It is not in a weird state and works normally until the new content arrives and the current document is closed.
There are various techniques for preventing multiple presses of the button. Your code can keep track of the fact that a post has already been sent (in a global variable) and block any more being sent whenever that variable is set. In the UI, you can disable the button as soon as the first post is initiated so the button can't be pressed again.
Related
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.
I have 1 form that I've separated into multiple divs, each with their own Next button.
Upon clicking "Next" some javascript fires (see below) that hides the current div and unhides the next div (i.e. next step in the form). The URL is also updated with an # and the name of the step (e.g. example.com/booking turns into example.com/booking#contact-info)
$('#booking-details-complete').click(function(event) {
$("#booking-details").css("display", "none");
$("#contact-info").css("display", "block");
});
The Next button code that fires this JS is:
<%= link_to "Next", '#contact-info', :id => "booking-details-complete"%>
The final piece of the form has a Submit button instead of a Next button, which sends one big POST request to the various models.
My problem is back button behavior: going back doesn't update the page. The URL changes correctly, but the parts of the form (i.e. the divs) don't update their show/hide state.
I'm so close to finishing this project, but just can't figure out this last piece. Any help much appreciated.
So you mean hitting "back" on your browser updates your hash in the URL properly, but your page remains static with the desired behavior being that the section you are on collapses and the previous one re-opens?
You need a hash listener, there isn't a particularly standard way of getting one I don't believe. Push and Pop history just manipulate the history stack, it won't give you what you want.
Once you have a hash listener you have to write a JS function that can set your page state based on the hash of the URL.
I've never implemented a hash listener so here's something I found that might help http://benalman.com/projects/jquery-hashchange-plugin/
This is a plain javascript question.
I have a page C in which sits a textarea T.
T's content gets added to by clicks on various buttons on C (essentially T accumulates the list of times at which the buttons were clicked).
There is also a button to submit the contents of T by a post request to a server (T being surrounded by a form element).
When the user forgets to click the submit button and closes the page's window, I want the posting of T's contents to happen anyway, just as if the user had clicked the submit button before closing the window.
I know I can intercept the page closing and prompt the user to do the submit, but that is NOT what I want.
It seems to be impossible to submit the form containing T from inside a function that is called by onbeforeunload.
Thanks for any tip.
This is simply not possible : this is a security measure designed to ensure a site can't prevent a user instantly leaving a page if he wants to.
The best you can do is posting your form using ajax each time a field is changed.
I've used this code in part of my application - it doesn't capture any text though but you could give it a try.
window.onbeforeunload = confirmExit;
function confirmExit(){
data = $("#data").val();
$.ajax({
url: 'complete.php?data=' + data
});
}
How can I (if at all) load a new page when an html's selector changes if javascript is disabled in the browser.
Can it be done?
I guess you mean the html select box having some page titles displayed and as soon as the user selects one of them the new page showes up.
This is not possible with out javascript - the only thing you could do is to add a submit button.
<noscript><input type="submit" value="go!"></noscript>
This button would only be displayed if javascript is not activated.
No, you cannot reload a page when a select box changes (if that's your question) without using a scripting language or similar.
Without a scripting language (that would be JavaScript if you want to be cross-browser), most form elements are "dumb", they hold their state and display user feedback.
So if you want to select a new page after selecting it in a form (combo box, list, radio buttons...), you have to add a submit button to send the choice to a server, and have a server side script handling the choice and serving the right page.
The good old Web 1.0 way... :-)
You can't. With HTML only, changing the selected option makes the value of that option to be sent to the server upon submit (either via the Enter key or a submit/button element). You can eventually set up the receiving script to send back a HTTP Redirect based according to the selected option.
You shouldn't. This kind of navigation widget implies the use of a mouse: somebody using the keyboard to navigate the page cannot even select the second option at all (as soon as the down arrow is pressed once the onchange() event activates). Do the right thing and add a submit button, with the page change activated by the onsubmit() event.
I am developing my website using jQuery. For the Private Messaging feature, what I had right now is showing a ModalBox (dialog box). So, whenever user wanna check message, they will be displayed with a dialog box with the inbox shown. Now, inside that ModalBox, I have a "Compose" section where users can send message. My question is, when user submits the form, how we could retrieve those inputs without having to actually submit it? Because, I have tried it..., that when I do the submit(), it closed the ModalBox.
Any help would be appreciated.
Since you're using jQuery, see here
In case you're not familiar with AJAX, basically it allows you to send a request to the server (in this case, your submitted data), process the data on the server, and then receive any return back from your request, all without reloading the entire page.
This should alleviate the issue of the modal box closing (the page reloading upon submit, really.)
[edit]
See this article from here at StackOverflow on using the live event handler. This should take care of the issue of not getting the value from newly created DOM elements.
[/edit]