Question

完成call.php并获取返回值可能需要很长时间，如何在执行call.php时将提交按钮的值更改为“正在处理...”？

提交ID为“submit_btn”的按钮，脚本没有变化

$('#submit_btn').val('Processing …')

AJAX代码

$(document).ready(function(){
    $('#form1').submit(function(e) {
        e.preventDefault();
        $('#submit_btn').val('Processing ...');
      $.ajax({
        cache: false, 
        type: "POST", 
        dataType: "json",
            data: $('#form1').serialize(),
        url: $('#form1').attr('action'),
        complete: function (HttpRequest, textStatus) {
                $('#submit_btn').val('Create');
      }});
      return false;
  });
});

HTML

<form action="call.php" method="POST" id="form1" name="form1">
        <input type="text" name="campname" id="campname">
        <textarea id="longdesc" name="longdesc"></textarea>
        <input type="text" name="vercode" id="vercode" />
        <input type="submit" value="Create" id="submit_btn" />
</form>

Answer 1

我不太确定，但为什么不尝试在点击时使用jQuery更改值？

类似的东西：

$('#submit_btn').click(function(){
   $(this).val("your value")
})

...或者只需在代码中更改提交点击：）

--------------编辑（基于作者代码）----------------

按钮的值不会更改，因为您使用的jquery通过在其上应用跨度来设置基本提交输入的样式。因此，单击您将不得不更改此范围中的文本。

这是DEMO

Answer 2

对于单个HTML文件中的简单表单，$（'＃submit_btn'）。val（'Processing ...'）。button（'refresh'）;是工作，但不是在多个jQuery页面。

HTML

<form action="test.php" method="POST" id="form1" name="form1">
    <fieldset>
        <input type="text" name="field1" id="field1" />
        <input type="button" value="Button" name="btn01" id="btn01" />
        <input type="submit" value="Submit" id="submit_btn" />
    </fieldset>
</form>

AJAX

$(document).ready(function () {

    $('#form1').submit(function (e) {
        e.preventDefault();
        $('#submit_btn').val('Processing …').button('refresh');
        $.ajax({
            type: "POST",
            dataType: "json",
            data: $('#form1').serialize(),
            url: $('#form1').attr('action'),
            complete: function (HttpRequest, textStatus) {
                $('#submit_btn').val('Submit').button('refresh');
            }
        });
        return false;
    });
});

演示页：http://jsfiddle.net/yckelvin/C6kzr/

对于多个jQuery页面，必须使用 $（'＃submit_btn'）。prev（）。text（“Processing ...”）。

HTML

<!-- HOME Page -->
<div data-role="page" id="page1">
    <div data-theme="b" data-role="header" data-position="fixed">   <a href="#menu" data-icon="bars" class="ui-btn-left">Menu</a>

    </div>
    <!-- Panel Page ---->
    <div data-role="panel" id="menu" data-display="overlay">
        <ul data-role="listview">
            <li><a href="#formpage" data-prefetch="false">Goto Form Page</a>

            </li>
        </ul>
        <p><a data-role="button" data-rel="close">Close</a>

        </p>
    </div>
</div>
<!-- Form Page -->
<div data-role="page" id="formpage" data-add-back-btn="true">
    <div data-role="content">
        <form action="test.php" method="POST" id="form1" name="form1">
            <fieldset>
                <input type="text" name="field1" id="field1" />
                <input type="button" value="Button" name="btn01" id="btn01" />
                <input type="submit" value="Submit" id="submit_btn" />
            </fieldset>
        </form>
    </div>
</div>

AJAX

$(document).ready(function () {

    $('#form1').submit(function (e) {
        e.preventDefault();
        $('#submit_btn').prev().text("Processing ...").delay( 1000 );
        $.ajax({
            type: "POST",
            dataType: "json",
            data: $('#form1').serialize(),
            url: $('#form1').attr('action'),
            complete: function (HttpRequest, textStatus) {
                $('#submit_btn').prev().text('Submit');
            }
        });
        return false;
    });
});

演示页：http://jsfiddle.net/yckelvin/V5mSv/

Answer 3

使用$ajax的{{1}}选项：

beforeSend

Answer 4

$(document).ready(function(){
    $('#submit_btn').click(function(e) {
        e.preventDefault();
        $(this).val('Processing ...'); // this did the trices 
      $.ajax({
        cache: false, 
        type: "POST", 
        dataType: "json",
            data: $('#form1').serialize(),
        url: $('#form1').attr('action'),
        complete: function (HttpRequest, textStatus) {
                $('#submit_btn').val('Create');
      }});
      return false;
  });
});

WORKING DEMO

Answer 5

对于我来说，这是在页面中工作的表单，这些表单具有相同的名称和ID

$(this).find("#submit").val("Saved");

更改提交按钮值

5 个答案: