JavaScriptを使用して手動でフォームを送信しても、送信ボタンは送信されません。

Question

2つの送信ボタンがあるフォームがあります。 JavaScriptを使用してフォームを手動で送信し、フォームが自動的に送信された場合と同様に、入力ボタンを他のフォーム要素とともに投稿したフォームを送信するようにします。このテーマにはかなりのチャタリングがありますが、私は答えを見つけることができません。フォームは、「いずれかの操作」ボタンを使用して、上記送信され

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/> 
    <input type="text" size="20" id="field2" name="field2"/> 

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/> 
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/> 
</form> 

は、投稿のパラメーターは field1="xxx"、 field2="yyy"、 sub1_name="Do One"です。

しかし、私は手動でフォームを送信したい...

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/> 
    <input type="text" size="20" id="field2" name="field2"/> 

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/> 
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/> 
</form> 
<script type="text/javascript"> 
    var btn = document.getElementById('sub1_id'); 
    btn.onclick=function() { 
     return mySubmit(document.getElementById('form1'), ...); 
    } 
</script> 

が、mySubmit機能でフォームのマニュアル提出を行うとsub1_nameパラメータを投稿していません。私は理解することができます - 私はフォームがボタンを使用して提出されていないので、フォームを送信するために使用されるボタンを表すパラメータを投稿する意味がないように、私は投稿をバイパスしました。

onclickハンドラのフォームの要素を見ると、両方のボタンが表示されます。私はあまりにも驚くことではない、どちらもフォーム上の要素ですが、私が得意でないものは、onclickハンドラの中に要素を追加すると、追加する要素が投稿され、2つの元の送信ボタン投稿されていません。ただ、絵を完成させ、ここに要素を追加するコードです：

<script type="text/javascript"> 
    var btn = document.getElementById('sub1_id'); 
    btn.onclick=function() { 
     var f = document.getElementById('form1'); 
     var s = document.createElement("input"); 
     s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";    
     f.appendChild(s); 

     // s gets posted 
     return mySubmit(f, ...); 
    } 
</script> 

を入力要素が私のために働く可能性の追加は、私は、ブラウザが元の2つの入力を私の添加元素を投稿する知っているではないか混乱しています要素。

ありがとうございます。

Answer 1

specificationは、フォームの送信のための最初のステップであることを言う：

ステップ1：

A：

"成功コントロールは" と定義されて成功したコントロールを特定します成功した制御は、提出のために「有効」である。すべての成功したコントロールは、送信されたフォームデータセットの一部として現在の値とペアになったコントロール名を持ちます。成功した制御は、FORM要素内で定義され、制御名を持たなければなりません。しかし

は：

...

• フォームが複数の送信ボタンが含まれている場合のみ、提出アクティブにボタンが成功しています。

送信ボタンがどれも有効になっていないため、送信されません。一方、隠された入力要素は有効であり、そのまま提出されます。 をの前に追加することに注意してください。したがって、上記の手順が実行されたとき（つまり送信中に）、隠された要素はフォームのもう1つの成功したコントロール部分に過ぎず、送信されます。

Answer 2

する

var btn = document.getElementById('sub1_id'); 
btn.onsubmit=function() { 
    return false; 
} 

btn.onclick=function() { 
    var f = document.getElementById('form1'); 
    var s = document.createElement("input"); 
    s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";    
    f.appendChild(s); 

    f.submit() 
}