捕获使用JavaScript提交的表单

一尘不染

捕获使用JavaScript提交的表单

javascript

关于如何使用javascript提交表单似乎有很多信息，但是我正在寻找一种解决方案，以捕获表单提交后在javascript中进行拦截的方法。

的HTML

<form>
 <input type="text" name="in" value="some data" />
 <button type="submit">Go</button>
</form>

当用户按下“提交”按钮时，我不希望提交表单，而是希望调用JavaScript函数。

function captureForm() {
 // do some stuff with the values in the form
 // stop form from being submitted
}

一个快速的技巧是在按钮上添加onclick函数，但是我不喜欢这种解决方案…有很多方法可以提交表单…例如，在输入时按回车键，这不能解释。

泰

阅读 322

2020-05-01

共1个答案

一尘不染

<form id="my-form">
    <input type="text" name="in" value="some data" />
    <button type="submit">Go</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);
}

编辑：在我看来，这种方法比onSubmit在表单上设置属性更好，因为它保持了标记和功能的分离。但这只是我的两分钱。

Edit2 ：更新了我的示例以包括preventDefault()

2020-05-01