提交HTML表单后页面刷新、控制台内容消失的问题咨询

一、控制台内容消失的原因 #

点击提交按钮时，浏览器会触发表单的默认提交行为——把表单数据通过GET请求发送出去，同时刷新当前页面。页面刷新后，之前的控制台日志会被清空，所以你只能看到值短暂出现。

二、阻止控制台内容清空的方法 #

核心是阻止表单的默认提交行为，有两种常用实现方式：

方式1：修改onclick事件 #

需要把事件对象传入函数，通过它来阻止默认行为：

<form method="get" id="form">
    <label for="newTask">New Task</label>
    <input type="text" name="task" id="newTask" required>
    <br>
    <input type="submit" value="submit" onclick="validate(event)"> 
</form>

<script>
    function validate(e){
        // 阻止表单默认提交
        e.preventDefault();
        var newTask = document.getElementById("newTask").value;
        console.log(newTask);
    }
</script>

方式2：修复onsubmit事件的用法 #

你之前用onsubmit没反应，是因为没正确阻止默认行为，两种正确写法：

• 写法一：函数内阻止默认行为

<form method="get" id="form" onsubmit="validate(event)">
    <label for="newTask">New Task</label>
    <input type="text" name="task" id="newTask" required>
    <br>
    <input type="submit" value="submit"> 
</form>

<script>
    function validate(e){
        e.preventDefault();
        var newTask = document.getElementById("newTask").value;
        console.log(newTask);
    }
</script>

• 写法二：让函数返回false

<form method="get" id="form" onsubmit="return validate()">
    <label for="newTask">New Task</label>
    <input type="text" name="task" id="newTask" required>
    <br>
    <input type="submit" value="submit"> 
</form>

<script>
    function validate(){
        var newTask = document.getElementById("newTask").value;
        console.log(newTask);
        // 返回false阻止默认提交行为
        return false;
    }
</script>

三、关于newTask变量的存储问题 #

你当前代码里的newTask是用var声明在validate函数内部的，属于函数作用域。函数执行完毕后，这个变量会被垃圾回收机制销毁，不会再保留之前的值。

如果想让它在函数执行后依然存储值，可以把它声明为全局变量：

// 全局作用域声明变量
var newTask;
function validate(e){
    e.preventDefault();
    // 给全局变量赋值
    newTask = document.getElementById("newTask").value;
    console.log(newTask);
}

这样函数执行结束后，newTask依然会保留输入的内容。

内容的提问来源于stack exchange，提问作者Skunko