フォームを送信する前にリダイレクトしようとするとどうなりますか？

Question

私が取り組んでいるウェブサイトでこの奇妙なコードを見つけましたが、私が見ている動作がどうやって起こっているのか理解できません。

<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" /> 

は（HREFを変更し、それが実際にフォームのアクションと同じURLを指していました）。

フォームが送信される前にイベントが発生するため、このコードはGoogle.comにリダイレクトされ、ページの実行を停止してフォームを送信しません。または、Google.comにリダイレクトしても、フォームを送信しても完了します。

しかし、リダイレクトは完全に無視され、フォームはとにかく送信されるように見えます。なぜこれが起こるのだろうか？
私はonclickイベントが正常に機能することを確認しました。リダイレクトを関数に移動し、関数をonclickに呼び出しました。この関数は送信前に正常に呼び出されましたが、リダイレクトは無視されたようです。

Answer 1

私はちょうど別のブラウザでこの動作をテストした、すべてのブラウザは、同じ結果を与えた、ここに私の結論です：

<!-- submit button inside form --> 
<form method="post"> 
    <input type="submit" value="submit" /> <!-- onclick = submitted to same page --> 
    <input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = submitted to same page, ignored redirect --> 
</form> 
<!-- submit button without form --> 
<input type="submit" value="submit" /> <!-- onclick = no submit or redirect occur --> 
<input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = redirect --> 

ご存知のように、JavaScriptを線形であり、それは最初に来るのコードの行を実行します。我々は、このフォームを持っているとしましょう：

<form id="myform" method="post" onsubmit="alert('onsubmit');"> 
    <input id="mybtn" type="submit" value="submit" onclick="alert('onclick');" /> 
</form> 
<script> 
    $(document).ready(function() { 
     $('#mybtn').bind('click', function() { 
      alert('bind click'); 
     }); 
     $('#myform').bind('submit', function() { 
      alert('bind submit'); 
     }); 
     // onclick > bind click > onsubmit > bind submit 
    }); 
</script> 

ボタンをクリックすると、ボタンにバインドされたイベントが（イベントを「クリック」）最初に発生し、その後、フォームにバインドされたイベントには、次の（「送信」イベントを発生します）。 結果は以下の通りです：

1. 警告：onclickの
2. 警告：バインドクリック
3. 警告：をonSubmit
4. 警告：あなたが含まれている場合、バインドが
5. フォーム送信

を提出します関数のリダイレクトコードはリダイレクトされずに送信されますが、私はjavascriptがを上書きすると信じていますフォームのポストプロセスでは、 "フォームの提出"は暗黙の/暗黙のコード行のようにスクリプトの最後にあります。return false;を指定しないと、この暗黙的/隠線が実行されます。

私は専門家ではありませんが、それは私がいくつかのテストの後で理解したものです。私が間違っているなら、私を修正してください。

編集：各機能にdocument.location.hrefを含めるとどうなりますか？

<form id="myform" method="post" onsubmit="document.location.href='http://www.onsumbit.com';"> 
    <input id="mybtn" type="submit" value="submit" onclick="document.location.href='http://www.onclick.com';" /> 
</form> 
<script> 
    $(document).ready(function() { 
     $('#mybtn').bind('click', function() { 
      document.location.href='http://www.bindclick.com'; 
      return false; 
     }); 
     $('#myform').bind('submit', function() { 
      document.location.href='http://www.bindsumbit.com'; 
     }); 
    }); 
</script> 

「HREF」変更の文字列値の状態は以下の（しかし、スクリプトの終了時にリダイレクトを実行する）ように：

1. document.location.href =「http://www.onclick.com」このような;
2. document.location.href = 'http://www.bindclick.com';
3. document.location.href = 'http://www.onsubmit.com';
4. document.location.href = 'http://www.bindsubmit.com';
5. document.location.href = '/'; //フォーム投稿
6. javascriptの、「HREF」文字列値

に基づいてリダイレクトんが、我々はあなたが観察しているもの「http://www.bindclick.com」

Answer 2

<form action="http://www.yahoo.com" method="get"> 
<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" /> 
</form> 

[保存]ボタンをクリックすると、onclickイベントにfalseが返されない限り、Yahoo（Chrome）に転送されるブラウザによって検索されます。 IE 10では、Googleに誘導されます。

ブラウザをコーディングした人は、この回答に答える必要があります。

Answer 3

のためにリダイレクトしないであろうこと、＃2の後return false;を持っていますオーバーライドされない限り、HTMLInputElementのハンドラのデフォルトおよび継承された動作。

ソリューション：

すべてのモダンブラウザを正しく処理することができるはずである、代わりにHTML5 button type-submit Elementを使用してください。

<form action="/" method="post" onsubmit="alert('submit event')"> 
    <input type="text" name="someinput" value="100"> 
    <button type="submit" onclick="alert('button onclick handled before form-submit')">submit</button> 
</form> 

説明：

あなたが特定のブラウザを提供していませんでしたが、おそらくあなたはonsubmit/onclickイベントの階層beforeに問題があったのWebKitを使用しています。

プロジェクトのコードサイトで、さまざまなHTMLElementを実装するコードを検索できます。
たとえば、onsubmitを検索するとWebkit onsubmit-event bubbling testになります。

イベントバブリングのこの問題を回避する1つの方法は、buttonを使用して、囲みフォームを見つけてそれを機能「(HTMLFormElement-instance).submit()」で送信することです。

もう1つは、フォームの送信ハンドラを変更することです。フォームの送信ハンドラは、探しているものでなければなりません。

<form action="/" method="post" accept-charset="utf-8" id="myform3" 
    onsubmit="event.stopPropagation(); event.cancelBubble = true;"> 
    A form with the default Browser submit-handler overwritten: 
    <br> 
    <input type="text" name="someinput" value="100"> 
    <input type="submit" name="commit" value="Submit" 
    onclick="alert('will alert first and submit later using the browser default submit handler.');"> 
</form> 

すべてがこのfiddleに示されています。

乾杯！

Answer 4

は、私は、フォームの

私は行動の期間にお答えします、

デフォルトの方法は、データを取得するボタン書を提出するプレスにそうGETあり、これは議論の余地が問題だと思います。 ソースOld Post

しかし、リンクはローカルインデックスページのindex.htmlである場合は、document.location.href =「http://www.google.com」今

にe.preventDefault()が含まれている場合あなたが元のリンクを削除したように、ウェブサイトのアドレスに関して呼び出されます、なぜ、もともとこれらが使用された理由を判断することはできません!!!

私は、これは流れのコールがクリアされます

<form onsubmit="javascript:alert('Form Submit called '+ this.method);"> 
    <input type=submit value=Submit onclick="javascript:document.location.href='http://www.google.com';alert('Button Submit');" /> 
</form> 

、このコードを実行するあなたの質問に言うことができます。 document.location.hrefがこれを使用して変更されることはありません。alert(document.location.href);これを変更すると、このコードが使用され、変更されていない場所が表示されます。

おそらく

が、私は、これは物事をより明確にすることを願っています。これを変更することが既定の動作を防ぐが、それはあなたのコードの一部ではありません。