Eric Brown Eric Brown - 26 days ago 15
Javascript Question

Cannot read property 'value' of undefined error in form

I have a Registration form that I am using that is based on the form template here. It was working just fine, but I needed it to also add First and Last Name and a Phone Number, so I changed it to this:

<form method="post" name="registration_form" action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>">
First Name: <input type='text' name='firstname' id='firstname' /><br>
Last Name: <input type='text' name='lastname' id='lastname' /><br>
Phone: <input type='tel' name='phone' id='phone' /><br>
Username: <input type='text' name='username' id='username' /><br>
Email: <input type="text" name="email" id="email" /><br>
Password: <input type="password"
name="password"
id="password"/><br>
Confirm password: <input type="password"
name="confirmpwd"
id="confirmpwd" /><br>
<input type="button"
value="Register"
onclick="return regformhash(this.form,
this.form.firstname,
this.form.lastname,
this.form.phone,
this.form.username,
this.form.email,
this.form.password,
this.form.confirmpwd);" />
</form>


I also had to tweak the Javascript form to accept the new values, which is now this:

function regformhash(form, uid, firstname, lastname, phone, username, email, password, confirmpwd) {
// Check each field has a value
if (uid.value == '' || firstname.value == '' || lastname.value == '' || phone.value == '' || email.value == '' || password.value == '' || confirmpwd.value == '') {
alert('You must provide all the requested details. Please try again');
return false;
}


I am now getting the "Cannot read property 'value' of undefined" error on both the Forms page and the Javascript page associated with the "confirmpwd" field. The field is not empty, and the name hasn't changed from the original template, the only thing that changed was that the First and Last Name and Phone was added to the form.

Answer

Two things, your function didn't match up. First, You are passing in 8 params, excluding a value for uid to a function expecting 9 inputs. Those values ultimately don't line up as you're expecting, thus, when the function is run, confirmpwd is undefined, and when you try to get a property of undefined, you get a "Cannot read property 'value' of undefined" error.

As uid wasn't in the form, and you also weren't validating username, I went ahead and assumed that you were trying to validate username and updated your function accordingly.

function regformhash(form, firstname, lastname, phone, username, email, password, confirmpwd) {
    // Check each field has a value
    if (username.value == '' || firstname.value == '' || lastname.value == '' || phone.value == '' || email.value == '' || password.value == '' || confirmpwd.value == '') {
        alert('You must provide all the requested details. Please try again');
    }
    return false;
}
<form method="post" name="registration_form" action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>">
    First Name: <input type='text' name='firstname' id='firstname' /><br>
    Last Name: <input type='text' name='lastname' id='lastname' /><br>
    Phone: <input type='tel' name='phone' id='phone' /><br>
    Username: <input type='text' name='username' id='username' /><br>
    Email: <input type="text" name="email" id="email" /><br>
    Password: <input type="password"
                        name="password" 
                        id="password"/><br>
    Confirm password: <input type="password" 
                                name="confirmpwd" 
                                id="confirmpwd" /><br>
    <input type="button" 
            value="Register" 
            onclick="return regformhash(this.form,
                            this.form.firstname,
                            this.form.lastname,
                            this.form.phone,
                            this.form.username,
                            this.form.email,
                            this.form.password,
                            this.form.confirmpwd);" /> 
</form>

Comments