【问题标题】:Jquery Form Submit Keeps Refreshingjquery表单提交不断刷新
【发布时间】:2013-10-09 09:17:48
【问题描述】:

由于某种原因,此表单不断刷新页面,我不知道为什么,因为页面上有另一个表单,其 id 不同但脚本相同,但它不刷新。我试过使用 preventDefault();也一样,但它也不起作用。有人可以告诉我这个表单或脚本哪里出错了吗?

谢谢

页面顶部

<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/jquery-ui.js"></script>
<script type="text/javascript" src="../JS/member_info.js"></script>

表格

<form id="central">
<table width="40%" class="search">
<tr>
<td width="39%" align="left"><p><b>Inception Date:</b></p><input size="10" maxlength="10" id="creddate" type="text" value="<?php echo $creddate; ?>" /></td>
<td width="41%" align="left"><p><b>Surety:</b></p><input size="15" maxlength="15" id="surety" type="text" value="<?php echo $surety; ?>" /></td>
<td width="20%" align="left"><p><b>Credit Limit:</b></p><input size="15" maxlength="15" id="creditlimit" type="text" value="<?php echo $credlimit; ?>" /></td>
</tr>
</table>
<br />
<table style="margin:0 auto">
<tr>
<td><input type="hidden" id="code" size="12" readonly="true" value="<?php echo $code; ?>" /></input></td>
<td><input type="submit" value=" Save " /></input></td>
<td><p align="center" id="central_status"></p></td>
</tr>
</table>
</form>

脚本 - 从 member_info.js 链接

$(document).ready(function(){
  $("form#central").submit(function() {
    var code = $('#code').val();
    var inception = $('#creddate').val();
    var surety = $('#surety').val();
    var credit = $('#creditlimit').val();
    $.ajax ({
      type: "POST",
      url: '../members/edit_central.php',
      data: {code: code, creddate: creddate, surety: surety, creditlimit: creditlimit},
      success: function(data) {
        $('#central_status').html(data);
      }
    });
    return false;
  });
});

【问题讨论】:

  • 使用提交的输入类型按钮

标签: php jquery ajax forms


【解决方案1】:

确保在提交表单后立即preventDefault()。在执行此操作之前不要执行任何其他操作(例如调用 Ajax)。

例如:

$("form#central").submit(function(e) {
    e.preventDefault();

    // Your other long running (possibly async)
    // operations here
}

另外,请确保您没有将表单动态添加到页面。如果这样做,您需要实时附加提交事件。像这样:

$(document).on('submit', 'form#central', function(e){
    // same as above
});

【讨论】:

    【解决方案2】:

    使用提交的输入类型按钮

    <input type="button" value=" Save " name="saveButton" id="saveButton" />
    

    【讨论】:

      【解决方案3】:

      在单击事件处理结束时简单地返回 false,例如:

      $('form input[type="submit"]').click(function() {
      ....
      return false;
      })
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-04-26
        • 2012-05-22
        • 1970-01-01
        • 1970-01-01
        • 2012-08-08
        • 2011-11-18
        • 2011-08-31
        相关资源
        最近更新 更多