使用JavaScript手動提交表單不會發送提交按鈕

Question

我有一個有兩個提交按鈕的表單。 我想使用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> 

當使用“Do One”按鈕在上面提交表單時，發布的參數是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處理程序中添加一個元素，那么我添加的元素是IS發布的，兩個原始的提交按鈕沒有發布。 只是為了完成圖片，這里是添加元素的代碼：

<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>

添加輸入元素可能對我有用，但我很困惑瀏覽器如何知道發布我添加的元素而不是原始的兩個輸入元素。

謝謝。

Answer 1

規范說表單提交的第一步是：

第一步：確定成功的控制

“成功控制”定義為：

成功的控制對於提交是“有效的”。 每個成功的控件都將其控件名稱與其當前值配對，作為提交的表單數據集的一部分。 必須在FORM元素中定義成功的控件，並且必須具有控件名稱。

然而：

...

• 如果表單包含多個提交按鈕，則只有激活的提交按鈕成功。

由於沒有激活任何提交按鈕，因此不會發送任何按鈕。 另一方面，隱藏的輸入元素是有效的，只是一起提交。 請注意， 在調用mySubmit() 之前添加隱藏元素，因此在執行上述步驟時（即在提交期間），隱藏元素只是表單的另一個成功控制部分，因此被發送。

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()
}