4

One for the puzzle solvers.

I want to disable the submit button to prevent double submissions.

To do this, I use jQuery:

jQuery('#subnewtopicform').on('submit', function () {
    jQuery('#subnewtopic').prop('disabled', true);
});

And stripped down HTML:

<form action="file.php" method="post" id="subnewtopicform">
    <input type="text" name="title" />
    <input type="submit" value="Submit" name="subnewtopic" id="subnewtopic" /> 
</form>

When clicking submit button, it gets disabled and the page reloads but the form is not properly submitted, why?! Removing the jQuery code will make it submit properly.

In my 10 years of coding, I am yet to come across something this strange.

8
  • Is a request ever executed to the server with the content of the form? Jan 7, 2015 at 20:27
  • @NathanTaylor I am suspecting that the content is never sent, which makes no sense. Jan 7, 2015 at 20:28
  • @HenrikPetterson Are you suspecting or do you know for sure? That is key.
    – FastTrack
    Jan 7, 2015 at 20:30
  • @FastTrack No actual data is sent as far as I know. Any good way to check? Jan 7, 2015 at 20:31
  • 2
    What do you mean by "not properly submitted"?
    – Dhanushka
    Jan 7, 2015 at 20:48

2 Answers 2

3

Try this code out. I don't get an error.

<form action="file.php" method="post" id="subnewtopicform">
    <input type="text" name="title" />
    <input type="submit" value="Submit" name="subnewtopic" id="subnewtopic" /> 
</form>

<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#subnewtopicform').on('submit', function(e) {
        $('#subnewtopic').prop('disabled', true);
        // e.preventDefault();
    });
</script>

Things to keep in mind:

  • The POST action will be too quick for you to see the disabled button. Uncomment e.preventDefault() below $("#subnewtopic.prop('disabled', true); to test that it works.
  • jQuery must be enabled before trying to use this function.
  • Use the Developer Tools of either Firefox or Chrome to inspect the Javascript Console for any errors, and the Network Tab to see if any request was posted.

Other than that, this should be pretty straightforward. Like I said, I get no error, it's odd that you are, and probably something very simple. Let me know if this helps!

9
  • Could you please confirm, did you perform any changes to my initial code? I checked the network tab and requests were posted. Jan 7, 2015 at 20:46
  • Very slight, added (e) to the function and made sure jQuery was attached, and changed all instances of jquery to $ as is convention. What happens if you uncomment e.preventDefault(); Does the post still happen? What happens to the button? Also, the reason so few changes were made is I couldn't replicate the error with your initial code. It worked for me just fine.
    – Tim Lewis
    Jan 7, 2015 at 20:47
  • @tim lewis jQuery is convention over $ as $ is reserved by many technologies. $ is the shorthand version of jQuery.
    – Buck3y3
    Jan 7, 2015 at 21:01
  • @Buck3y3 Maybe, but 99% of jQuery questions are $("#something") and not jquery("#something"), which is what I was getting at.
    – Tim Lewis
    Jan 7, 2015 at 21:13
  • @tim lewis yes but his way was better than what you changed it to. And then you tried to tell him that your way is convention when they both are. Lets just try and put out the correct info.
    – Buck3y3
    Jan 7, 2015 at 21:20
-4

make sure to return true in the jquery function or the server submit will not happen (thats for the case of error checking)

UPDATE:

jQuery('#subnewtopicform').on('submit', function () {
    jQuery('#subnewtopic').prop('disabled', true);
    return true; 
});

see:
Form Submit Execute Javascript Best Practice?

not sure why he has return false in that answer, I thought it was true. Try both.

6
  • This is better as a comment, doesn't completely answer the question.
    – Tim Lewis
    Jan 7, 2015 at 20:35
  • didn't think that it was complicated enough of an answer to need to write out the code. This is also a question asked and answered all the time in many places.
    – Buck3y3
    Jan 7, 2015 at 20:40
  • PPS.If this is not the cause then the cause is surely in your backend and we will need much more info.
    – Buck3y3
    Jan 7, 2015 at 20:42
  • I'd love to hear why the down vote? There is nothing "wrong" about my code not answer. It may not be the absolute cause but in no way is it wrong. I actually tested this in a small web forms app and it works fine.
    – Buck3y3
    Jan 7, 2015 at 20:59
  • 1
    This answer is completely false. The onsubmit event does not block form submission by default. return true at the end does nothing.
    – JJJ
    Jan 9, 2015 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.