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>

Answer 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

Answer 2

 $("#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'); } }); }); }); 

Answer 3

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";   
}