Question

我正在从头开始编写我的第一个网站 - 我有一个表单和一个函数在提交表单时起作用：

的application.js

$(document).ready(function() {
    $("#signupform").submit(function(e) {
        var name = document.getElementById("pname").value;
        var email = document.getElementById("email").value;
        var userArray = [];
        var user = {
            name: name,
            email: email
        };
        console.log(user.email, user.name);
        e.preventDefault;
    });
});

消息正确地记录到控制台......但它只是一个短暂的 - 它会立即消失。此外...我在编写上述代码时遇到的任何错误也只是在控制台中显示为短暂的闪烁。只是勉强阅读。

这是我的index.html文件......如果它是相关的：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>it IT</title>
  <link rel="stylesheet" type="text/css" href="application.css" />
  <script src="jquery.js"></script> 
  <script src="application.js"></script>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
    <h1>it IT</h1>
    <div id="signup">
        <form id="signupform">
            Name: <input type="text" name="pname" id="pname"><br>
            Email: <input type="text" name="email" id="email"><br>
            <input type="submit" value="sign up">
        </form>
    </div>
    <div id="signin"></div>
    <div id="content"></div>
</body>
</html>

Answer 1

preventDefault是一种方法，你需要：

e.preventDefault();

在您的问题代码中，表单已提交，因此控制台已刷新。

Answer 2

实际上e.preventDefault不正确，您需要这样做：

$(document).ready(function () {
    $("#signupform").submit(function (e) {
        e.preventDefault();  // Missing () for preventDefault method
        var userArray = [];
        var user = {
            name: $('#pname').val(),  // also, you can get the values here only
            email: $('#email').val()  // no need to use extra variables for it
        };
        console.log(user.email, user.name);
    });
});

Answer 3

在浏览器控制台中，转到设置（位于右上角），然后检查 保留日志选项。那应该防止页面重新加载。

firebug和chrome console都消失了console.log消息

3 个答案: