onclick disable submit button

Question

i wanna disable a submit button when onclick. im able to disable the button but i cant submit the post value to php.

Answer 1

<input type="submit" onclick="this.disabled = true" value="Save"/>

or ref this

Answer 2

I solved it with simple jQuery. The code removes the button on click, then appends the fake button or some like "loading.." text and finally sends the form.

HTML:

<div class="holder"><input type='submit' value='ACCEPT' class='button'></div>

jQuery:

$('.button').click(function() {
        $('.button').remove();
        $('.holder').append("//fake input button or whatever you want.");
        $('.form').submit();
    });

In diference with other methods like unload the button changes in the instant moment you click and sends the form. With heavy forms i think is a better practice.

Answer 3

If you disable an input, then its value naturally won't be included in the form data. You'll need to disable the button after you submit. If you bind a callback to onclick, then it runs before the form submits.

What you need is something like this:

jQuery:

$(document).ready(function() {
    $(document).unload(function() {
        $('#submit-btn').attr('disabled', 'disabled');
    });
});

Regular JS:

document.onunload = disableSubmit;
function disableSubmit() {
    /* disable the submit button here */
}

Basically, instead of binding to the submit button's onclick event, this binds the disabling code to the document's unload event (document.onunload), which gets fired once the form is submitted and you begin to leave the page.

Answer 4

Using jQuery, add onClick handler that returns false:

<input type="submit" value="Submit" onClick="$(this).click(function() {return false;});"/>

Answer 5

i found a alternative online. wat i did is to create a fake disable and hidden button. when the actual button is clicked, i will hide it and show the fake disable button.

actual button:

$onclick = "
var boolconfirm = confirm('$strconfirmattempt');
if(boolconfirm==true){
finishattempt.style.display='none';
finishattempt2.style.display='inline';
}
return boolconfirm;";

fake button:

echo "<input type=\"submit\" name=\"finishattempt\" value=\"submit\" onclick=\"$onclick\" />.
<input type=\"submit\" id=\"finishattempt2\" name=\"finishattempt2\" value=\"submit\" style=\"display:none;\" DISABLED/>\n";

Answer 6

You could use a hidden field which would hold the value of the button and pull that value out of your POST data:

<input type="hidden" id="hiddenField" value="default" />

<input type="button" id="myButton" onclick="buttonClick();">

function buttonClick()
{
    document.myForm.myButton.disabled = true;
    document.myForm.hiddenField.value = "myButtonClicked";
}

My PHP is a little rusty, but then you can access the hidden field like so:

if ($POST['hiddenField'] == "myButtonClicked")
{
    // Click handling code here
}

Answer 7

Why not create a disabled submit button that is hidden, and an active submit button, and onClick show the disabled and hide the active? I could do this in jQuery, but I'm kinda useless without it. Sad, eh?

Answer 8

Here's a method using onsubmit instead of onlick:

This goes at the top:

<script type='text/javascript'>
function disableButtons()
{
  $('input[type="submit"]').attr('disabled', true);
}
</script>

Then your PHP (note that isset post is NOT for the submit button, because we want to disable the submit button).

if (isset($_POST['dothis'])) 
{
//CODE TO EXECUTE
}

Then HTML.

<form method='post' action='' onsubmit='disableButtons()'>
<input type='hidden' name='dothis' value=''>
<input type='submit' value='Submit'></form>

Onsubmit goes in . Make sure your isset (the PHP part) is for an input that goes with your submit, but is not the submit button itself. You can see that it is the hidden value being checked for with the PHP, rather than the submit button, and the submit button is what gets disabled. By doing this, you can disable a submit button without disabling the PHP.