0

长话短说，我试图了解如何正确使用 onsubmit。testresults 函数可以在 onclick 上正常工作，但我无法在提交时激活它（使用按钮或按 Enter 键）。我在这里错过了什么吗？最终，我只想让 onsubmit 运行检查并提供与 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>
4

4 回答 4

3

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

<form NAME="myform" ACTION="" METHOD="GET" onSubmit="testResults(this);">
于 2013-04-04T15:08:31.367 回答
2

只需使用：

onSubmit="testResults(this);"

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

于 2013-04-04T15:08:02.487 回答
1

您当前的方法是您期望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>

免责声明：这是代码不完整，不适用于所有（旧）浏览器。它只是为了说明如何使用事件处理。

于 2013-04-04T15:14:18.420 回答
0

你也可以用这个

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

只需将 return 放在您的函数之前并相应地返回 true 或 false 。

于 2013-04-04T15:28:39.880 回答