提交后更改表單提交按鈕文本

Question

提交后如何更改提交按鈕的文字？ 我有一個帶按鈕的表格。 提交表單后，我想將按鈕文本從單擊更改為下一步。

         <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

您可以嘗試以下鏈接。

小提琴鏈接

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

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

});

更新的鏈接： 小提琴

Answer 2

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

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

我認為這是您可以改變的方式。

否則，您想在提交表單后進行更詳細的說明，然后可以使用ajax方法提交表單，並在僅提交表單后將button的文本更改為next

 $("#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

試試這個。

首先，向您的表單和按鈕添加id 。

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

然后，您可以使用JQuery在表單提交后執行Jquery回調。

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

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

   });

這個對我有用。 希望對您有所幫助。

編輯

如果您不想使用JQuery，則可以在表單提交后使用onSubmit事件來調用函數。

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

這是更改按鈕文本的功能。

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