javascript - 提交后更改表单提交按钮文本

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

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

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

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

如果您想更具体地了解仅在提交表单后的情况，那么您可以使用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');
                   }
      });         
    });  
});