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.

Answer 1

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!
    });
});