用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中的多个提交按钮处理表单提交

回答

相关问题