Disabled Button keeps re-enabling on form submission from another button

Question

I have three submit buttons inside FORM tags. They all have be of type="submit" because each manipulates the MySQL database in one way or another.

Load button
Dump button
Post button

When the Post button is clicked, I'm disabling the Load button:

<input type="submit" id="postpayment" name="postpayment" class="btn btn-primary" value="Post" onclick="document.getElementById('load').disabled='disable';">

But just as soon as it disables, it re-enables. How can I make it stay disabled? I've tried JavaScript and JQuery, but nothing works. If I change the Load button's type to type= "button", the it stays disabled. But because it's of type="submit", then it keeps reverting back to being enabled. This is driving me nuts! Can someone offer a solution to this? Thanks.

UPDATE: Per Deavid's suggestion, I've done this:

<script>
    $(function () {
        $(#postpayment).click(function (event) {
            (#load).attr('disabled', true);
            event.preventDefault();
        }) 
    });
</script>

When the Post button gets clicked, the Load button is suppose to be disabled and the default action prevented. But this isn't working. I know this JQuery function is wrong, but I don't know how to fix it.

For better understanding, Please provide a **working demo** (*code snippet,jsfiddle ...*) — Kishore Sahasranaman, Nov 28 '15 at 02:51
you need event.preventDefault() to prevent the page reloading. On reload all variables are new. — David, Nov 28 '15 at 03:02
Yes, the Post button posts back. It has to. Otherwise I wldn't be able to INSERT the data back to the db table. — fmc, Nov 28 '15 at 03:02
David: How do I do that? Can it be used in the onclick as shown above? Sorry, but I have never really used JQuery and JavaScript. Thank you. — fmc, Nov 28 '15 at 03:04

trex005 · Answer 1 · 2015-11-28T05:40:56.353

0

The simple solution is to add a return false; to your onclick

<input type="submit" id="postpayment" name="postpayment" class="btn btn-primary" value="Post" onclick="document.getElementById('load').disabled='disable';return false;">

However if you want to attach the click handler with jQuery like you did in your question, you can do it like so :

$(function () {
    $('#postpayment').click(function (event) {
        event.preventDefault();
        $('#load').prop('disabled', true);
        // Your ajax here!
    });
});

edited Nov 28 '15 at 05:40

answered Nov 28 '15 at 04:13

trex005

5,015
4
28
41

That indeed kept the Load button disabled. But it also killed the Post click that's used to update the database. I think what I'm wanting to do is impossible. I can't disable the Load button if I want the Post click to update the db, and if I get the Post click to update the db then the Load button won't stay disabled. That as simple a concept as this can't be accomplished amazes me to no end. – fmc Nov 28 '15 at 04:28
I think I understand what you are saying. You still need the form to submit. Your solutions are to either have the load button disabled when the page reloads, or send the post via ajax (preferred) – trex005 Nov 28 '15 at 04:31
I don't want you to write my code for me, but how is that accomplished using ajax? I'm abt to Google that right now =) – fmc Nov 28 '15 at 04:33
Please see [This comment](http://stackoverflow.com/a/425142/482197) for how to post a form via ajax. However you are also going to want to modify your server side code to only send you the needed response instead of the full HTML of the page. – trex005 Nov 28 '15 at 04:34
1

I'll look into this, trex005. Thank you for the heads up. – fmc Nov 28 '15 at 04:42

Disabled Button keeps re-enabling on form submission from another button

1 Answers1