Javascript Form Submission issue

Question

I need to get a form to submit but when it submits I need it to disable the button because the query takes a few seconds to run and the people using this form don't understand loading pages and so they will click 5 or 6 times on the button submitting the form way to many times. I had a working method in Chrome but in IE it submits twice and I know why but I don't know how to get it to work for both. Here is the form line:

 <form method="post" id="submitItem" action="secondPage.php">

I have tried various versions of this such as using onSubmit or other related ideas but none work. The "Working" solution in chrome that submits twice in IE is that form call and the following JS:

$( document ).on( "click", ".once-only", function(){
 $(".once-only").prop('disabled', true);
 $('form').submit();
});

The class "once-only" is attached to the submit button so upon clicking submit that button gets disabled in both browsers but because I have "action='....'" in the form instantiation line it submits using that and the ".submit()". Chrome does not submit using the action but only the ".submit()". Is there a way to get this working? I have tried a large combination of changing the JS to use a function or taking out the ".submit()" or even changing what is in the form line but I haven't figured one out. Any ideas? IE has been giving me problems with this site anytime I use JS, the AJAX only works in chrome for all my other pages so I REALLY hate using IE but more than half the people using the site don't even know what chrome is. Any tips? I can share any other code if needed!

Answer 1

Try this:

$( document ).on( "click", ".once-only", function(event) {
 event.preventDefault(); //this should disable the default form submit action
 $(".once-only").prop('disabled', true);
 $('form').submit();
});

Answer 2

but in IE it submits twice

For that you can first off or unbind the click followed by on

// If the button is not dynamically generated , there is no need to delegate the event
$('.once-only).off('click').on( "click",function(event){
 // Rest of the code
})

For second issue

you can either use button type = "button" then use ajax instead of form action

Alternately you can use button type="submit"

$('.once-only').off('click').on( "click",function(event) {
 event.preventDefault(); //prevent default behavior 
 $(".once-only").prop('disabled', true);
 $.ajax({
 url:'some url'
 //Rest of code
 })
});

Note ajax also works in IE

Answer 3

edit

or like this: onclick="this.form.submit();this.enabled=false;"

---

so the real answer is this

onclick="setTimeout((function(){ this.disabled = true; }).bind(this),0);"

explanation: this instructs the browser to disable the button later; since JS works in event loop, you enqueue a time-out event that'll do it outside that onclick event.

i think it is just stupid of chrome to make me do this trick.