Question

我一直在解决其他问题的许多解决方案，但我似乎无法实施任何解决方案。

我正在尝试使用表单创建一个简单的登录框，然后根据登录信息加载特定的网页。这就是我现在拥有的;

<div class="container">
<form name="login">
<p class="paragraph">Username <input class="login" type="text" placeholder="Enter Username" name="userid"/></p>
<p class="paragraph">Password <input class="login" type="password" placeholder="Enter Password" name="pswrd"/></p>
<p class="paragraph"><input type="button" onclick="check(this.form)" value="Login"/></p>
</form>

function check(form)
{
 if(form.userid.value == "pf900" && form.pswrd.value == "password")
  {
    window.open('/pf900_pid/index.htm','_self')
  }
 else if(form.userid.value == "pf350a" && form.pswrd.value == "password")
  {
    window.open('/pf350a_pid/index.htm','_self')
  }
 else
 {
   alert("Error: Wrong username or password")
  }
}

我的问题是，我似乎无法使用表单，因此输入键将激活登录按钮。如果我将按钮更改为提交，它只会将登录信息放在地址栏中，并且不会执行正确的操作。

Answer 1

将输入类型保持为“提交：

<input type="submit"/>

并在Check功能上，使用

 event.preventDefault();

Answer 2

我将总结一下每个人在这里所说的内容并将其放在一个答案中。

在<form>元素上，请务必使用onSubmit
更改输入类型以提交
移除<input>

function check() {
  event.preventDefault();
  var form = document.forms["login"];
  if (form.userid.value == "pf900" && form.pswrd.value == "password") {
    window.open('/pf900_pid/index.htm', '_self')
  } else if (form.userid.value == "pf350a" && form.pswrd.value == "password") {
    window.open('/pf350a_pid/index.htm', '_self')
  } else {
    alert("Error: Wrong username or password")
  }
}

<div class="container">
  <form name="login" onSubmit="check()">
    <p class="paragraph">Username <input class="login" type="text" placeholder="Enter Username" name="userid" /></p>
    <p class="paragraph">Password <input class="login" type="password" placeholder="Enter Password" name="pswrd" /></p>
    <p class="paragraph"><input type="submit" value="Login" /></p>
  </form>
</div>

Answer 3

请将您的代码转换为此代码：

form method =＆＃34; post＆＃34;的onsubmit =＆＃34;检查（this.form）＆＃34; action =＆＃34;放置你的   在这里工作＆＃34;

输入类型=＆＃34;提交＆＃34;值=＆＃34;登录＆＃34; /＆GT;

按钮不会在表单元素上工作，而是在dom事件中使用或显示模态。

希望这有帮助！

Answer 4

我们可以通过两种不同的方式进行操作，只需将输入类型更改为submit或添加onkeypress事件检查输入键，如下所示。

<div class="container">
<form name="login" onkeypress="onEnter(event)">
<p class="paragraph">Username <input class="login" type="text" placeholder="Enter Username" name="userid"/></p>
<p class="paragraph">Password <input class="login" type="password" placeholder="Enter Password" name="pswrd"/></p>
<p class="paragraph"><input type="submit" onclick="check(this.form)" value="Login"/></p>
</form>

onkeypress功能块

function onEnter(e){
  if(e.keyCode == 13)
     check()
}

使用回车键提交HTML登录表单？

4 个答案: