Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Form

  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry Form

    Hi everyone... I'm new to JavaScript and I haven't been doing too badly in a class up to this point, but I've ran into an issue with the latest assignment, which is due tomorrow evening. On top of that, my dad is terminally ill and is expected to pass in a couple of days. It's been a rough one.. I was up late trying to get this form to work, and here I am again... I did manage to get the password to check for a match, but that's about all so far. I'm supposed to leave all the 'names' the same on the form, such as 'cmdReset' etc which is likely why I'm confused. We had a start file to use and we just have to fill in the code. Can anyone lead me in the right direction? I'm desperate here.. Here is my code:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Chapter 5 Registration Form</title>
    <meta charset="utf-8">
    <script type="text/javascript">
    /* <![CDATA[ */
    function confirmtxtPassword1() {
    if (document.forms[0].txtPassword2.value != document.forms[0].txtPassword1.value) {
    	    window.alert("You did not enter the same password!");
            document.forms[0].txtPassword1.focus();
         }
    }
    function confirmcmdSubmit() {
    	if (document.forms[0].txtName.value == "" || document.forms[0].txtName.value == "Enter your name") {
    		 window.alert("You must enter your name.");
    		 return false;
    	}
    	if (document.forms[0].txtEmail.value == "" || document.forms[0].txtEmail.value == "Enter your e-mail address") {
    		 window.alert("You must enter your e-mail address.");
    		 return false;
    	}
    	if (document.forms[0].txtPassword1.value == ""
    		 || document.forms[0].txtpassword2.value == "") {
    		 window.alert("You must enter a password.");
    		 return false;
    	}
    	 if (document.forms[0].txtQuestion.value == "none" ) {
    		 window.alert("You must select a challenge question.");
    		 return false;
    	}
    	 if (document.forms[0].txtAnswer.value == "" ) {
    		 window.alert("You must enter an answer to the challenge question.");
    		 return false;
    	}
    
    	var radJunkMail = false;
    	for (var i=0; i<2; ++i) {
    		 if (document.forms[0].radJunkMail[i].checked == true) {
    			   radJunkMail = true;
    			   break;
    		 }
    	}
    	if (radJunkMail != true) {
    		 window.alert("You must choose whether to receive special offers.");
    		 return false;
    	}
    
    	var interests = false;
    	for (var i=0; i<5; ++i) {
    		 if (document.forms[0].interests[i].checked == true) {
    			   interests = true;
    			   break;
    		 }
    	}
    	if (interests != true) {
    		 window.alert("You must choose at lease one area of interest.");
    		 return false;
    	}
    	return true;
    }
    function confirmReset() {
         var cmdReset = window.confirm("Are you sure you want to reset the form?");
         if (cmdReset == true)
               return true;
         return false;
    }
    /* ]]> */
    </script>
        <style>
    	fieldset {
    		width: 300px;
    	}
    	
    	input[type=checkbox] {
    		margin-left:20px;
    	}
    	</style>
        
    </head>
    
    <body>
    
    <h2>CSIS 228 Registration Form</h2>
    <form name="frmRegister" method="post" action="http://www.markmurtha.com/csis128/readform.asp"
    onSubmit="return confirmcmdSubmit();" onreset="return confirmcmdReset();" >
    <fieldset>
    	<legend>Personal Information</legend>
    	Name:<br>
    	<input type="text" name="txtName" size="20" maxlength="25" value="Enter your name" onclick="this.value=''">
    	<br>
    	E-Mail Address:<br>
    	<input type="text" name="txtEmail" size="25" maxlength="35" value="Enter your e-mail address" onclick="this.value=''">
    	<br>
    </fieldset>
    <fieldset>
    	<legend>Security Information</legend>
    	Password:<br>
        <input type="password" name="txtPassword1" size="20" maxlength="20" onchange="ensuretxtPassword2();">
    	<br>
        Confirm Password:<br>
        <input type="password" name="txtPassword2" size="20" maxlength="20" onBlur="confirmtxtPassword1();">
    	<br>
        Security Question:
    	<select name="txtQuestion">
        	<option value="">Select a security question:</option>
        	<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
            <option value="What is the name of your pet?">What is the name of your pet?</option>
            <option value="What is your favorite color?">What is your favorite color?</option>
            <option value="What is the meaning of life?">What is the meaning of life?</option>
        </select>
        <br>
        Security Answer:<br>
        <input type="text" name="txtAnswer" size="20" maxlength="30">
    </fieldset>
    <fieldset>
    	<legend>Preferences</legend>
    	<input type="radio" name="radJunkMail" value="Yes"> Send me amazing offers by e-mail!<br>
        <input type="radio" name="radJunkMail" value="No"> I get enough junk mail already. No thanks!<br>
    	<br>
        Choose your interest areas:
        <br>
        <input type="checkbox" name="interests" value="chkEntertainment"> Entertainment<br>
        <input type="checkbox" name="interests" value="chkBusiness"> Business<br>
        <input type="checkbox" name="interests" value="chkShopping"> Shopping<br>
        <input type="checkbox" name="interests" value="chkComputers"> Computers<br>
        <input type="checkbox" name="interests" value="chkSpace"> Space Travel<br>
        <br>
        <input type="button" name="cmdSubmit" value="Submit Registration"> <input type="button" name="cmdReset" value="Reset Form">
    </fieldset>
    </form>
    </body>
    
    </html>
    Last edited by VIPStephan; 03-03-2013 at 10:19 AM. Reason: added code BB tags

  • #2
    New Coder
    Join Date
    Mar 2013
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I now have all but the last couple fields validating I can't get anything to validate starting with the security question. Here is the updated code in case anyone can help. It's likely something really simple...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Chapter 5 Registration Form</title>
    <meta charset="utf-8">
    <script type="text/javascript">
    /* <![CDATA[ */
    function confirmtxtPassword1() {
    if (document.forms[0].txtPassword2.value != document.forms[0].txtPassword1.value) {
    	    window.alert("You did not enter the same password!");
            document.forms[0].txtPassword1.focus();
         }
    }
    function confirmcmdSubmit() {
    	if (document.forms[0].txtName.value == "" || document.forms[0].txtName.value == "Enter your name") {
    		 window.alert("You must enter your name.");
    		 return false;
    	}
    	if (document.forms[0].txtEmail.value == "" || document.forms[0].txtEmail.value == "Enter your e-mail address") {
    		 window.alert("You must enter your e-mail address.");
    		 return false;
    	}
    	if (document.forms[0].txtPassword1.value == ""
    		 || document.forms[0].txtpassword2.value == "") {
    		 window.alert("You must enter a password.");
    		 return false;
    	}
    	 if (document.forms[0].txtQuestion.value == "" ) {
    		 window.alert("You must select a challenge question.");
    		 return false;
    	}
    	 if (document.forms[0].txtAnswer.value == "" ) {
    		 window.alert("You must enter an answer to the challenge question!");
    		 return false;
    	}
    
    	var radJunkMail = false;
    	for (var i=0; i<2; ++i) {
    		 if (document.forms[0].radJunkMail[i].checked == true) {
    			   radJunkMail = true;
    			   break;
    		 }
    	}
    	if (radJunkMail != true) {
    		 window.alert("You must choose special offers - surely you have a hobby!");
    		 return false;
    	}
    
    	var interests = false;
    	for (var i=0; i<5; ++i) {
    		 if (document.forms[0].interests[i].checked == true) {
    			   interests = true;
    			   break;
    		 }
    	}
    	if (interests != true) {
    		 window.alert("You must choose at lease one area of interest.");
    		 return false;
    	}
    	return true;
    }
    function confirmcmdReset() {
         var resetForm = window.confirm("Are you sure you want to reset the form?");
         if (cmdReset == true)
               return true;
         return false;
    }
    /* ]]> */
    </script>
        <style>
    	fieldset {
    		width: 300px;
    	}
    	
    	input[type=checkbox] {
    		margin-left:20px;
    	}
    	</style>
        
    </head>
    
    <body>
    
    <h2>CSIS 228 Registration Form</h2>
    <form name="frmRegister" method="post" action="http://www.markmurtha.com/csis128/readform.asp"
    enctype="application/x-www-form-urlencoded"
    onsubmit="return confirmcmdSubmit();"
    onreset="return confirmcmdReset();">
    <fieldset>
    	<legend>Personal Information</legend>
    	Name:<br>
    	<input type="text" name="txtName" size="20" maxlength="25" value="Enter your name" onclick="this.value=''">
    	<br>
    	E-Mail Address:<br>
    	<input type="text" name="txtEmail" size="25" maxlength="35" value="Enter your e-mail address" onclick="this.value=''">
    	<br>
    </fieldset>
    <fieldset>
    	<legend>Security Information</legend>
    	Password:<br>
        <input type="password" name="txtPassword1" size="20" maxlength="20" onchange="ensuretxtPassword2();">
    	<br>
        Confirm Password:<br>
        <input type="password" name="txtPassword2" size="20" maxlength="20" onBlur="confirmtxtPassword1();">
    	<br>
        Security Question:
    	<select name="txtQuestion">
        	<option value="">Select a security question:</option>
        	<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
            <option value="What is the name of your pet?">What is the name of your pet?</option>
            <option value="What is your favorite color?">What is your favorite color?</option>
            <option value="What is the meaning of life?">What is the meaning of life?</option>
        </select>
        <br>
        Security Answer:<br>
        <input type="text" name="txtAnswer" size="20" maxlength="30">
    </fieldset>
    <fieldset>
    	<legend>Preferences</legend>
    	<input type="radio" name="radJunkMail" value="Yes"> Send me amazing offers by e-mail!<br>
        <input type="radio" name="radJunkMail" value="No"> I get enough junk mail already. No thanks!<br>
    	<br>
        Choose your interest areas:
        <br>
        <input type="checkbox" name="interests" value="chkEntertainment"> Entertainment<br>
        <input type="checkbox" name="interests" value="chkBusiness"> Business<br>
        <input type="checkbox" name="interests" value="chkShopping"> Shopping<br>
        <input type="checkbox" name="interests" value="chkComputers"> Computers<br>
        <input type="checkbox" name="interests" value="chkSpace"> Space Travel<br>
        <br>
        <input type="button" name="cmdSubmit" value="Submit Registration" onClick="confirmcmdSubmit()"> 
        <input type="button" name="cmdReset" value="Reset Form" onClick="confirmcmdReset()">
    </fieldset>
    </form>
    </body>
    
    </html>
    Last edited by VIPStephan; 03-03-2013 at 10:20 AM. Reason: added code BB tags

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,892
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    document.forms[0].txtName.value == ""

    Form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe.
    Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

    Assigning a name to a form is obsolete. Use an id instead. document.forms[0] is considered poor practice as if another form is added in front of this one then the script is broken. But it will doubtless do for the purposes of your assignment.

    Have you tried using your error console?

    Strip your code down - test the validation of one element at a time. Insert alerts at strategic points to inspect the values.

    Look for the typo in this line:-

    if (document.forms[0].txtPassword1.value == "" || document.forms[0].txtpassword2.value == "") {

    Learn from this that a very tiny mistake or typo can prevent your code form executing. Javascript is case-sensitive.
    Last edited by Philip M; 03-03-2013 at 10:45 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •