在 Javascript 中使用多个提交按钮处理表单提交

Question

我有一个带有多个提交按钮的表单，我想捕获其中任何一个被按下的时间，并为每个按钮执行不同的 JS 代码。

<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 并从那里执行逻辑？

我不需要三个提交按钮，本质上...我只需要一个表单中的三个不同按钮来执行三个不同的操作。

谢谢！

Answer 1

您可以将自定义点击处理程序附加到所有按钮，这样您就可以在提交表单之前检查点击了哪个按钮：

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

Answer 2

使用这个

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

Answer 3

HTML：

<form id = "form" onSubmit = {handleSubmit}>
<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>

JS：

const handleSubmit = e => {
    e.preventDefault();

    var ans = document.activeElement['value'];
    console.log(ans);
};

Answer 4

但是如何区分不同的提交按钮？有没有办法从那里获取价值并执行逻辑？

是的，您可以使用querySelector 来抓取具有属性的元素。

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

Answer 5

您还可以使用SubmitEvent 的只读submitter property。

HTML（和你一样）：

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

JS：

let form = document.getElementById("my-form");
form.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
    event.preventDefault()
    alert(event.submitter.value) // shows a different value depending on button pressed

从那里开始，很容易将submitter 用作控制流，例如：

let form = document.getElementById("my-form");
form.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
    event.preventDefault()
    submitter = event.submitter.value
    switch (submitter) {
        case "button-one":
            alert(1)
            break;
        case "button-two":
            alert(2)
            break;
        case "button-three":
            alert(3)
            break;
    }

}