在提交之前修改表單數據

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調試器庫）

當我單擊提交按鈕時，而不是我指定的POST動詞，而是使用GET，而且我的beforeSubmit函數沒有記錄任何內容。 似乎ajaxForm插件根本沒有應用於表單，但我不明白為什么。 任何人都可以幫忙嗎？

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>

Answer 2

對於初學者，根據此API ，您的選項對象應使用type而不是method ，或者只在HTML中的表單上指定method屬性。

（現在我會拋出幾個小風格的筆記;如果你願意，你可以在這里停止閱讀）：

1. 您可以替換$(document).ready(function...只需$(function...
2. $.each(formData, function...看起來更自然為$(formData).each(function...