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

您不需要为此设置事件侦听器。这应该适合你：

您的表单标签必须具有 action 属性。将其指向正在处理您的表单的任何脚本。

<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();
    });
}