在控制台 jquery 上显示表单输入 - Javascript (1)

📌 相关文章

📜 在控制台 jquery 上显示表单输入 - Javascript (1)

📅 最后修改于: 2023-12-03 15:08:02.468000 🧑 作者: Mango

在控制台 jQuery 上显示表单输入 - JavaScript

本文将介绍如何使用 jQuery 在控制台中显示用户输入的表单数据。这个技巧对于调试代码或者做简单的表单验证非常有用。

实现步骤

在 HTML 文件中添加一个表单元素。

<form>
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <button type="submit">提交</button>
</form>

使用 jQuery 监听表单提交事件：

$('form').submit(function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    // 在此处添加代码
});

获取表单数据并在控制台中输出：

$('form').submit(function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为

    var username = $('input[name="username"]').val(); // 获取用户名输入框的值
    var password = $('input[name="password"]').val(); // 获取密码输入框的值

    console.log('用户名：', username); // 在控制台中输出用户名
    console.log('密码：', password); // 在控制台中输出密码
});

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在控制台 jQuery 上显示表单输入 - JavaScript</title>
</head>
<body>
    <form>
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="password" name="password" placeholder="请输入密码">
        <button type="submit">提交</button>
    </form>

    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $('form').submit(function(event) {
            event.preventDefault(); // 阻止表单的默认提交行为

            var username = $('input[name="username"]').val(); // 获取用户名输入框的值
            var password = $('input[name="password"]').val(); // 获取密码输入框的值

            console.log('用户名：', username); // 在控制台中输出用户名
            console.log('密码：', password); // 在控制台中输出密码
        });
    </script>
</body>
</html>

总结

本文介绍了如何使用 jQuery 在控制台中显示用户输入的表单数据。这个技巧对于调试代码或者做简单的表单验证非常有用。想了解更多 jQuery 相关的知识，可以查看官方文档。