0

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.

Improve this question

3 Answers 3

Reset to default
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(); });
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Used .parents('form') since I have some nested forms.
@user4584963: Ya, thanks for more information, hope you get a good day!
1

do you try this using the id of the form like 

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

or with the form element

$('form').on('submit' ...
Improve this answer

5 Comments

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.
i see, in this post they use the prop() method, to apply the disable. see if this help you.
I think my problem is that for links I need the click event and forms I need the submit event.
So do i, especially for the form, i think you should submit.
I appreciate you trying to help but I think you are confused.
1

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.

Improve this answer

1 Comment

Very helpful, thanks for the explanation. I ended up using the other solution though.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.