提交后更改表单提交按钮文本答案

【问题标题】：Change form submit button text after submition提交后更改表单提交按钮文本
【发布时间】：2015-10-25 03:25:04
【问题描述】：

提交后如何更改提交按钮文本？我有一个带按钮的表格。提交表单后，我想将按钮文本从单击更改为下一步。

         <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>

【问题讨论】：

试过什么了吗？你会想要使用 javascript/jquery...
我想你可以使用类似的方法：stackoverflow.com/questions/26937424/…
@HAYMbl4 是的，但我想在提交表单后进行一些更改而不是点击
我试过了，但提交后我没有工作。它只有在点击@andrew时才有效
你在使用 Bootstrap 吗？因为它有stateful buttons

标签： javascript jquery html button text

【解决方案1】：

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

   &lt;button type="submit" class="btn-primary" id="save" &gt;

我认为这就是你可以改变的方式。

如果您想在提交表单后更具体，那么您可以使用 ajax 方法提交表单并在仅提交表单后将按钮的文本更改为下一个

$("#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 那么我认为你需要提供你的工作 jsfiddle

【解决方案2】：

你可以试试下面的链接。

fiddle link

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

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

});

更新链接：Fiddle

【讨论】：

你在哪里提到如果表单提交然后文本更改？

【解决方案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";   
}

【讨论】：

你把JQuery回调函数放在$(document).ready(function () {/here/});里面了吗？