Submit button not firing after click disabled using javascript

Question

I am trying to disable a button after it has been clicked so that it cannot be double clicked.

This is what I have:

<input id="btn" type="button" disabled="disabled" value="Log On" onclick="logonDisableSubmitButtons()"/>

And my javascript:

function logonDisableSubmitButtons(clickedButton) {

    $("input[type='button']").each(function() {
      if (this.name != clickedButton)
        $(this).attr("disabled", "disabled");
      else {
        //hiding the actually clicked button
        $(this).hide();
        //Creating dummy button to same like clicked button
        $(this).after('<input type="button" disabled="disabled" value="' + $(this).val() + '" class="' + $(this).attr('class') + '" />');
      }
    });

  }

The button disables but it doesn't submit the form.

How do I get it to disable after click and then submit the form?

Douglas · Accepted Answer · 2012-11-27 21:02:01Z

1

Use a submit input instead of a button input:

<input id="btn" type="submit" disabled="disabled" value="Log On" onclick="logonDisableSubmitButtons()"/>

answered Nov 27, 2012 at 21:02

Douglas

37.8k9 gold badges80 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ErocM Over a year ago

Easy enough! Worked perfectly!

RonaldBarzell · Accepted Answer · 2012-11-27 21:01:01Z

0

Manually submit the form with the submit() method in the same block where you are disabling the button.

answered Nov 27, 2012 at 21:01

RonaldBarzell

3,8501 gold badge18 silver badges23 bronze badges

Comments

J.Wells · Accepted Answer · 2012-11-27 21:22:14Z

You would have a much easier time managing this by removing the onclick attribute from your input and simply binding the click event on $(document).ready();, like this:

    <form id="myForm">
        <input type="submit" id="myInput" value="click me"/> <br />
        <input type="button" class="someClass" value="random button 1" />
        <input type="button" class="someClass" value="random button 2" />
        <input type="button" class="someClass" value="random button 3" />
        <input type="button" class="someClass" value="random button 4" />
    </form>

<script type="text/javascript">
$(document).ready(function(){
    $('#myInput').click(function(e){  
        e.preventDefault(); //<--this prevents the form from being submitted on click.        
        logonDisableSubmitButtons(this);
    });
});
function logonDisableSubmitButtons(clickedButton) {
    $(clickedButton).attr("disabled", "disabled");
    $("input[type='button']").each(function(i, input) {
            $(input).hide();
            $(this).after(
                '<input type="button" disabled="disabled" value="' + 
                $(this).val() + " from logonDisableSubmitButtons() method" +
                '" class="' +
                $(this).attr('class') + '" />'
            );
    });
    $("#myForm").submit(); //<--this will submit the form
}
    </script>

Here's a working example on jsFiddle.

Collectives™ on Stack Overflow

Submit button not firing after click disabled using javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related