时间戳

首页 > 解决方案 > 使用表单而不是 div

javascript - 使用表单而不是 div

问题描述

我有登录页面。我在其中使用表单。它从来没有奏效。后来我尝试了 div ，它工作正常。谁能告诉我为什么它不适用于表单。

编辑：我正在尝试使用 firebase 登录。使用表单时会出错。但使用 div 时会登录。

<div class="login-clean" id="login_div">
  <form method="post">
    <h2 class="sr-only">Login Form</h2>
    <div class="illustration"><i class="icon ion-ios-navigate"></i></div>
    <div class="form-group"><input class="form-control" type="email" name="email" id="email_field" placeholder="Email"></div>
    <div class="form-group"><input class="form-control" type="password" name="password" id="password_field" placeholder="Password"></div>
    <div class="form-group"><button class="btn btn-primary btn-block" onclick="login()" type="submit">Log In</button></div><a href="#" class="forgot">Forgot your email or password?</a>
  </form>
</div>

function login(){
  var userEmail = document.getElementById("email_field").value;
  var userPass = document.getElementById("password_field").value;

  firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;

    window.alert("Error : " + errorMessage);

    // ...
  });
}

标签： javascripthtmlfirebasefirebase-authentication

解决方案

表单中的提交按钮将提交表单。所以，在onclick处理程序被触发后，login即被调用。使用提交的表单值刷新页面。

要防止按钮在登录后提交表单，请将其更改为：

<input class="btn btn-primary btn-block" onclick="login()" type="button">

推荐阅读