7 Replies - 1193 Views - Last Post: 22 October 2011 - 01:42 AM

#1 makaylaa21  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 09-October 10

If/Else Statement Question

Posted 20 October 2011 - 09:21 PM

Hello,
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.

Is This A Good Question/Topic? 0
  • +

Replies To: If/Else Statement Question

#2 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: If/Else Statement Question

Posted 20 October 2011 - 11:34 PM

Why not try something like this:

      
if(document.getElementById("song").value == "") { 
    error = error + "Must Choose a Song.\n";
}else{
    error = error + "Please fill in comment below!\n";
}



I think this is what you meant by your question.
Was This Post Helpful? 0
  • +
  • -

#3 makaylaa21  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 09-October 10

Re: If/Else Statement Question

Posted 21 October 2011 - 03:51 AM

Thank kind of helps but it is still giving me the same problem I was having before. See with the comment field below the Javascript isn't reading that there is anything typed in that field. Is there something else I should add to the code, for it to register my comment field?
<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>


Above is my textarea field.
What would be the best way to fix this?
Was This Post Helpful? 0
  • +
  • -

#4 satis  Icon User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: If/Else Statement Question

Posted 21 October 2011 - 05:39 AM

Well... I believe you're saying your javascript isn't checking that comment textarea, but yea, that's because it's not programmed to. Here's a re-post of your validation code
        //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 exp<b></b>ression 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";
			 }
		 }

Nowhere in there do you ever check the comment textarea. I'm guessing you're looking to add a line like:
		if(document.getElementById('comment').value == ''){
			error += 'You must leave a comment.\n';
		}


I'm having difficulty determining what exactly it is you're trying to accomplish... maybe clarify that a bit?

This post has been edited by satis: 21 October 2011 - 05:40 AM

Was This Post Helpful? 1
  • +
  • -

#5 makaylaa21  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 09-October 10

Re: If/Else Statement Question

Posted 21 October 2011 - 08:40 PM

Sorry for the confusion. My Question is first how to make the question linked to the comment prompt to fill in the comment, but also have the comment be validated. Because at the moment in my code, I have it so it will prompt for the comment to be filled in, however, when testing the page in a browser it will not read that the comment is filled in to begin with, it just prompts the user to keep filling it in, and I'm not sure how to link that question to the comment field so it will only prompt the user to type if they choose Other, but also allow the form to be submitted.
Was This Post Helpful? 0
  • +
  • -

#6 makaylaa21  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 09-October 10

Re: If/Else Statement Question

Posted 21 October 2011 - 09:27 PM

The Code listed below is basically stating that if there is no value checked in the question to prompt them to choose one, the second one is saying that if Other is checked to prompt for the comment box, the third one I want to make sure it is not empty if Other is checked, however, I can get it to prompt to ask that. But when testing the site, it will not stop prompting even if something is typed in the comment box.
if(document.getElementById("song").value == "") { 
    error = error + "Must Choose a Song.\n";
}else{
	document.getElementById("song").value == "Other")
    error = error + "Please fill in comment below!\n";
}
while(document.getElementById("comment").value == ""){
	error += 'You must leave a comment.\n';
}



And I'm looking for it to do something like this. However, I cannot figure out a way to make it work. I'm not very fluent in Javascript...but I think this might show the jist of what I'm trying to do. Is there a way to link them like that? Or a way to make them work simultaneously together if they can't be linked as shown above?

This post has been edited by makaylaa21: 21 October 2011 - 09:31 PM

Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,591
  • Joined: 08-June 10

Re: If/Else Statement Question

Posted 22 October 2011 - 01:04 AM

something like
if ("Other" == document.getElementById("song").value && !document.getElementById("comment").value) {
    // no other song given
}

Was This Post Helpful? 0
  • +
  • -

#8 makaylaa21  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 09-October 10

Re: If/Else Statement Question

Posted 22 October 2011 - 01:42 AM

It worked! Thank you so much!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1