HTMLフォームsubmit POSTS入力ボタン/値を送信します。 JavaScriptフォームの送信はしません

Question

これはしばらくの間私を悩ませています。断続的にフォームのコンテンツを2回送信していたページを発見しました。簡略化のために、入力はテキストフィールドとボタンです。さらに調べると、テキスト入力とボタン入力が1つのフォーム提出に含まれていて、もう1つの提出でテキスト入力のみが送信されていることがわかりました。

トラブルシューティングのためのテストページをセットアップしました。私はそれをjsfiddleに載せましたが、FiddlerのようなHTTPプロキシツールを使って渡された値を見ることができないので、あまり助けになるとは思えません。

https://jsfiddle.net/9xL5w9t2/

<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form1" name="form1name"> 
<input type="submit" value="submit form" id="submitbtn1" name="submitbtn1name" /> 
<input type="text" id="text1" value="123" name="text1name" /> 
</form> 

<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form2" name="form2name"> 
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form2name.submit();" id="submitbtn2" name="submitbtn2name" /> 
<input type="text" id="text2" value="123" name="text2name" /> 
</form> 

<form method="post" action="www.google.com" id="form3" name="form3name"> 
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form3name.submit();" id="submitbtn3" name="submitbtn3name" /> 
<input type="text" id="text3" value="123" name="text3name" /> 
</form> 

<form method="post" action="www.google.com" onsubmit="alert('form submitted'); this.submit();" id="form4" name="form4name"> 
<input type="submit" value="submit form" id="submitbtn4" name="submitbtn4name" /> 
<input type="text" id="text4" value="123" name="text4name" /> 
</form> 

フォーム1：テキスト、ボタン

フォーム2提出：テキスト

フォーム3を送信しは：二回送信し：テキスト

フォーム4を送信します。 1）テキストを送信する2）テキストとボタンを送信する

外観から、HTMLフォーム送信を使用して送信すると、テキストとボタン入力が送信されます。しかし、JavaScriptを使用してフォームを送信すると、テキスト入力だけが送信されます。ボタンなし。

この現象の説明は何ですか？ JavaScriptフォームが送信テキスト入力のみを送信するのはなぜですか？HTMLフォーム送信はテキスト入力とボタン入力の両方を送信します。

これは仕様です。もしそうなら、理由は何でしょうか？あなたのHTMLパーサーがボタン値を送信するのに矛盾しているようですが、あなたのJSエンジンはそうではありません。

ありがとうございました。

Answer 1

フォーム1：テキストとボタンを送信 ..入力タイプを使用したデフォルトの動作submit [送信]ボタンをクリックしたので、両方の入力コントロールが送信されます。 別の送信ボタンを追加します。投稿を送信しているボタンだけが投稿データに含まれていることがわかります。

だからこそ、その理由は次のとおりです。この方法では、2つのボタンを追加できます。フォームに「キャンセル」や「保存」と同じ名前を使用して

様式2：テキスト フォーム3を送信し：両方のソリューションは、私にはまったく同じに見えるテキスト が...、入力タイプのボタンは次のように扱われていない送信しますここに入力フィールドを提出してください。あなたはjsを使って提出します。 ボタンに何も操作がないため、そのボタンが含まれていません。 （上記と同様）。

フォーム4：2回送信します。 1）テキストを送信する2）テキストとボタンを送信する フォーム1のように入力タイプを使用しているので、このフォームは全く同じ方法で送信されます。しかし、フォームにonsubmitハンドラもあります。このハンドラは、2回目の送信の理由であるjsを使用して送信を再度呼び出します。 サブミットは最初に呼び出されます。これは、サブミットがページリロードを引き起こし、イベントを実行しているスクリプトがサブミット後に「存在」しないためです。

その他の動作は、Fomr 2 で説明したのとまったく同じです。

さらなる説明が必要な場合はお知らせください。