[SOLVED] Can't figure out what's wrong with my code...

LostinSchool · April 16, 2009

I wrote this code for a hw assignment- its a simple submission form for a website. But I tried to include window alerts for unanswerd fields in the form, but that doesn't show up... and when it's submitted nothing happens. It goes to my link "FormProcessor.html" but it doesn't summarize the info like it's supposed to. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Registration Form</title>

<meta http-equiv="content-type" content="text/html;

charset=iso-8859-1" />

<link rel="stylesheet" href="js_styles.css" type="text/css" />

<script type="text/javascript">

/* <![CDATA[ */

function checkForNumber(fieldValue) {

var numberCheck = isNaN(fieldValue);

if (numberCheck == true) {

window.alert("You must enter a numeric value!");

return false;

}

function confirmPassword() {

if (document.forms[0].password_confirm.value != document.forms[0].password.value) {

window.alert("You did not enter the same password!");

document.forms[0].password.focus();

}

function confirmSubmit() {

if (document.forms[0].name.value == ""

|| document.forms[0].address.value == ""

|| document.forms[0].city.value == ""

|| document.forms[0].state.value == ""

|| document.forms[0].zip.value == ""

|| document.forms[0].email.value == ""

|| document.forms[0].telephone.value == "") {

window.alert("You must enter your personal information.");

return false;

}

else

}

return true;

}

function confirmReset() {

var resetForm = window.confirm("Are you sure you want to reset the form?");

if (resetForm == true)

return true;

return false;

}

/* ]]> */

</script>

</head>

<body>

<h1>Registration Form</h1>

<form action="FormProcessor.html" method="post"

enctype="application/x-www-form-urlencoded"

onsubmit="return confirmSubmit();"

onreset="return confirmReset();">

<table border="2" cellpadding="1" cellspacing="2">

<tr><th colspan="20"><h2>Personal Information</h2>

</th>

</tr>

<tr>

<td><h3>Name:</h3></td>

<td><input type="text" name="name" size="50" value="Enter your name" onfocus="this.value = '';" /></td>

</tr>

<tr>

<td><h3>Address:</h3></td>

<td><input type="text" name="address" size="50" value="Enter your address" onfocus="this.value = '';" /></td>

</tr>

<tr>

<td><h3>City:</h3></td>

<td><input type="text" name="city" size="50" value="Enter your city" onfocus="this.value = '';" /></td>

</tr>

<tr>

<td><h3>State:</h3></td>

<td><input type="text" name="state" size="2" maxlength="2" /></td>

</tr>

<tr>

<td><h3>Zip Code:</h3></td>

<td><input type="text" name="zip" size="5" maxlength="5" onchange="return checkForNumber(zip.value);"/></td>

</tr>

<tr>

<td><h3>Email Address:</h3></td>

<td>

<input type="text" name="email" size="50" value="Enter your email address." onfocus="this.value = '';"/>

</td>

</tr>

<tr>

<td><h3>Telephone:</h3></td>

<td>

<input type="text" name="telephone" size="10" maxlength="10" onchange="return checkForNumber(telephone.value);"/>

</td>

</tr>

</table>

<table border="1" cellpadding="1" cellspacing="2">

<tr>

<th colspan="5">

<h2>Security Information</h2>

</th>

</tr>

<tr>

<td><h3>Password:</h3></td>

<td><input type="password" name="pass" /></td>

</tr>

<tr>

<td><h3>Password (Confirm):</h3></td>

<td><input type="password" name="password" onblur="confirmPassword();" /></td>

</tr>

<tr>

<td><h3>Security Question:</h3></td>

<td>

<select name="question">

<option>Please select a security question:</option>

<option>What is your mother's maiden name?</option>

<option>What is the name of your pet?</option>

<option>What is your favorite color?</option>

</select>

</td>

</tr>

<tr>

<td><h3>Security Answer:</h3></td>

<td><input type="text" name="telephone" value="Enter your answer" onfocus="this.value = '';"/></td>

</tr>

</table>

<table border="1" cellpadding="1" cellspacing="2">

<tr>

<th colspan="5">

<h2>Preferences</h2>

</th>

</tr>

<tr>

<td><h3>Would you like to recieve special email offers and coupons?</h3>

<input type="radio" name="offers" value="Yes" />Yes

<input type="radio" name="offers" value="No" />No

</td>

</tr>

<tr>

<td><h3>Interests:</h3>

<p>Let us know what your interests are (choose all that apply): </p>

<input type="checkbox" name="interests" value="entertainment" />Entertainment<br />

<input type="checkbox" name="interests" value="business" />Business<br />

<input type="checkbox" name="interests" value="shopping" />Shopping<br />

<input type="checkbox" name="interests" value="technology" />Technology<br />

<input type="checkbox" name="interests" value="healthfitness" />Health and Fitness<br />

<input type="checkbox" name="interests" value="sports" />Sports<br />

<input type="checkbox" name="interests" value="music" />Music<br />

<input type="checkbox" name="interests" value="currentevents" />Current Events<br />

<input type="checkbox" name="interests" value="food" />Food and Drink<br />

<input type="checkbox" name="interests" value="travel" />Travel<br />

<input type="checkbox" name="interests" value="outdoors" />Outdoors<br />

<input type="checkbox" name="interests" value="fashion" />Fashion<br />

<input type="checkbox" name="interests" value="art" />Art<br />

<input type="checkbox" name="interests" value="pets" />Pets<br />

<input type="checkbox" name="interests" value="other" />Other

<br />

<input type="text" name="other" size="80" value="Please specify other interests that are not included." onfocus="this.value = '';"/>

</td>

</tr>

</table>

<p>

<input type="submit" name="submit" value="Submit" onclick=""/>

<input type="reset" name="reset" value="Reset" onclick="confirmReset()" />

</p>

</form>

</body>

</html>

Help would be much appreciated!

Psycho · April 16, 2009

If you check the errors produced, you shoudl have enough info to determine the problems:

First error:

Line: 37
Error: Syntax Error

There is a closing bracket after the else, but no opening bracket. Just remove the closign bracket on line 38/

36   }
37   else
38   }
39   return true;

Second error:

Line: 46
Error: Syntax Error

There's a closing bracket on line 46 with no corresponding opening bracket. Remove it.

41 function confirmReset() {
42      var resetForm = window.confirm("Are you sure you want to reset the form?");
43      if (resetForm == true)
44            return true;
45      return false;
46    }
47 }

That will get your validation working (didn't test it all). As to the problem with your FormProcessor.html page, that page would need to have server-side scripting in order to access the POST data. As far as I know you can't access that data directly with HTML/JavaScript code.

Also, here's a tip - don't create unneeded variables. No need to assign a value to a variable to use it just once.

This function

function checkForNumber(fieldValue) {
     var numberCheck = isNaN(fieldValue);
     if (numberCheck == true) {
           window.alert("You must enter a numeric value!");
           return false;
     }
}

Could have been written simply as this

function checkForNumber(fieldValue)
{
    if (isNaN(fieldValue))
    {
         window.alert("You must enter a numeric value!");
    }
    return (!isNaN(fieldValue));
}

Then if you need to reference something many times, then you should create a variable. I would have written this

function confirmSubmit()
{
    if (document.forms[0].name.value == ""
        || document.forms[0].address.value == ""
        || document.forms[0].city.value == ""
        || document.forms[0].state.value == ""
        || document.forms[0].zip.value == ""
        || document.forms[0].email.value == ""
        || document.forms[0].telephone.value == "")
    {
        window.alert("You must enter your personal information.");
        return false;
    }
    else
    {
        return true;
    }
}

Like this

function confirmSubmit()
{
    var df = document.forms[0];

    if (!df.name.value || !df.address.value ||
        !df.city.value || !df.state.value   ||
        !df.zip.value  || !df.email.value   ||
        !df.telephone.value)
    {
        window.alert("You must enter your personal information.");
        return false;
    }
    return true;
}

LostinSchool · April 16, 2009

wow thanks...

did you use the W3c validator? b/c when I used that everything validated just fine (it didn't list any errors)

LostinSchool · April 16, 2009

Also this isn't supposed to use server side scripting. But the window alerts should work for items that are not filled out- for some reason they don't. I pretty much copied and modified an example right from our text book and that one worked so I don't know why mine wont...

LostinSchool · April 16, 2009

omg i got it to work! 1 damm out of place bracket that I just caught. Thanks you extremely helpful!!!

Psycho · April 16, 2009

Please mark topic as solved

Sign In

[SOLVED] Can't figure out what's wrong with my code...

Recommended Posts

LostinSchool

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

LostinSchool

Link to comment

Share on other sites

LostinSchool

Link to comment

Share on other sites

LostinSchool

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information