在提交之前修改表單數據

Question

我使用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來代替，並且我的beforeSubmi沒有記錄任何內容t功能。似乎ajaxForm插件沒有被應用到表單中，但我不明白爲什麼。任何人都可以幫忙嗎？

Answer 1

我通過螢火蟲運行下面的代碼，它看起來像廣告一樣工作，但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

對於初學者來說，根據this API，你的選擇對象應使用type而不是method，或只在指定的HTML窗體上的方法屬性。

（我現在就扔在一對夫婦輕微的文體記錄;你可以停止閱讀這裏，如果你想）：

1. 你可以只更換$(function...$(document).ready(function...。
2. $.each(formData, function...看起來更自然的，因爲$(formData).each(function...