表单提交时jQuery脚本未输出控制台日志的问题求助

核心问题分析与解决步骤 #

1. 错误获取输入框内容

input标签的用户输入内容存储在value属性中，而.text()方法仅用于获取元素的文本节点内容（比如<div>示例文本</div>里的内容），对input元素使用.text()只会得到空字符串。

修正： 将所有.text()替换为.val()，这是jQuery获取input输入值的正确方法。

2. 未阻止表单默认提交行为

点击提交按钮后，表单默认会触发页面跳转/刷新，控制台的输出会被瞬间清空，导致你无法看到任何内容。

修正： 在submit事件处理函数中调用event.preventDefault()，阻止默认提交行为。

3. 确保事件绑定时机正确

你的代码使用了script.onload，但需确认该script变量是否指向加载jQuery的脚本标签。如果是直接在页面中引入jQuery，更稳妥的方式是使用$(document).ready()，确保DOM和jQuery都加载完成后再绑定事件。

修正后的完整代码 #

JavaScript（account.js）

$(document).ready(function() {
    $("#form").submit(function(event) {
        // 阻止表单默认提交，避免页面刷新
        event.preventDefault();
        
        // 正确获取各输入框的值
        var user = $(".userBox").val();
        var email = $(".emailBox").val();
        var pass = $(".passBox").val();
        var conPass = $(".conPassBox").val();
        
        // 控制台输出内容，用逗号分隔更易读
        console.log(user, email, pass, conPass);
    });
});

额外HTML优化建议（非核心问题）

条款复选框的label标签for属性未对应input的id，导致点击文字无法选中复选框，建议修正：

<input type="checkbox" class="check" id="terms">
<label for="terms" class="terms">Terms and Conditions</label>

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