如何檢測表單是如何通過 JavaScript 提交的？

Question

我有一個帶有多個提交按鈕的表單，我正在通過 JavaScript 監聽“提交”事件。 我想知道哪個提交按鈕或表單字段（如果用戶按下“Enter/Return”）觸發了提交事件。 有沒有辦法獲取用戶單擊或按下“Enter/Return”的 HTML 元素？

更新，因為人們不理解我：

這是在提交表單之前通過 JavaScript 完成的。 不允許服務器端檢測。 我還需要處理通過用戶按 Enter 或 Return 提交的表單。

代碼

<form action="" method="POST">
    <input type="text" name="first_name">
    <input type="text" name="item">
    <input type="submit" value="Add item">
    <input type="submit" value="Submit">
</form>

單擊“添加項目”或在 name="item" 中按 Return/Enter 將添加另一個表單字段。

最后說明

據我所知，沒有辦法檢測哪個表單字段觸發了表單提交。 如果您需要阻止提交具有多個按鈕和/或 Enter/Return 的表單，則需要使用 <input type="button"> 並將事件處理程序綁定到要停止提交表單的表單字段。

Answer 1

如果您有多個提交按鈕，您可以告訴每個按鈕一個唯一的名稱屬性，如下所示：

<input type="submit" name="submit1" value="Submit 1"/>
<input type="submit" name="submit2" value="Submit 2"/>
<input type="submit" name="submit3" value="Submit 3"/>

關注的內容與表單提交一起發送，因此如果您單擊名稱為“submit2”的內容，則會以 POST（或 GET）的形式發送。 如果按下回車，則源中的第一個按鈕（在本例中為 submit1）被視為默認按鈕並被發送。 您可以將其設置為 display:none 以用作檢測是否按下輸入與實際單擊提交按鈕的虛擬對象。

編輯：

為了回應您的評論，要捕獲在某些元素中按下回車鍵，您可以使用 jQuery 執行此操作。

請注意，您需要提供 first_name 和 add_item id 屬性，並將 add_item 轉換為 type="button" 而不是 type="submit"。

HTML：

<form action="" method="POST">
    <input type="text" name="first_name"/>
    <input type="text" id="item" name="item"/>
    <input type="button" id="add_item" value="Add item"/>
    <input type="submit" value="Submit"/>
</form>

JS：

$("#item").keydown(function(event){
    if(event.keyCode == 13) {
        addFields();

        event.preventDefault();
        event.stopPropagation();
    }
});

$("#add_item").click(function(event) {
    addFields();
});

Answer 2

您可以在您感興趣的每個元素上設置onclick事件並調用 javascript function 並為每個單擊的元素使用不同的參數。

從那個 function 你將按鈕的標識符作為參數發送到服務器端

Answer 3

只需在每個提交按鈕上放一個不同的名稱，無論單擊哪個按鈕，都將與表單一起提交（即其名稱/值對）。 自（WWW）時間開始以來，Forms 就一直這樣工作。

如果表單是通過 enter 或其他按鍵提交的，則 不會 提交第一個提交按鈕名稱/值對。

編輯

重新閱讀您的問題，您可能想確定表單在發送之前是如何提交的。 表單上的單擊偵聽器可以記住最后一次單擊的提交按鈕，但在 Firefox 中，在輸入中按 enter 會在第一個提交按鈕上發送虛假單擊，因此您無法檢測到它。

我認為除了使用上面建議的基本方法或 Jordan 的隱藏提交按鈕之外，您無法可靠地做到這一點。 如果您說出為什么需要這樣做，也許可以提供更多幫助。

Answer 4

如果您不介意使用 jQuery，這里有一個選項：

例如： http://jsfiddle.net/U4Tpw/

使用類似的東西

$('form').submit(function() {
    // identify the form by getting the id attribute
    handleWhichForm($(this).attr('id'));
});