使用输入表单标记中的onclick属性的JavaScript未捕获引用错误

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用输入表单标记中的onclick属性的JavaScript未捕获引用错误相关的知识,希望对你有一定的参考价值。

javascript函数

function submitToServer(formObject)
{           
        if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"])) 
        {
            formObject.submit();
        }
}

html表单字段

 <form  method="POST" action="SignIntoPortal">
        <table>
            <tr>
                <td> User Name : </td> 
                <td>
                       <input type="text" id="userName" name="userName" onblur="validateUserName(this)">
                       <span id="userName_help" />
                </td>
            </tr>
            <tr>
                <td> Password : </td> 
                <td>
                       <input type="password" id="password" name="password" onblur="validatePassword(this)">
                       <span id="password_help" />
                </td>
            </tr>
            <br>
        </table>
        <input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form);">
        </input>
    </form>

以上是我的代码,它验证数据并提交表单。但我一直在

未捕获的ReferenceError:未定义submitToServer

错误,我无法解决。可能是什么原因?但是,当我用不同的形式尝试它时,它使用不同的名称和字段。

编辑

工作的代码和这之间的区别是,前一个代码不使用表它工作顺利。范围是否随表格而变化?

你可以在这里找到代码CODE FIDDLE

你可以得到.html文件here

SignIn.html

<html>
    <head>
        <title>Sign into Shopping Zone</title>
        <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8"> 
        <style>
            body
            {
                font: 14px verdana;
            }
            h1
            {
                font: arial-black;
                color: blue;
            }
        </style>

        <script type="javascript" language="text/javascript">
            function submitToServer(formObject)
            {           
                if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"])) 
                {
                    formObject.submit();
                }
            }
            function validateUserName(inputField)
            {
                if(inputField.value.length == 0)
                {
                    document.getElementById("userName_help").innerHTML = "Please enter value";
                    return false;
                } 
                else
                {
                    document.getElementById("userName_help").innerHTML = "";    
                    return true;
                } 
            }
            function validatePassword(inputField)
            {
                if(inputField.value.length == 0)
                {
                    document.getElementById("password_help").innerHTML = "Please enter value";
                    return false;
                }
                else
                {
                    document.getElementById("password_help").innerHTML = "";
                    return true;
                }
            }
        </script>

    </head>

    <body>

        <h1><b><i>Shopping Zone</i></b></h1>
        <p> Kindly Provide Login info
        </p>
        <!-- SignIn Form Data for Passing to SignIntoPortal-->
        <form  method="POST" action="SignIntoPortal">
            <table>
                <tr>
                    <td> User Name : </td> <td><input type="text" id="userName" name="userName" onblur="validateUserName(this)"><span id="userName_help" /></td>
                </tr>
                <tr>
                    <td> Password : </td> <td><input type="password" id="password" name="password" onblur="validatePassword(this)"><span id="password_help" /></td>
                </tr>
                <br>
            </table>
            <input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form)"></input>
        </form>
    </body>
</html>
答案

在脚本标题中,您的“类型”和“语言”属性混淆了。 type应为'text / javascript',语言应为'javascript',尽管不需要语言属性

<script type="text/javascript" language="javascript">

以上是关于使用输入表单标记中的onclick属性的JavaScript未捕获引用错误的主要内容,如果未能解决你的问题,请参考以下文章

HTML 表单只读 SELECT 标记/输入

HTML 表单只读 SELECT 标记/输入

Exp8 Web基础 20154320 李超

表单元件和标记元件及其属性设置

如何通过MySql查询结果中的循环输入表单(动态地)发布Ajax onClick

内联 onclick 覆盖 JQuery click()