4

フォームプラグインと組み合わせて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プラグインがフォームにまったく適用されていないようですが、理由はわかりません。誰かがこれを手伝ってくれる？

4

2 に答える 2

3

次のコードをfirebugで実行したところ、アドバタイズされたとおりに機能しているように見えますが、テキストボックスにname属性を設定していないため、beforeSubmitコールバックのformData変数は空です。

<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>
于 2008-12-05T19:51:01.317 に答える
1

まず、この APIに従って、オプション オブジェクトは を使用する必要がtypeありmethod、HTML のフォームに method 属性を指定する必要があります。

(ここで、文体に関するいくつかのマイナーなメモを挿入します。必要に応じて、ここで読むのをやめてください):

  1. $(document).ready(function...だけで置き換えることができます$(function...。
  2. $.each(formData, function...より自然に見える$(formData).each(function...
于 2008-12-05T19:58:30.520 に答える