我不希望我的页面或控制台刷新！ Javascript表单处理答案

【问题标题】：I don't want my page or console to refresh! Javascript form handling我不希望我的页面或控制台刷新！ Javascript表单处理
【发布时间】：2023-03-18 09:05:02
【问题描述】：

<form id="myForm">
    <input type="text" value="Try me!">
    <button type="submit">Go</button>
</form>
<script type="text/javascript">
    function init(){
        var form = document.getElementById("myForm");
        form.addEventListener("submit", process, false);
    };
    function process(){
        console.log("Yikes!");
        return false;
    };
    document.addEventListener("DOMContentLoaded", init, false);
</script>

我已经搜索过了，真的。我发现了一些可行的方法，但有人告诉我使用事件监听器而不是“onsubmit”等。我假设表单提交的默认行为是重新加载页面，但我认为 return false 会阻止这个。我发现有效的代码是：

window.onload=function() {
    document.getElementById('my-form').onsubmit=function() {
    /* do what you want with the form */

    // Should be triggered on form submit
    console.log("Yipee!");
    // You must return false to prevent the default form behavior
    return false;
  }
}

非常感谢对我学习之旅的任何帮助。

【问题讨论】：

标签： javascript forms event-handling submit reload

【解决方案1】：

使用preventDefault 方法。

function init(){
    var form = document.getElementById("myForm");
    form.addEventListener("submit", process, false);
};
function process(e){
    console.log("Yikes!");
    e.preventDefault()
    return false;
};
document.addEventListener("DOMContentLoaded", init, false);

【讨论】：

【解决方案2】：

试试这个：

<form id="myForm">
    <input type="text" value="Try me!">
    <button type="submit">Go</button>
</form>
<script type="text/javascript">
    function init()
    {
        var form=document.getElementById("myForm");
        form.addEventListener("submit", process, false);
    }
    function process(e)
    {
        console.log("Yikes!");
        e.preventDefault();
    }
    document.addEventListener("DOMContentLoaded", init, false);
</script>

或

window.onload=function()
{
    document.getElementById('myForm').onsubmit=function(e)
    {
        console.log("Yipee!");
        e.preventDefault();
    }
};

你需要使用preventDefault()来阻止表单被提交..

【讨论】：