javascript undefined errors on some of the fields

Question

All of a sudden, I get undefined errors in JavaScript.

Error: TypeError: document.userForm.surname is undefined

I get the error when I try to call the value of a form field. The funny thing is that some of the fields returns a type of string while others return undefined, however they are all declared the same and are of the same input type etc... I am totally clueless at this point and seek the knowledge of the stack-overflow gods to assist me.

Here is a section of the page to show you that the values return successfully from the database and fill the fields on the form:

Here is the section of the form that is displayed above and also the button where I call the javascript:

<form class=\"gideonform\" name=\"userForm\">
<tr>
    <td id=\"right\">Password: </td>
    <td id=\"left\"><input size=\"50\"   maxlength=\"50\" type=\"password\" name=\"password\" value=".$dbuserpassword."></input></td>
</tr>
<tr>
    <td id=\"right\"></td>
    <td id=\"left\"></td>
</tr>
<tr>
    <td id=\"right\">Title: </td>
    <td id=\"left\"><input size=\"50\"   maxlength=\"5\" type=\"text\" name=\"title\" value=\"".$dbusertitle."\"></input></td>
</tr>
<tr>
    <td id=\"right\"></td>
    <td id=\"left\"></td>
</tr>
<tr>
    <td id=\"right\">Name: </td>
    <td id=\"left\"><input size=\"50\"   maxlength=\"50\" type=\"text\" name=\"name\" value=\"".$dbusername."\"></input></td>
</tr>
<tr>
    <td id=\"right\"></td>
    <td id=\"left\"></td>
</tr>
<tr>
    <td id=\"right\">Surname: </td>
    <td id=\"left\"><input size=\"50\"   maxlength=\"50\" type=\"text\" name=\"surname\" value=\"".$dbusersurname."\"></input></td>
</tr>
<tr>
    <td id=\"right\"></td>
    <td id=\"left\"></td>
</tr>
<tr>
    <td id=\"right\">Date of Birth: </td>
    <td id=\"left\"><input size=\"50\"   maxlength=\"50\" type=\"text\" name=\"dateofbirth\" id=\"dateofbirth\" value=\"".$dbuserdateofbirth."\"></input></td>
</tr>
<td id=\"left\"><input size=\"50\"  type=\"button\" id=\"button\" name=\"btnsubmit\" onClick=\"function1();\"  value=\"                 Save                  \"/></td>

And here is the line in the JavaScript file where I get the error:

name            :   document.userForm.name.value,
surname         :   document.userForm.surname.value,
title           :   document.userForm.title.value,

only name and title has a type of string, all the other fields are undefined. This is extremely weird for me because I use this exact code all over my project and it works fine.

Answer 1

The way you are trying to do this is

• considered obsolete for god knows how long and
• not cross-browser (but I'm not sure)

Better way would be to get the elements using getElementById :

name : document.getElementById('surname').value

Don't forget to assign id attributes to the form, eg

<input name=\"surname\" id='surname' ...>

Refer to getElementById MDN documentation for details.

Answer 2

There is some problem with adding \\ before " due to this you are getting error, otherwise it is working fine look for below jsfiddle

http://jsfiddle.net/YVf3D/