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

Process a Form Submit with Multiple Submit Buttons in Javascript

本文关键字：提交 按钮 处理 表单提交 Javascript      更新时间：2023-09-26

我有一个带有多个提交按钮的表单，我想捕捉其中任何一个按钮被按下的时间，并为每个按钮执行不同的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>

看看一个旧的答案，我可以处理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并从中执行逻辑？

我不需要有三个提交按钮，本身……我只需要表单中的三个不同按钮来执行三个不同的操作。

谢谢！

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

实时示例 

$("#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
});

使用此

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

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

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

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

但是我如何区分不同的提交按钮呢？有没有一种方法可以从中获取值并执行逻辑？

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

document.querySelector('#my-form button[value="button-one"]' )
相关文章：