[英]How to know which submit button fired the onsubmit event
當表單中有多個提交按鈕時，有沒有辦法知道哪個按鈕觸發了onsubmit事件，而無需向按鈕本身添加代碼？
編輯：我需要在客戶端進行檢查，即使用 JavaScript。
“提交”事件不是由按鈕觸發的，而是由“表單”觸發的。 快速測試證明了這一點：
<form id="myform">
<input id="email" type="text" value="1st Email" />
<input id="action1" type="submit" value="Action 1" />
<input id="action2" type="submit" value="Action 2" />
</form>
<script type="text/javascript">
document.getElementById("myform").onsubmit = function(evt) {
var event = evt || window.event;
alert(event.target.id); // myform
alert(event.explicitOriginalTarget.id); // action2 (if action2 was clicked)
// but only works in firefox!
}
</script>
盡管在 Firefox 中，您可以在事件上使用event.explicitOriginalTarget屬性來獲取被點擊的輸入（提交），從而觸發提交事件。 （如果你想知道）
所以對你來說最好的選擇是：
我能想到幾種方法。
您可以使用不同的值，並且您的不顯眼的 javascript 可以提供幫助。
關於這種方法的一個討論（為每個按鈕使用不同的值）在這里：
http://www.chami.com/tips/internet/042599I.html
我傾向於為每個按鈕使用不同的name屬性。
一個博客在這里：http: //www.codetoad.com/javascript/multiple.asp
我不遵循這兩種方法，哪種方法效果最好取決於不同的因素，例如，您是在 javascript 中處理提交按鈕，還是服務器會獲取表單，然后必須弄清楚用戶是什么通緝。
就個人而言，我更喜歡使用 ajax 方法，現在，我只是在頁面加載后將事件附加到按鈕，使用不顯眼的 javascript，然后根據用戶選擇調用正確的函數，但這取決於你是否可以將腳本鏈接添加到 html 頁面。
更新：
為了用javascript做到這一點，最簡單的方法是在單擊按鈕時附加一個事件，然后查看名稱來決定如何處理它。
實際上，表單從來不需要真正提交到服務器，但是您可以通過包裝參數（選項）並將它們發送到服務器來在后台處理所有事情，並讓用戶知道結果。
每個按鈕上都有一個事件監聽器算作添加代碼嗎？ 否則，無法查看是哪個按鈕觸發了提交事件，除非您想在事件期間蹲下來並計算鼠標位置並將其與按鈕位置進行比較。
否則，下一個最好的方法是為按鈕的單擊事件分配一個事件處理程序，並將該按鈕的名稱分配給您可以在表單的提交事件中檢查的變量。
很抱歉讓這個非常古老的線程熱身。 這里沒有回答這個問題，但之前只給出了實際解決方法的方法。
但是事件對象確實攜帶有關哪個對象啟動它的信息。 在處理程序b4submit(e)中，您可以像這樣獲得提交按鈕：
function b4submit(e) {
var but = e.originalEvent.explicitOriginalTarget;
...
}
but 是一個 HTML 對象，具有您為其分配的所有屬性，例如名稱、id、值等。
經過一些調試后，我遇到了這個問題，我認為作為這個問題的干凈解決方案可能會引起更廣泛的興趣。
對我來說最簡單的選擇是使用document.activeElement如果你想獲取 id 使用document.activeElement.id如果你想獲取文本內容你可以簡單地把document.activeElement.textContent
const onSubmit = () => {
console.log('document.activeElement', document.activeElement.id)
if (document.activeElement.textContent === 'Suivant') {
handleNext()
return
}
if (document.activeElement.textContent === 'Confirmer') {
console.log('Payer')
return
}
}
SubmitEvent對象上有一個submitter者屬性。
參見示例：
<!DOCTYPE html>
<html>
<body>
<form action="./test.html" onsubmit="submitForm(event)">
Enter name: <input type="text" name="fname">
<button id="firstButton" type="submit">Button 1</button>
<button id="secondButton" type="submit">Button 2</button>
</form>
<script>
function myFunction(event) {
// This should log id of the button that was used for submition
console.log(event.submitter.id);
// Prevent sending the form (just for testing)
event.preventDefault();
}
</script>
</body>
</html>
請參閱https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
onchange移動提交按鈕時未觸發Javascript onsubmit
[英]Javascript onsubmit not fired when onchange moves submit button
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.