How to disable only the button that was clicked , which is under a specific class

Question

I have a form that contains 10 input buttons with .btn-primary class , and i wrte the following script to disable the button when clicking on it :-

$('form').submit(function() {

    $('input.btn-primary').prop("disabled", "disabled");

})

but the problem i am facing is that when the user click on an input button, all the other 9 input buttons will be displayed. so is there a way to modify my current script so that only the input button that have been clicked get disabled. my current approach will disable all the buttons that are under the .btn-primary class ? Thanks

here is how the form looks like:-

<input type="submit" value="Add To TMS" class="btn btn-primary"/>
    <img src="/Content/Ajax-loader-bar.gif" class="loadingimage" id="16202imag"/>
</form>
        </td>





    </tr>
    <tr>
         <td>
            VMware Virtual Platform
        </td>
        <td>
            none
        </td>
        <td>
            see20
        </td>
        <td>

             a
        </td>
        <td>
            test site
        </td>
        <td>
            VMware Virtual Platform
        </td>
        <td>
            In Store
        </td>
         <td id = "18605">



<form action="/VirtualMachine/CreateOnTMS" data-ajax="true" data-ajax-loading="#18605imag" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#18605" id="form1" method="post"><input name="__RequestVerificationToken" type="hidden" value="eiSEILmh7BnQESGGGWhE534pbYX_ZYBQjrrETGZc-nTyNzS8fymRWifu7M8Q8qDHMZKmLXuKh64rP3lzigfPgwE4CckHO8bRA7FiPxVjh_jNSxF9rngl8HvOXEbzT7910" />   <span class="f"> Role</span>
<select class="SmallDropDown" data-val="true" data-val-number="The field Role must be a number." data-val-required="The Role field is required." id="VirtualMachine_RoleID" name="VirtualMachine.RoleID"><option value="">Choose...</option>
<option value="1">SQL Server</option>
<option value="2">Virtual Center</option>
<option value="3">ESX</option>
<option value="4">Web Server</option>
</select><span class="field-validation-valid" data-valmsg-for="VirtualMachine.RoleID" data-valmsg-replace="true"></span>   <span class="f">Server</span>
<select class="SmallDropDown" data-val="true" data-val-number="The field Hypervisor Server Tag must be a number." data-val-required="The Hypervisor Server Tag field is required." id="VirtualMachine_ServerID" name="VirtualMachine.ServerID"><option value="">Choose...</option>
<option value="552">S122222244</option>
<option value="557">S122222246</option>
<option value="565">S122222247</option>
<option value="568">S122222248</option>
<option value="579">S122222250</option>
</select><span class="field-validation-valid" data-valmsg-for="VirtualMachine.ServerID" data-valmsg-replace="true"></span><input id="ResourceID" name="ResourceID" type="hidden" value="18605" /> <input type="submit" value="Add To TMS" class="btn btn-primary"/>
    <img src="/Content/Ajax-loader-bar.gif" class="loadingimage" id="18605imag"/>
</form>
        </td>





    </tr>
    <tr>
         <td>
            VMware Virtual Platform
        </td>
        <td>
            none
        </td>
        <td>
            see33
        </td>
        <td>

             bb
        </td>
        <td>
            testsitefrom it360
        </td>
        <td>
            VMware Virtual Platform
        </td>
        <td>
            In Store
        </td>
         <td id = "18610">



<form action="/VirtualMachine/CreateOnTMS" data-ajax="true" data-ajax-loading="#18610imag" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#18610" id="form2" method="post"><input name="__RequestVerificationToken" type="hidden" value="RyF2VRjwRlbWgRfqL377UJLaT8R1SANDhjeqwGy59_CX8HWmkzED91qIwip_rY4wdzKEelGlHTbe2mCa4bV0sT6juOn2yAm39Plto7JAygBPOrPS8ThECfFVYjhkuN9m0" />   <span class="f"> Role</span>
<select class="SmallDropDown" data-val="true" data-val-number="The field Role must be a number." data-val-required="The Role field is required." id="VirtualMachine_RoleID" name="VirtualMachine.RoleID"><option value="">Choose...</option>
<option value="1">SQL Server</option>
<option value="2">Virtual Center</option>
<option value="3">ESX</option>
<option value="4">Web Server</option>
</select><span class="field-validation-valid" data-valmsg-for="VirtualMachine.RoleID" data-valmsg-replace="true"></span>   <span class="f">Server</span>
<select class="SmallDropDown" data-val="true" data-val-number="The field Hypervisor Server Tag must be a number." data-val-required="The Hypervisor Server Tag field is required." id="VirtualMachine_ServerID" name="VirtualMachine.ServerID"><option value="">Choose...</option>
<option value="552">S122222244</option>
<option value="557">S122222246</option>
<option value="565">S122222247</option>
<option value="568">S122222248</option>
<option value="579">S122222250</option>
</select><span class="field-validation-valid" data-valmsg-for="VirtualMachine.ServerID" data-valmsg-replace="true"></span><input id="ResourceID" name="ResourceID" type="hidden" value="18610" /> <input type="submit" value="Add To TMS" class="btn btn-primary"/>
    <img src="/Content/Ajax-loader-bar.gif" class="loadingimage" id="18610imag"/>
</form>

The posted code surely gives one the impression that a form is submitted and the page reload, so any solution would pretty much fail as the page reloads. — adeneo, Nov 23 '13 at 21:30
No currently all the buttons with the btn-primary class will be disabled when clicking on one of them. while what i am trying to achieve is to only disable the button that the user clicked on it. — John John, Nov 23 '13 at 21:35

score 2 · Answer 1 · answered Nov 23 '13 at 21:36

2

This will cause it to be disabled when clicked (until the page reloads, anyway...)

$('button').on('click', function(e) {
    $(this).prop('disabled', true);
});

answered Nov 23 '13 at 21:36

philwills

985
4
8

but is there a way to achieve my requirement using the $('form').submit(function() instead of $('button').on('click', function(e) ??? thanks... – John John Nov 23 '13 at 21:38
That, I'm not sure of. You're not going to have a reference to the actual button that was clicked in that case... At least not that I'm aware of. There may be one buried in the event object though. – philwills Nov 23 '13 at 21:48
@johnG - The form submit event is triggered when a form is submitted, and when a form is submitted the page generally reload, unless you somehow prevent the form from submitting, so what you're asking is a bit strange ? – adeneo Nov 23 '13 at 21:52
Maybe he using AJAX to process the form and for some time the form is visible (when processing) and he tries to prevent multiple clicks on submit button ;) – Milan and Friends Nov 23 '13 at 21:56

Milan and Friends · Accepted Answer · 2013-11-23T21:57:34.117

Here's a FIDDLE works on form submit.

<form>
  <button id="id1" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id2" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id3" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id4" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id5" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id6" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id7" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id8" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id9" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id10" type="submit" name="submit" class="btn-primary">Submit</button>
</form>


$('form').submit(function() {
  $(this).find('.btn-primary').prop("disabled", "disabled");
});

P.S. You have duplicate ID's on ResourceID !

Goog solutions but if you have two submits in one form, this two submits will be disabled. Here is the same solution with multiple submits in one form : http://jsfiddle.net/6RrV5/1/ This help me : http://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-form-submission — Portekoi, Nov 24 '13 at 09:01

score 0 · Answer 3 · answered Nov 23 '13 at 21:35

0

Try this :

$('form').submit(function() {

     $(this).prop("disabled", "disabled");

})

answered Nov 23 '13 at 21:35

Portekoi

1,087
2
22
44

2

That would set the (I think meaningless) `disabled` property on the form itself, not the button that was clicked to submit the form. – Anthony Grist Nov 23 '13 at 21:38
1

You right. The reply on same issu : http://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-form-submission – Portekoi Nov 23 '13 at 21:53

How to disable only the button that was clicked , which is under a specific class

3 Answers3