用Javascript中的多個提交按鈕處理表單提交

我有一個具有多個提交按鈕的表單，並且我想要捕獲它們中的任何一個被按下時，併爲每個按鈕執行不同的JS代碼。用Javascript中的多個提交按鈕處理表單提交

<form id="my-form"> 
    <input type="email" name="email" placeholder="(Your email)" /> 
    <button type="submit" value="button-one">Go - One</button> 
    <button type="submit" value="button-two">Go - Two</button> 
    <button type="submit" value="button-three">Go - Three</button> 
</form>

尋找一個older answer，我可以處理所有在 JS提交按鈕：

function processForm(e) { 
    if (e.preventDefault) e.preventDefault(); 

    /* do what you want with the form */ 

    // You must return false to prevent the default form behavior 
    return false; 
} 

var form = document.getElementById('my-form'); 
if (form.attachEvent) { 
    form.attachEvent("submit", processForm); 
} else { 
    form.addEventListener("submit", processForm); 
}

但我怎麼能區分之間的不同的提交按鈕？有沒有辦法獲得value並從那裏執行邏輯？

我不需要有三個提交按鈕，本身......我只需要一個表單中的三個不同的按鈕來執行三種不同的操作。

謝謝！

來源

2014-09-25 Berto

您可以將自定義單擊處理所有的按鈕和方式，您可以檢查哪些按鈕提交表單前點擊：

Live Example

$("#my-form button").click(function(ev){ 
    ev.preventDefault()// cancel form submission 
    if($(this).attr("value")=="button-one"){ 
     //do button 1 thing 
    } 
    // $("#my-form").submit(); if you want to submit the form 
});

來源

2014-09-25 13:20:21 Banana

這非常適用！我可以刪除'attachEvent'的東西，並已經有jQuery，所以我不妨使用它。謝謝！ – Berto 2014-09-25 13:38:46

不客氣:) – Banana 2014-09-25 13:39:25

我希望這可以幫助你，Jsfiddle代碼在這裏：http://jsfiddle.net/pragneshkaria/eusyrdmy/2/ – 2014-09-25 13:47:11

但如何我可以區分不同的提交按鈕嗎？有沒有辦法從那裏獲得價值並執行邏輯？

是的，您可以使用querySelector來獲取具有屬性的元素。

document.querySelector('#my-form button[value="button-one"]')

來源

2014-09-25 13:22:54

這使您可以針對個別按鈕，但不使用基於邏輯在哪個按鈕上提交表單。 – ricdesi 2016-11-03 15:17:46

使用本

function processForm(e) { 
if (e.preventDefault) e.preventDefault(); 
/* do what you want with the form */ 
var submit_type = document.getElementById('my-form').getAttribute("value"); 
if(submit_type=="button-one"){ 

}//and so on 
// You must return false to prevent the default form behavior 
return false; 
}

來源

2014-09-25 13:27:30

用Javascript中的多個提交按鈕處理表單提交

回答

相關問題