AndyPet74 AndyPet74 - 4 months ago 8
Javascript Question

Javascript Form Submission issue

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

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();
});
Comments