Question

我从头开始构建提交表单时看到很多jquery教程，这很酷，但我想知道我是否可以转换现有表单。

我正在使用一个典型的表单，并且已经有一个电子邮件和空白值检查到位。现在，在提交表单时，用户将被带到form-submit.php的确认php页面。

我想将其更改为仅向用户提供当前页面上的一行“您的表单已提交”

这是我的表格：

<form name="theForm" action="/contact-form2.php" method="post" onsubmit="return formCheck(this);" >
<table class="formTable" cellpadding="3" cellspacing="0">
  <tbody><tr>
    <td align="left"><b>Name:</b></td>
    <td><input name="name" id="name" size="25" value="" type="text" /></td>
   </tr>
  <tr>
    <td align="left"><b>Email:</b></td>
    <td><input name="email" id="email" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Confirm Email:</b></td>
    <td><input name="email_confirm" id="email_confirm" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Subject:</b></td>
    <td><input name="Subject" id="subject" size="35" value="" type="text" /></td>
  </tr>
  <tr>
    <td align="left" valign="top"><b>Message:</b></td>
    <td><textarea name="Message" id="message" cols="30" rows="6"></textarea></td>
  </tr>
  <tr align="left"><td>&nbsp;</td><td><input type="submit" value="Submit" onclick=" return checkEmail();" />&nbsp;<input type="reset" value="Reset" /></td></tr>
</tbody>
</table>
</form>

那么可以只更改on submit或onclick，以便能够通过外部php文件提交表单，并保持在同一页面上吗？

Answer 1

您可以转换现有表单，但这并不像更改onSubmit或onClick事件那么简单。

当您使用jQuery或其他Ajax库进行回调时，您正在将新内容加载到现有页面中。要做到这一点，你需要一个标记的块，通常是div，以包含要更改的任何数据。您还需要编写回调的包装代码以发送它并更新页面的HTML。

表单上的快速和脏版本是将表包装在div标记中，而Ajax调用将返回该div的新HTML。你提交onsubmit的新目标将是我上面描述的回调的包装代码。

您仍然需要完成所有工作才能使用jQuery并将其指向正确的位置。当我使用prototype.js时，我无法详细介绍jQuery过程，但您正在阅读的所有教程都可以。

Answer 2

是的。我建议介绍一些Javascript（以下示例使用jQuery）：

<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
    // bind some code to the form's onsubmit handler
    $('form[name=theForm]').submit(function() {
        if(formCheck(this)) {
            // $.post makes a POST XHR request, the first parameter takes the form's
            // specified action
            $.post($("form[name=theForm]").attr('action'), function(resp) {
                if(resp == '1') {
                    alert('Your form has been submitted');
                } else {
                    alert('There was a problem submitting your form');
                }
            });
        }
        return false;
    });
});
</script>

上述提交处理程序末尾的返回false会阻止浏览器以传统方式加载表单的操作（在url之后）。此外，如果Javascript不存在，表单将提交旧的学校方式，因此基本上您在标准表单实现之上添加了一层可用性，这会优雅地降级。

我想指出，为用户提供真实的反馈总是一个好主意。也就是说，表单的ajax发布可以从服务器捕获一些指示，在上面的示例中，我假设“1”表示记录已成功保存，“0”表示不是保存（查询失败等）。显示给用户的消息取决于此结果。

Answer 3

是的，您可以将onclick表单操作更改为javascript：myajaxsubmit（）函数。

将表单提交切换为ajax - 我可以更改onsubmit动作吗？

3 个答案: