Question

我试图在用户提交函数时从表单中打印值但返回空值。

这是我的JavaScript代码：

var login = new function()
{
    var name = null ;

    this.validation = function()
    {
        this.name = document.getElementById("Username").value;
        console.log(this.name); 
        document.getElementById("demo").innerHTML = this.name;
    };
};

我的HTML格式为：

<body>
  <div class="container">
    <div class="col-md-8">

      <div class="starter-template">
        <h1>Login with javascript</h1>
        <p class="lead">Please Enter Following Details</p>
        <h1 id="demo"></h1>
        <form name="form" onSubmit="return login.validation();" action="#" method="post">
          <div class="form-group">
            <label for="exampleInputEmail1">Username</label>
            <input type="text" name="username" class="form-control" id="Username" placeholder="Please Enter your Username">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="Email" placeholder="Please enter your Password">
          </div>          
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="Password" placeholder="Password">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Re-Password</label>
            <input type="password" class="form-control" id="Re-Password" placeholder="Password">
          </div>          
          <button type="submit" class="btn btn-default">Submit</button>
        </form>

      </div>
      </div>

    </div>
    <script src="js/login.js"></script>
    <script href="js/bootstrap.js"></script>
    <!-- /.container -->
  </body>

为什么该值不会进入html <p>标记。

Answer 1

您的代码很简单。但由于函数在提交表单时执行，因此在用提交的数据刷新页面之前，用户名会快速记录在控制台中。您可以通过向函数添加event.preventDefault();来确认并测试它，以防止提交表单，以便使用控制台保持页面可见。

<script>
    var login = new function()
    {
    var name = null ;

    this.validation = function()
    {
        event.preventDefault();
        this.name = document.getElementById("Username").value;
        console.log(this.name); 
        document.getElementById("demo").innerHTML = this.name;
        };
    };
</script>

如果那不是你想要的，请告诉我。

Answer 2

我们javascript验证失败，您需要返回false。如果你不这样做，它将继续你的表格。感谢

var login = new function()
        {
            var name = null ;

            this.validation = function()
            {
                this.name = document.getElementById("Username").value;
                document.getElementById("demo").innerHTML = this.name;
                return false;
            };
        };

我的JavaScript表单验证函数被调用两次

2 个答案: