7

基本的なフォーム投稿を実行しようとしていますが、Chrome と Safari では次のようにサーバーに 2 回送信されます (ただし、Firefox では期待どおりに動作します)。

<form id="create-deck-form" action="/decks/create" method="post">
  <fieldset>
    <legend>Create new deck</legend>
    <label for="deck-name-field">Name</label>
    <input id="deck-name-field" name="deck-name-field" type="text" value="" maxlength="140" />

    <label for="tag-field">Tags</label>
    <input id="tag-field" name="tag-field" type="text" value="" maxlength="140" />

    <input class="add-button" type="submit" value="Create" />
  </fieldset>
</form>

属性を使用して送信前にフィールドの検証を実行したいのonsubmitですが、戻り値がtrueである場合、フォームは 2 回送信されます。

jQuery ハンドラーをフォームにバインドしようとしましたが、ここでもデフォルトの動作が妨げられず、フォームが 2 回送信されます。

<script type="text/javascript">
 $(document).ready(function() {
     $("#create-deck-form").submit(function(event){
          if($("#deck-name-field").val() == "") {
            event.preventDefault();
            alert("deck name required");
          }
        });
 });
</script>

新鮮な目で見ると、ここには目がくらむほど明らかな問題があると思いますが、検証の有無にかかわらず、提出がChromeとSafariのサーバーに重複して投稿される理由を非常に混乱させています. どんな洞察にも感謝します。

4

4 に答える 4

3

この問題は、実際にはFacebox（http://defunkt.github.com/facebox/）に関連しています。フェイスボックスの初期化により、ページの読み込み後に2番目のリクエストセットが発生します。したがって、に投稿すると/myaction/create、FaceboxはベースURLをに設定して2番目のリクエストセットを開始します/myaction/create。修正は、投稿を行った後にgetリクエストを処理するURLにリダイレクトすることです。これにより、投稿を2回実行することになりません。どうもありがとうございました。

于 2010-07-07T11:15:13.467 に答える
1

100%確実ではありませんが、次の方法をお試しください。

<script type="text/javascript">
   $(document).ready(function() {
      $("#create-deck-form").submit(function(event){
         if(!$("#deck-name-field").val().length) {
           return false;
         }
       });
   });
</script>

それがうまくいかない場合は、見てください

for(e in $("#create-deck-form").data('events'))
    alert(e);

これにより、にバインドされているすべてのイベントが警告されますform。多分もっと多くのイベントハンドラがありますか? それ以外の場合もアラート/ログ

$("#create-deck-form").attr('onclick')

と

$("#create-deck-form").attr('onsubmit')

念のため。

于 2010-07-06T13:05:45.573 に答える
0

これがどれだけ役立つかはわかりませんが、送信入力を削除して、javascript 経由でフォームを送信してみてください。たとえば

<input id="submit-button" class="add-button" type="button" value="Create" />

次に、onsubmitを聞く代わりに、試すことができます

$('#submit-button').click(function(evt) {
    if(validationSuccess(...)) {
        $("#create-deck-form").submit();
    } else {
        //display whatever
    }
});

これで、あなたもうまくいくはずです...しかし、この方法で、問題のある場所をデバッグできます....これは一度だけ送信する必要があります...頑張ってください!

于 2010-07-06T19:56:59.383 に答える
0

return false;アラートの後に試して削除できますかevent.preventDefault();。return true;たぶん、else節にも必要です。私はそれがどこかで働いていると信じています。

于 2010-07-06T13:00:30.490 に答える