New Topic/Question
Reply
I'm trying to create a form that can be validated by Javascript. In my code I am trying to make it so if a certain option is chosen it will prompt the user to fill in the comment below. I have gotten that far, however, I can not figure out how to make it so the comment box is read and stop prompting to fill it in. My code is posted below.
<html>
<head>
<title>Song Survey</title>
<script type="text/javascript">
//<![CDATA[
function saveInformation()
{
try{
// store the error messages.
var error = "";
//calculate 30 days in seconds for max-age of cookie
var maxAge = (60 * 60 * 24) * 30;
//Validate the first name, last name and email form input fields
// check for first name
if(document.getElementById("fname").value == "") {
error = error + "First Name is required.\n";
}
// check for last name
if(document.getElementById("age").value == "") {
error = error + "Age is Required.\n";
}
// check for email address
if(document.getElementById("email").value == "") {
error = error + "Email address is required.\n";
}
if(document.getElementById("song").value == "") {
error = error + "Must Choose a Song.\n";
}
if(document.getElementById("song").value =="Other"){
error = error + "Please fill in comment below!\n";
}
// validating the gender
if(document.getElementById("male").checked != true &&
document.getElementById("female").checked != true){
error=error+"Gender is required.\n"
}
// Validate the email address
if(document.getElementById("email").value != "") {
// regular expression for email address
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.getElementById("email").value;
if(reg.test(address) == false) {
error = error + "Valid email address is required.\n";
}
}
if(error == "") {
// save all the information in the cookie
document.cookie = "firstName=" + encodeURIComponent(document.getElementById("fname").value) + ";max-age=" + maxAge;
document.cookie = "age=" + encodeURIComponent(document.getElementById("age").value) + ";max-age=" + maxAge;
document.cookie = "email=" + encodeURIComponent(document.getElementById("email").value) + ";max-age=" + maxAge;
document.cookie = "song=" + encodeURIComponent(document.getElementById("song").value) + ";max-age=" + maxAge;
document.cookie = "comment=" + encodeURIComponent(document.getElementById("comment").value) + ";max-age=" + maxAge;
document.cookie = "gender=" + encodeURIComponent((document.getElementById("male").checked) ? "Male" : "Female") + ";max-age=" + maxAge;
// Alert the successful message
alert("Information saved successfully in the cookie");
}else {
alert(error);
}
} catch(ex) {
// catch block catches the error if there is any javascript error
alert("An error occurred!.\n" + "Error Name : " + ex.name + "\nError Message : " + ex.message);
}
}
//]]>
</script>
</head>
<body>
<p><strong>Informational Survey!</strong></p>
<p>All fields are mandatory.</p>
<form name="frmInfo" id="frmInfo">
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<td width="120"><strong>First Name:</strong></td>
<td><input type="text" id="fname" name="fname" size="30" /></td>
</tr>
<tr>
<td width="120"><strong>Age:</strong></td>
<td><input type="text" id="age" name="age" size="3" /></td>
</tr>
<tr>
<td width="120"><strong>Email Address:</strong></td>
<td><input type="text" id="email" name="email" size="30" /></td>
</tr>
<tr>
<td width="120"><strong>Favorite Song:</strong></td>
<td><select name="song" id="song">
<option value="">Select</option>
<option value="WalkTheLine">Walk the Line</option>
<option value="RingOfFire">Ring of Fire</option>
<option value="DaddySang">Daddy Sang Base</option>
<option value="Hurt">Hurt</option>
<option value="FiveFeet">Five Feet High and Rising</option>
<option value="Sue">Boy Named Sue</option>
<option value="BigRiver">Big River</option>
<option value="Cry">Cry! Cry! Cry!</option>
<option value="Carpenter">If I were a Carpenter</option>
<option value="Prison">Folsom Prison Blues</option>
<option value="Other">Other</option>
</select>
<div class="comment-form-field comment-textarea"><label for="comment">Other? Please elaborate</label>
<div id="comment-form-comment">
<textarea id="comment" name="comment">
</textarea></div>
</div>
</td>
</tr>
<tr>
<td width="120"><strong>Gender:</strong></td>
<td><input type="radio" id="male" name="gender" value="Male" />Male <input type="radio" id="female" name="gender" value="Female" />Female</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="save" value="Save Information" onclick="saveInformation ()" /></td>
</tr>
</table>
</form>
<p><strong>Click <a href="getInformation.html">here</a> to retrieve the information saved in the cookie</strong></p>
</body>
</html>
The portion of the Code that I am having issues with are:
if(document.getElementById("song").value == "") {
error = error + "Must Choose a Song.\n";
}
if(document.getElementById("song").value =="Other"){
error = error + "Please fill in comment below!\n";
}
The website is a Tribute to Johnny Cash, and I am trying to learn how to make the cookie work with all of the form data working properly, however, I am not having much luck.
If anyone has a Tutorial that will allow me to learn how to make the Javascript work, or any pointers on the logic behind the code needed to make it work would be appreciated.
Thank you so much.
MultiQuote
| 