jQuery - Change html of a submit button on submit event

Question

What I want to do is pretty simple. I've a form, with a submit button

<form accept-charset="UTF-8" action="/some_url" id="some-form" method="post">
  ...
  <button class="btn" id="remove-selected" type="submit">Send</button>`
</form>

I want to change the html of the button with jQuery when the form is submitted but can't achieve that, seems like the form submission occurs before I can change it.

My code right now, dead simple:

$("#some-form").on("submit", function(e) {
  $("#remove-selected").html("Sending...");
});

Thanks for advises!

Actually it works in Chrome and Firefox but not Safari... Seems to be a Safari bug, shoulda try that before, my bad.. — Alrick Deillon
– Alrick Deillon, Commented Mar 26, 2013 at 16:00

dersvenhesse · Accepted Answer · 2013-03-26 16:35:04Z

2

Your stuff seems working for me, just submit the form via JS to have more control about the sequence and error cases.

$("#some-form").on("click", function(e) {
  e.preventDefault();
  $("#remove-selected").html("Sending...");
  $(this).submit();
});

http://jsfiddle.net/GDAhe/1/

edited Mar 26, 2013 at 16:35

answered Mar 26, 2013 at 14:37

dersvenhesse

6,4742 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alrick Deillon Over a year ago

Thanks for your suggestion, when I do that, text is changing but form isn't submitted, can't figure out why..

dersvenhesse Over a year ago

In your example is no specific submit handling set. Do you have it in your form like <form method="get" action="./whatever">? If not you need to do this in JS via Ajax or whatever.

dersvenhesse Over a year ago

I just updated my post and fiddle, using click instead of submit handler. It seems working that way, the action url is called.

Alrick Deillon Over a year ago

Thanks Sven but that way, the form is submitted when we click on any element, not only the button, that's not what I need. Anyway my problem seems to be a Safari problem, because the simpler solutions are working on other browsers.

dersvenhesse Over a year ago

You can change the way the form is submitted by changing the selector for the onlick event.

Tim · Accepted Answer · 2013-03-26 14:41:47Z

1

$("#remove-selected").click(function(){
    $(this).html("Sending...");
});

edited Mar 26, 2013 at 14:41

answered Mar 26, 2013 at 14:35

Tim

6998 silver badges27 bronze badges

3 Comments

Alrick Deillon Over a year ago

Thanks for your suggestion. In fact I've tested that first, my problem is that it seems the form is submitted before the jQuery is executed. My request take some time and I want the button to change while the html request is executed.

Alrick Deillon Over a year ago

Works in Chrome and Firefox but not with Safari. Any idea?

Tim Over a year ago

Alrick, since Apple has stopped to release it for Windows, I can't test it but you can do it yourself by going step by step. First, find the problem, is it click event or html method ? Use console.log for example. Then, try an alternative when you find the problem.

Sébastien Saunier · Accepted Answer · 2013-03-26 14:40:37Z

0

You code is correct, you may have forgotten to embed it inside a $(document).ready() method.

answered Mar 26, 2013 at 14:40

Sébastien Saunier

1,8972 gold badges20 silver badges30 bronze badges

1 Comment

Alrick Deillon Over a year ago

Thanks Sébastien but I've embed my code inside a $(document).ready()

Collectives™ on Stack Overflow

jQuery - Change html of a submit button on submit event

3 Answers 3

5 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related