Question

I have a form that I’m trying to get information from the user when a button is pressed. I’m using a javascript function to pass the values to my script. This works great in Chrome and IE9 but for some reason Firefox sees the input elements as undefined. Here’s the HTML:

<div id="leftDiv">
<br>
<dl class="loginForm">
    <dt><label for="usernameField">Username:</label></dt>
    <dd><input type="text" id="usernameField" name="usernameField" value=""/></dd>
    <dt><label for="passwordField">Password:</label></dt>
    <dd><input type="password" id="passwordField" name="passwordField" value="" /></dd>
    <dt><label for="remember">Save info:</label></dt>
    <dd><input type="checkbox" id="remember" name="remember"/></dd>
    <dt><button type="button" onclick="javascript:tryLogin(usernameField.value, passwordField.value, remember.checked)"> Login</button> </dt><dd></dl>
</div>

I’ve ran the site through the W3c Online Validation and it passes so I don’t think that’s a problem.

Answer 1

You need to make sure the all the inputs are wrapped in a <form> element to use the following code javascript:tryLogin(usernameField.value, passwordField.value, remember.checked)

OR

You could reference using document.getElementById() such as:

 javascript:tryLogin(document.getElementById('usernameField').value, document.getElementById('passwordField').value, document.getElementById('remember').checked)`