提交form表单后script标签未打印输入内容该如何解决？

• 表单触发提交事件时默认会执行页面刷新/跳转逻辑，你在onsubmit属性中声明了return Ak()，但Ak函数没有显式返回值，默认返回undefined，不会阻断表单默认行为，刚写入到#w节点的内容会随页面刷新被清空，所以看不到输出。

二选一即可：

方案1：给Ak函数添加返回值 #

在函数末尾加return false阻断默认提交行为，完整修改后代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>表单提交测试</title>
</head>
<body>
    <form onsubmit="return Ak()">
        <input type="text" name="abinash" placeholder="请输入内容" required id="q"><br><br>
        <input type="submit" name="submit" value="提交">
        <div id="w"></div>
    </form>
    <script type="text/javascript">
        function Ak() {
            const y = document.getElementById("q").value;
            document.getElementById("w").innerHTML = `你输入的内容是：${y}`;
            // 阻止表单默认提交刷新行为
            return false;
        }
    </script>
</body>
</html>

方案2：主动阻止事件默认行为 #

给Ak函数接收事件对象，调用preventDefault方法：

<form onsubmit="Ak(event)">
    <input type="text" name="abinash" placeholder="请输入内容" required id="q"><br><br>
    <input type="submit" name="submit" value="提交">
    <div id="w"></div>
</form>
<script>
function Ak(e) {
    e.preventDefault();
    const y = document.getElementById("q").value;
    document.getElementById("w").innerHTML = `你输入的内容是：${y}`;
}
</script>

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