Javascript - 更正用户名和密码以启用其他表单?

时间:2015-02-27 01:13:06

标签: javascript html forms

好吧,所以我不知道这是否可能,或者是否有更简单的方法去做我想要完成的事情。

基本上我使用Javascript表单输入用户名和密码并带有登录按钮。如果输入的用户名和密码正确并且您点击登录按钮,我希望页面隐藏"登录表单",并运行另一个表单。或者,如果有办法禁用"患者信息表格"直到"登录表格"输入正确。

我完全迷失了如何做到这一点。任何帮助将不胜感激!

这是我到目前为止所做的。

<form name="recLogin">
  <table>

  <th>Receptionist Login</th>

  <tr><td>Username: 
  <input type="text"
  name="txtUsername"
  id="username"
  placeholder="Username"
  value="mayo" required ></td>

  <td>Password: 
  <input type="password"
  name="txtPassword"
  id="password"
  placeholder="Password"
  value="Please99!" required ></td>

  <td><input type="button"
  onClick="validateLogin();"
  value="Login"></td></tr>

  </table>
</form>


<form name="patientInfo">
  <table>

  <th>Patient Information</th>

  <tr><td>First Name:
  <input type="text"
  name="txtFName"
  id="firstName"
  placeholder="First Name";
  value=""></td></tr>

  <tr><td>Last Name:
  <input type="text"
  name="txtLName"
  id="lastName"
  placeholder="Last Name"
  value=""></td></tr>

  </table>

Javascript代码

function validateLogin()
{
var notValid = true;
var username = document.forms["recLogin"]["txtUsername"].value;
var password = document.forms["recLogin"]["txtPassword"].value;
username = username.toLowerCase();

if(username == "mayo" && password == "Please99!")
{
/*****COMPLETELY STUCK******/
alert("Entered Correctly");
notValid = false;
}
else
{ 
alert("I'm sorry but the username and password you entered are incorrect, please try again.");
}
}//End of validateLogin()

1 个答案:

答案 0 :(得分:0)

就像巴马尔提到的那样,

应用表格ID,如

<table id='receiptionist_table' style='display:block'>
  <th>Receptionist Login</th>

块意味着当您第一次进入页面时将显示此表。 和

<table id='Patient_table' style='display:none'>
  <th>Patient Information</th>

我们使用display none以隐藏此表单,您现在将在登录成功后立即更改脚本中的样式,这是:

if(username == "mayo" && password == "Please99!")
{
  document.getElementById('receiptionist_table').style.display='none';
  document.getElementById('Patient_table').style.display='block';
  alert("Entered Correctly");
  notValid = false;
}

在脚本中,您只需要使用样式。就是这样!

我希望这可以解决您的问题。