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