Question

长话短说，我正在努力了解如何正确使用onsubmit。 testresults函数在onclick上工作正常，但是我无法在提交时使用它（使用按钮或按Enter键）。我在这里错过了什么吗？最终，我只是想提交检查并给出与onclick相同的各种边界更改/警报。这不可能吗？

function testResults(form) {
    var TestVar = form.firstname.value;
    if (TestVar.length > 0) {
        alert("You typed: " + TestVar);
        document.getElementById('firstname').style.border = ''
    } else {
        alert("You didn't typed!" + TestVar);
        document.getElementById('firstname').style.border = '1px solid red';
        return false;
    }
    return true;
}

HTML

<html>    
<head>
    <link rel="stylesheet" type="text/css" href="note.css">
    <script type="text/javascript" src="formJS2.js"></script>
</head>
<body>
    <form NAME="myform" ACTION="" METHOD="GET" onSubmit="testResults();"> <span>First name:</span> 
        <input type="text" name="firstname" id="firstname" value="" />
        <br>
        <input type="submit" value="Submit">
        <input type="button" name="button" value="Click" onClick="testResults(this.form)">
    </form>
</body>
</html>

Answer 1

是的，你错过了什么。您的testResults函数有一个form参数，但是当您在onSubmit属性中调用它时，您没有传递任何值（因此函数内的form将是{{ 1}}）。将其更改为：

undefined

Answer 2

只需使用：

onSubmit="testResults(this);"

解释：你的方法需要一个类型为form的参数，你需要传递它......

Answer 3

您当前的方法是，您希望form作为onsubmit回调的第一个参数。其他答案已经表明你只需要传入它。

通常，当您有事件处理程序时，第一个参数是事件。通过以这种方式用你自己的功能覆盖它你将失去对事件做任何事情的能力。在这个例子中你可以逃脱它，但如果你正在寻找一种方法来做正确的那么这是我的建议：

<form method="post" action="submit.php" id="my_form">
    <input type="submit" value="submit" />
</form>

<script type="text/javascript">
    document.getElementById("my_form").addEventListener("submit", function (event) {
        if (false === form_is_valid(event.target)) {
            event.preventDefault(); // prevents submitting to submit.php
        }
    });
</script>

免责声明：这是代码不完整，无法在所有（较旧的）浏览器中使用。这仅仅是为了说明如何使用事件处理。

Answer 4

您也可以使用此

    <input type="button" name="button" value="Click" onClick="return testResults(this.form)">

只需在函数前放置return，并相应地返回true或false。

Onclick vs Onsubmit问题（真/假和警报行为？）

4 个答案: