Question

我想提交一个表格，并在用户输入用户名和密码时输入击键。当按下回车键时，我会收到来自我的功能的警报。但之后它不提交表格。我做错了什么？

<form id="myForm" action="#" onsubmit="return false;" >
 <div>
 <input type="text" id="username"  />
 </div>
 <div>
 <input type="password" id="password"   />
 </div>
 <div>
  <button type="submit" id="btnLogin" onclick="myFunction(0)">Log in</button>
 </div>


<script type="text/javascript">

    function myFunction(e) {
        if ((e && e.keyCode == 13) || e == 0) {
            alert("The form was submitted"); // this alert gets called,but my form doesnt get submitted
            document.forms.myForm.submit();   
        }
    }

Answer 1

你可以这样使用。（使用jquery）

1.Change输入类型提交到按钮

2.更改提交表格的代码

3.为表单

写一个keyPress事件

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
    <form id="myForm" action="test.html" >
     <div>
     <input type="text" id="username"  />
     </div>
     <div>
     <input type="password" id="password"   />
     </div>
     <div>
      <button type="button" id="btnLogin" onclick="myFunction(0)">Log in</button>
     </div>
    </form> 
    <script type="text/javascript">       
       function myFunction() {
       alert("form submitted");
       document.getElementById("myForm").submit();
       }
    $('#myForm').on('keydown', function (e) {
      if (e.which === 13) {
          myFunction();
         }
     });
</script>

＆＃13;

Answer 2

我认为你真的不需要javascript因为实际按下表格中的输入通常会提交表格。

请注意，在下面的示例中，我们所做的只是定位表格的提交事件，这也包括点击输入键。

但是要满足您的问题

使用jQuery，您可以尝试将按键事件绑定到按钮单击提交事件。

这样的事情：

$("#btnLogin").blur();
$('#btnLogin').focus().click();

P.S。请务必使用<form>

关闭</form>标记

实施例

＆＃13;

$('#myForm').submit(function() {
    var confirmSubmit = confirm("Submit the form?");
    if(confirmSubmit)
    {
      $("#btnLogin").blur();
      $('#btnLogin').focus().click();
    }
    else
      return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm" action="yourPage.html">
  <div>
    <input type="text" id="username" />
  </div>
  <div>
    <input type="password" id="password" />
  </div>
  <div>
    <button type="submit" id="btnLogin">Log in</button>
  </div>
</form>

＆＃13;

Answer 3

1）从表单return false事件中删除onsubmit。

2）从按钮中删除onclick事件。

3）使用JS，将submit事件绑定到表单并在事件处理程序中执行您需要的操作，如下所示：

＆＃13;

var loginForm = document.getElementById('myForm');
loginForm && loginForm.addEventListener('submit', myFunction);

function myFunction(event) {
  event.preventDefault();
  alert("form is about to be submitted...");
  loginForm.submit();
}

＆＃13;

<form id="myForm">
  <div>
    <input type="text" id="username" />
  </div>
  <div>
    <input type="password" id="password" />
  </div>
  <div>
    <button type="submit" id="btnLogin">Log in</button>
  </div>
</form>

＆＃13;

更好的是，删除所有的JS并保留我的答案中的表单。它会在输入时提交表单，因为当存在类型为submit的按钮/输入时，它是默认行为！

Answer 4

您可以在不检查keyCode的情况下尝试此操作。您可以在input内的任意button字段或form输入密钥。

＆＃13;

function myFunction(e) {
  var username = e.target.querySelector('#username');
  var password = e.target.querySelector('#password');
  if(username.value && password.value){
    alert("The form was submitted"); 
    return true;
  }
  return false;
}

＆＃13;

<form id="myForm" action="#" onsubmit="return myFunction(event)">
  <div>
    <input type="text" id="username" />
  </div>
  <div>
    <input type="password" id="password" />
  </div>
  <div>
    <button type="submit" id="btnLogin">Log in</button>
  </div>
</form>

＆＃13;

无法在按键上提交表单

4 个答案:

实施例