Disabled button still submits form

Question

The save button gets disabled after you click it once, but if you click it again, it resubmits the form. I am guessing it never reaches the first part of the if statement. Any help would be appreciated:

-block extra_scripts

:javascript

  function check_button(){ 
    var saveButtons = $('a[name=saveButton]');
    if (saveButtons.is(':disabled')) { 
      alert("disabled");
      return false;
    }
    else{
      $("#main_form").submit();
      saveButtons.attr("disabled", true);
    }
  }

-block main

  .btn-group.pull-right
    %a.btn.icon-save.btn-callout{
      :name => "saveButton",
      :id => "saveButton",
      :type => "submit",
      :onclick => "check_button()"
      }
      Save

Just a note, saveButtons contains two buttons. One for the top of the page, and one for the bottom.

@Ved how would I do that if both the buttons have the same name/id/type? — mikros0ft, Jul 24 '13 at 13:31
@mikros0ft - The twp buttons should not have the same `id` attribute . . . that should be unique to the page. Even so, you can select the individual buttons based on what form they are in, as well . . . for example: `$("main_form").find("a[name='saveButton']")`. — talemyn, Jul 24 '13 at 13:56

score 0 · Answer 1 · answered Jul 24 '13 at 13:28

0

Try saveButtons.attr("disabled", "disabled");

answered Jul 24 '13 at 13:28

Eduard Dyckman

135
1
8

Nope, it still does the same thing. Disabled save button continues to resubmit the form. – mikros0ft Jul 24 '13 at 13:30
Oh, now I see. `var saveButtons = $('a[name="saveButton"]');` Should be this way – Eduard Dyckman Jul 24 '13 at 13:32
Ok, now we really need a fiddle – Eduard Dyckman Jul 24 '13 at 13:35

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

I guess only input elements can be :disabled (see here)

You can try if (saveButtons.attr("disabled")).

edited May 23 '17 at 11:58

Community

1
1

answered Jul 24 '13 at 13:48

Kkarsko

103
1
7

score 0 · Answer 3 · edited May 23 '17 at 11:58

I used this on mine: https://stackoverflow.com/a/22557155/5475948

Of course, I have some other script checking my elements in order to remove the disabled class.

<form method="post" id="valid">
    <input type="hidden" id="selected-product" name="selected-product" value="">
    <input type="hidden" id="step" name="step" value="1">
    <button type="submit" id="submitter" class="btn btn-green uppercase disabled">Valider</button>
</form>

<script>
//dom ready handler
jQuery(function ($) {
    //form submit handler
    $('#valid').submit(function (e) {
        //check atleat 1 checkbox is checked
        if ($('#submitter').hasClass('disabled')) {
            //prevent the default form submit if it is not checked
            e.preventDefault();
        }
    })
})
</script>

Disabled button still submits form

3 Answers3