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

in rails app have buttons submit information server. buttons part of form , not. i'm looking way apply jquery, disables buttons after click, both.

here 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 icon disables button , makes text invisible. i've extended disable function work on anchor tags 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 form. in form on click, button changes there no submission. jquery work form need change 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 consolidate apply both links , form submit buttons? seems problem stems links need click event , form needs submit event.

you can use jquery is() check parent of current button object form or not in order submit 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(); });