提交前修改表单数据

Question

我正在使用jQuery与表单插件一起使用，并且希望在提交表单数据之前拦截并进行更改。

表单插件有一个名为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 调试库中的函数)

当我点击提交按钮时，它使用了 GET 而不是我指定的 POST 动词，并且我的 beforeSubmit 函数没有记录任何内容。看起来 ajaxForm 插件根本没有应用到表单上，但我不知道原因。有人能帮忙解决吗？

- ALassek

Answer 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>

- Ariel

---

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

Answer 2

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

（现在我会加入一些小的风格注释；如果您想停止阅读，可以在这里停止）：

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

- J Cooper

---

明白了。我其实知道第一点，但是关于第二点，我所参考的例子使用了$.each，我不确定是否有区别。 - Adam Lassek

如果可以的话，我会把你的答案排在第二位，因为你正确地指出应该是“type”而不是“method”。然而，Ariel发现的错误要严重一些。感谢你的帮助。 - Adam Lassek