提交前修改表单数据答案

【问题标题】：Modifying form data before submission提交前修改表单数据
【发布时间】：2010-09-25 13:25:08
【问题描述】：

我将 jQuery 与 form plugin 结合使用，我想在提交之前拦截表单数据并进行更改。

表单插件有一个名为 beforeSubmit 的属性应该执行此操作，但我似乎无法让我指定的函数运行。

这是表单的标记（省略了一些样式细节）：

<form id="form1">
    <fieldset id="login">
        <legend>Please Log In</legend>
        <label for="txtLogin">Login</label>
        <input id="txtLogin" type="text" />
        <label for="txtPassword">Password</label>
        <input id="txtPassword" type="password" />
        <button type="submit" id="btnLogin">Log In</button>
    </fieldset>
</form>

这是我目前拥有的 javascript：

$(document).ready(function() {
    var options = {
        method: 'post',
        url: 'Login.aspx',
        beforeSubmit: function(formData, form, options) {
            $.each(formData, function() { log.info(this.value); });
            return true;
        }
    };
    $('form#form1').ajaxForm(options);
});

（log.info() 来自我正在使用的Blackbird 调试器库）

当我单击提交按钮时，而不是我指定的 POST 动词，它使用 GET 代替，并且我的 beforeSubmit 函数没有记录任何内容。似乎 ajaxForm 插件根本没有应用于表单，但我不明白为什么。有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery jquery-forms-plugin

【解决方案1】：

我通过 firebug 运行了以下代码，它似乎像宣传的那样工作，但 beforeSubmit 回调中的 formData 变量为空，因为您没有在文本框上设置 name 属性。

<script type="text/javascript">
  $(document).ready(function() {
    var options = {
      beforeSubmit: showData
    };
    $('form#form1').ajaxForm(options);
  });
  function showData(formData, form, options) {
    //var formData = [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ];
    $.each(formData, function(i, obj) { log.info(obj.name + " | " + obj.value); });
    return true;
  }
</script>

<form id="form1" action="Login.aspx" method="post">
<fieldset id="login">
    <legend>Please Log In</legend>
    <label for="txtLogin">Login</label>
    <input id="txtLogin" type="text" name="User" />
    <label for="txtPassword">Password</label>
    <input id="txtPassword" type="password" name="Pass" />
    <button type="submit" id="btnLogin">Log In</button>
</fieldset>
</form>

【讨论】：

缺少名称属性是问题所在。谢谢。

【解决方案2】：

首先，根据this API，您的选项对象应该使用type 而不是method，或者只是在HTML 中的表单上指定方法属性。

（现在我将提供一些小的文体说明；如果您愿意，可以在此处停止阅读）：

您可以将$(document).ready(function... 替换为$(function...。
$.each(formData, function... 看起来比$(formData).each(function... 更自然

【讨论】：

点了。我实际上知道 1，但至于 2，我基于使用的 $.each 的示例，我不确定是否有区别。
如果可以的话，我会把你的作为第二个答案，因为你是正确的，它应该是“类型”而不是“方法”。然而，爱丽儿发现的错误要严重一些。感谢您的帮助。