jquery to disable buttons on submit/click in forms and links

Question

In my rails app I have buttons that submit information to the server. Some buttons are part of a form and some are not. I'm looking for a way to apply my jquery, which disables the buttons after click, to both.

Here is my current jquery:

  $('.btn-disabler').on('click', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
  });

This code adds an icon disables the button and makes the text invisible. I've extended the disable function to work on anchor tags as explained here https://stackoverflow.com/a/16788240/4584963

An example link:

<a class="btn btn-success btn-disabler" rel="nofollow" data-method="post" href="/approve?id=10">
  <span class="btn-label">Approve</span>
</a>

An example form:

<form class="simple_form well" novalidate="novalidate" id="new_user" action="/" accept-charset="UTF-8" method="post">
      <div class="form-group">
        <input class="string optional form-control" placeholder="First name" type="text" name="user[first_name]" id="user_first_name">
      </div>
      <div class="form-group">
        <input class="string optional form-control" placeholder="Last name" type="text" name="user[last_name]" id="user_last_name">
      </div>
      <div class="form-group">
        <input class="string email optional form-control" placeholder="Email" type="email" name="user[email]" id="user_email">
      </div>
      <div class="form-group">
        <input class="password optional form-control" placeholder="Password" type="password" name="user[password]" id="user_password">
      </div>                
      <div class="form-groups">
        <input class="password optional form-control" placeholder="Retype password" type="password" name="user[password_confirmation]" id="user_password_confirmation">
      </div>
      <button name="button" type="submit" class="btn btn btn-primary btn-disabler">
        <span class="btn-label">Submit</span>
      </button>
</form>

My jquery above does not work for the form. In the form on click, the button changes but there is no submission. To get the jquery to work for the form I need to change it to this:

  $('.signup-form').on('submit', function() {
    $(this).find('.btn-disabler').append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
  });

How can I consolidate this to apply to both links and form submit buttons? Seems like my problem stems from links need the click event and the form needs the submit event.

score 1 · Answer 1 · answered Jun 11 '16 at 01:24

1

do you try this using the id of the form like

$('#new_user').on('submit' ...

or with the form element

$('form').on('submit' ...

answered Jun 11 '16 at 01:24

mfpinheiro

89
5

As you can see my second piece of jquery I am targeting the form and it works. I would prefer not to use two different chunks of code to do more or less the same thing. My problem isn't that it's not working, it's that I don't want to repeat myself. – user4584963 Jun 11 '16 at 01:27
i see, in this [post](http://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button?rq=1) they use the `prop()` method, to apply the disable. see if this help you. – mfpinheiro Jun 11 '16 at 01:31
I think my problem is that for links I need the click event and forms I need the submit event. – user4584963 Jun 11 '16 at 01:37
So do i, especially for the form, i think you should submit. – mfpinheiro Jun 11 '16 at 01:46
I appreciate you trying to help but I think you are confused. – user4584963 Jun 11 '16 at 01:47

score 1 · Answer 2 · answered Jun 11 '16 at 01:53

Think of the submit button as an extension of a form submit event. If you disable the form submit button, the form submit event is disabled. What you can do is add the class to the form, and then in your jQuery code you can assign specific rules. something like this..

So, using this HTML:

<form class="disabler">
  <button type="submit"><span>Label</span></button>
  </form>

<a href="#" class="disabler"><span>Label</span></a>

<button class="disabler"><span>Label</span></button>

Use this javascript:

$('.disabler').each(function(e){
 if(this.nodeName == "A"){
    // this is a hyperlink... 
    // apply css class
    $(this).on('click', function(){          
        //some action
        });

 } else if (this.nodeName == "BUTTON") {
    //this is a button outside of a form
    // disable and add css class
    $(this).on('click', function(){          
        //some action
        });

 } else if (this.nodeName == "FORM") {
    $(this).on('submit', function(){
    $(this).find('button[type="submit"]')
      .append("<i>Loading</i>")
      .disable();
       });
    }

 });

You can probably refactor this down more, but i think you should pay attention to nodeName when you're trying to apply different rules to each of these components.

I hope this answers your question.

Very helpful, thanks for the explanation. I ended up using the other solution though. — user4584963, Jun 12 '16 at 21:58

score 1 · Accepted Answer · answered Jun 11 '16 at 02:04

1

You can use jQuery is() to check parent of current button object is form or not in order to submit the form:

$('.btn-disabler').on('click', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
    if ($(this).parent().is("form")) $(this).parent().submit();
});

answered Jun 11 '16 at 02:04

Trung Le Nguyen Nhat

636
6
9

Used .parents('form') since I have some nested forms. – user4584963 Jun 12 '16 at 21:59
@user4584963: Ya, thanks for more information, hope you get a good day! – Trung Le Nguyen Nhat Jun 13 '16 at 03:20

jquery to disable buttons on submit/click in forms and links

3 Answers3