表单提交执行JavaScript最佳做法？

一尘不染

表单提交执行JavaScript最佳做法？

html

我想在提交表单时运行JavaScript函数。问题在于，提交表单后，将重新加载页面，并将表单值作为GET参数附加到URL。我希望它保留在当前页面上，仅运行JavaScript函数。

我想知道什么最佳实践（或您做什么），以避免重新发送页面和发送参数。

阅读 294

2020-05-10

共1个答案

一尘不染

onsubmit提交表单后，使用该事件执行JavaScript代码。然后，您可以返回false或调用传递的事件的preventDefault方法来禁用表单提交。

例如：

<script>
function doSomething() {
    alert('Form submitted!');
    return false;
}
</script>

<form onsubmit="return doSomething();" class="my-form">
    <input type="submit" value="Submit">
</form>

这可行，但是最好不要用JavaScript乱涂HTML，就像您不应该编写很多内联CSS规则一样。许多Javascript框架促进了关注点的分离。在jQuery中，您可以使用JavaScript代码绑定事件，如下所示：

<script>
$('.my-form').on('submit', function () {
    alert('Form submitted!');
    return false;
});
</script>

<form class="my-form">
    <input type="submit" value="Submit">
</form>

2020-05-10