JavaScript表单提交功能不提交

Question

以下是表单：

<form name="loginForm" id="loginForm" method="post">
    <!-- <label>UserName :</label> -->
    <input id="name" name="username" placeholder="username" type="text"  autofocus>
    <!-- <label>Password :</label> -->
    <!-- <input id="password" name="password" placeholder="**********" type="password"> -->
    <input name="submit" type="submit" value=" Login ">
</form>

脚本：

document.getElementById("name").addEventListener("keypress", submitForm);
function submitForm() { 
    // document.getElementById("loginForm").submit();
    document.forms.loginForm.submit();
    // alert("Yay, You got this far!");
}

函数submitForm被调用，但是除非按下回车键，否则表单不会被提交。我尝试过重命名提交输入，然后它再次接受输入，似乎进行了函数调用，但它并没有提交表单，而是简单地刷新表单并清除输入文本字段。

Answer 1

使用action属性可能会更好。顺便说一下，你应该用/> 关闭你的空元素

<form name="loginForm" id="loginForm" method="post" action="http://localhost:80/my_awesome_form_handler.php">
    <input id="name" name="username" placeholder="username" type="text"/>
    <input name="submit" type="submit" value=" Login "/>
</form>

Answer 2

您不需要事件侦听器。这应该对你有用：

表单标记必须具有操作属性。将其指向正在处理表单的任何脚本。

<form name="loginForm" id="loginForm" method="post" action="script.php">
<!-- <label>UserName :</label> -->
<input id="name" name="username" placeholder="username" type="text"  autofocus>
<!-- <label>Password :</label> -->
<!-- <input id="password" name="password" placeholder="**********" type="password"> -->
<input name="submit" type="submit" value=" Login ">
</form>

对于javascript，使用jQuery:

jQuery(document).ready(function($) {
    $('#loginForm').on('submit', null, function() {
        $(this).submit();
    });
}

如果每次在名称字段中输入字符时，您都试图提交表单，那么您可以执行以下操作：

jQuery(document).ready(function($) {
    $('#name').on('keyup', null, function(e) {
        e.preventDefault();
        $('#loginForm').submit();
    });
}