JavaScript uncaught reference error using onclick attribute in input form tag

Question

JavaScript Function

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

HTML FORM FIELD

 <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>

The above is my code, which validates data and submits the form. but i keep getting

Uncaught ReferenceError: submitToServer is not defined

error, which I am unable to resolve. what could be the reason? But, when I tried it with different form it worked with different names and fields.

EDIT

the difference between the code that worked and this is that, the former code does not use table it works smooth. Does scope change with table ?

You can find the code here CODE FIDDLE

You can get .html file 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>

@SrinivasB I am adding my functions in between <script> tag within the head tag of my HTML file. — saikumarm
– saikumarm, Commented Dec 4, 2014 at 9:04
I placed <script> code in body, expecting scope change, but it did not work. — saikumarm
– saikumarm, Commented Dec 4, 2014 at 9:08
@SrinivasB that was a typo error. My actual code does contain onclick attribute — saikumarm
– saikumarm, Commented Dec 4, 2014 at 9:28
your fiddle uses an onload function but since your code is called from the body it needs to be wrapped in body. (see the 2nd dropdown on the left) here is the working version, all I changed was the dropdown - jsfiddle.net/kcc3p762 everything is working. you need to put your js code in the body and it should run. if you still have problems please share all of your page code here in StackOverflow — roryok
– roryok, Commented Dec 4, 2014 at 9:34
@roryok Yes it's working now on fiddle. But in my actual file I have wrapped my code in <head> but it did not work and I tried in <body> with no effect — saikumarm
– saikumarm, Commented Dec 4, 2014 at 9:39

roryok · Accepted Answer · 2014-12-04 10:08:08Z

in the script header, your 'type' and 'language' attributes are mixed up. type should be 'text/javascript' and language should be 'javascript' although the language attribute is not required

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

Collectives™ on Stack Overflow

JavaScript uncaught reference error using onclick attribute in input form tag

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related