CODEWITHSUNDEEP
javascriptjqueryruby-on-railsforms
user4584963
user4584963

Reputation: 2523

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

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.

Upvotes: 0

Views: 452

Answers (3)

Trung Le Nguyen Nhat
Trung Le Nguyen Nhat

Reputation: 646

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();
});

Upvotes: 1

John Proestakes
John Proestakes

Reputation: 313

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.

Upvotes: 1

mfpinheiro
mfpinheiro

Reputation: 89

do you try this using the id of the form like 

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

or with the form element

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

Upvotes: 1

Related Questions