how to disable multiple form buttons on form submit and still have correct action performed

Question

I have a form with multiple submit buttons. I simply want to disable them once either is pressed, and everything works fine until I 'disable' them in the .submit() JQuery handler, in which case the form no longer appears to send the button name/value information along with the form. How can I disable the buttons but still have the button name/value submitted so I can determine which one was pressed?

The Form

<form action="myaction" method="post" name="sendgift" id="sendgift" > 
    ....input, etc ....       
    <input type="submit" name="_action_go" value="Looks great! Do it" id="sendgiftbtn" />
    <input type="submit" name="_action_index" value="I need to make changes" id="gobackbtn" />
</form>

The JS:

<script type="text/javascript">
    $("#sendgift").submit(function() {

       //if I remove these two lines, everything works
       $("#sendgiftbtn").attr('disabled', 'disabled');
       $("#gobackbtn").attr('disabled', 'disabled');

        console.log("disable buttons called");
        return true;
    });


</script>

Ben D · Accepted Answer · 2012-01-27 18:59:50Z

2

The disabled attribute removes the element from form submission by design: http://www.w3schools.com/tags/att_input_disabled.asp

3 approaches:

If you want to make it "appear" that the form element is disabled you can have js store the value of the field in a hidden variable <input type='hidden' value='[the value of the disabled field]' name='[name of disabled field]' /> and then disable the visible input.
You can also try styling the field as disabled and add an onfocus event that blur()s the field any time a user tries to modify it again.
You can add an onsubmit event to the form that un-disables any inputs with the disabled attribute set, so that they are submitted as normal.

answered Jan 27, 2012 at 18:59

Ben D

14.6k3 gold badges47 silver badges59 bronze badges

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

1 Comment

Graham Conzett Over a year ago

+1, important to make note that this behavior is by design in HTML, not jQuery specific.

ShankarSangoli · Accepted Answer · 2012-01-28 03:00:34Z

1

In that case instead of disabling the buttons add a disabled class and check for this class whenever you submit the form. If the class is present just return false else true and before returning true add the disabledclass to all the buttons of type submit.

 $("#sendgift").submit(function(e) {

        if(!$(e.target).hasClass('disabled')){
            //if I remove these two lines, everything works
            //$("#sendgiftbtn").attr('disabled', 'disabled');
            //$("#gobackbtn").attr('disabled', 'disabled');

            //console.log("disable buttons called");

            $(this).find('input[type=submit]').addClass('disabled');

            return true;
        }
        return false;
    });

Defined the disabled button style as

.disabled{
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
}

edited Jan 28, 2012 at 3:00

answered Jan 27, 2012 at 18:57

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

4 Comments

Peter Over a year ago

This doesn't change the appearance of the buttons however.

ShankarSangoli Over a year ago

You can make the button look disabled by setting styles in disabled class. I have add the required styles to my answer hope that helps.

Peter Over a year ago

Ahhh, that makes more sense. Thanks.

Peter Over a year ago

Ended up going with this solution. Thnx.

Collectives™ on Stack Overflow

how to disable multiple form buttons on form submit and still have correct action performed

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related