Change form submit button text after submition

Question

How do i change my submit button text after submit?? i have a form with a button . i would like to change the button text from click to Next after submit the form.

         <form>
            <div class="form-group">
               <div class="rightbox"> <label for='phone'>phone</label></div>
               <div class="leftbox">
                <div class="col-sm-12">
                    <input class="text-box single-line" data-val="true" name="phone" type="tel" value="" />
                                        </div></div>
                </div>
                                <div class="form-group">
               <div class="rightbox"> <label for='phone'>mobile</label></div>
               <div class="leftbox">
                <div class="col-sm-12">
                    <input class="text-box single-line" data-val="true" name="phone" type="tel" value="" required />
                </div></div>
                </div>



                                <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                <div class="btnok">
                <br/>
                    <button type="submit" class="btn-primary" >
                      click
                    </button>

                    </div>
                </div>
            </div>
     </form>

Tried anything yet? You will want to use javascript/jquery... — Andrew, Aug 03 '15 at 05:53
I think you can use a similar method: http://stackoverflow.com/questions/26937424/change-button-color-onclick — HAYMbl4, Aug 03 '15 at 05:54
@HAYMbl4 yes but i would like some change after submit form not onclick — , Aug 03 '15 at 05:58
i've tried but i doesnt work on after submition .it is only work when clicked @andrew — , Aug 03 '15 at 06:12
Are you using Bootstrap? Because it has [stateful buttons](http://getbootstrap.com/javascript/#buttons-stateful) — azeós, Aug 03 '15 at 06:18
you are not handling it via ajax? once you press submit button the page will reload, right? what server side are you using? or can you also post your javascript code? — VMcreator, Aug 03 '15 at 07:13

score 2 · Answer 1 · answered Aug 03 '15 at 06:31

$("#save").on('click',function(){
  var $btnElm = $(this);
  $("form").submit(function() {
      return $btnElm.text('Next');
   });  
})

   <button type="submit" class="btn-primary" id="save" >

i think this is how you can change.

else you want to more specific with the only after form is submitted then you can go with the ajax method to submit the form and change the text the of button to next after only submitting the form

$("#save").on('click',function(){
    var $btnElm = $(this);
    $("form").submit(function() {
      $.ajax({
         url: $(this).attr('action'),
         method: "POST",
         data : $(this).serialize(),
         success : function (data){
                      $btnElm.text('Next');
                   }
      });         
    });  
});

@aynaz then i think you need to provide your working jsfiddle — Himesh Aadeshara, Aug 03 '15 at 07:26

Steevan · Answer 2 · 2015-08-03T07:18:56.233

1

You can try with the below link.

fiddle link

$(document).ready(function(e) {

$('#theForm').submit(function() {
    var txt = $('#btnSubmit');
    txt.val("Next");
    return confirm("Do you want to save the information?");
  });

});

Updated link: Fiddle

edited Aug 03 '15 at 07:18

answered Aug 03 '15 at 06:11

Steevan

826
5
8

where do u mention it that if form submit then text change? – Aug 03 '15 at 06:14

Sapikelio · Answer 3 · 2015-08-03T06:21:35.720

Try with this.

First off all, add id to your form and button.

<form id="myform">
     ....
     <button id="mybutton" type="submit" class="btn-primary" >
           click
     </button>
     ...
</form>

Then, using JQuery you can do a Jquery Callback after form submit.

$("#myform").bind('ajax:complete', function() {

         document.getElementById("mybutton").value="New Button Text";

   });

It works for me. I Hope it helps.

Edit

If you dont want to use JQuery you can use onSubmit event to call a function after form submit.

<form onsubmit="changeButton()">
     ....
     <button id="mybutton" type="submit" class="btn-primary" >
           click
     </button>
       ...
</form>

This is the function to change button text.

function changeButton(){
    document.getElementById("mybutton").value="New Button Text";   
}

Have you put JQuery Callback function inside `$(document).ready(function () {/here/});`? — Sapikelio, Aug 03 '15 at 06:15

Change form submit button text after submition

3 Answers3