Check Boxx!!!Urgent HELP!!

Question

Roses89 0 Junior Poster in Training

14 Years Ago

There are two basic things i need to get help with:
1. A selection from the list in question 3 can only be made if the user selected at least 1 check box in question

2. If the user enters a valid value in the question 5 text box then the script should automatically select the Yes
radio button in question 4. The amount entered in the text box must be numeric, not negative and not
greater than 1000.

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
   
<head>
  
<meta http-equiv="Content-Script-Type" content="text/javascript"/>


	<!--Styles-->
<style type="text/css">

 body
{
 font-family:verdana,Arial, Helvetica, sans-serif;
 color:#00CCFF;
 font-family:"Verdana";
 font-size:13px;
line-height:150%;
 margin-left:3em;
 }
 
 h1 
{
color:#00CCFF;
font-family:"Verdana";
 font-size:1cm;
line-height:150%;
 margin-left:3cm;
}

h2 
{
 color:#00CCFF;
font-family:"Verdana";
 font-size:16px;
 line-height:150%;
 margin-left:4cm;
 }

select
 {
 color:#6699FF;
 margin-left:20px;
 background:#E0E0E0;
 }

input
 {
 color:#6699FF;
 margin-left:20px;
 background:#E0E0E0;
 }
 

input[type="text"]
  {
  width:150px;
  margin-bottom:10px;
  border: 0px;
 }



input[type="submit"]
 {
 width:120px;
 margin-left:20px;
 border: 1px solid #808080;
  }
 

input[type="reset"]
 {
 width:120px;
 margin-left:5px;
 border: 1px solid #808080;
}

table
  {
   color:#00CCFF;
   font-family:"Verdana";
   font-size:13px;
  line-height:150%;
 }
 </style>



<title>TWA Prac Set 2 - Task 2</title>

</head>
  


 
<body>

	<h1>Get Me Fit Quick - Quick Member Survey</h1>
 	<p>Please take a minute to fill in the form below. We value your feedback - thanks</p>


<form method="post" id="f1" action="http://tl28serv.uws.edu.au/twainfo/form.asp" onsubmit="return validate(this);" >

				<!--Tick Boxes-->

<p>Q2. Which of our classes have you attended?</p>
 
<table>
 <tr>
  <td><input type="checkbox" name="classes" id="aerobics" value="aerobics" /><label for="aerobics"> Aerobics</label></td>
 </tr>
 

 <tr>
  <td><input type="checkbox" name="classes" id="boxing" value="boxing" /><label for="boxing"> Boxing</label></td>
 </tr>

 <tr>
  <td><input type="checkbox" name="classes" id="circuitclass" value="circuitclass"/><label for="circuitclass">Circuit Class</label></td>
 </tr>

 <tr>
 <td><input type="checkbox" name="classes" id="weighttraining" value="weighttraining"  /><label for="weighttraining">Weight Training</label></td>
  </tr>
</table>

  



		<!--Drop Down Menu-->

<p>Q3.Which of the above classes has been most beneficial for you?

	You can only choose one from the list:

<select name="class1" size="1">
 
 	<option value="PC" >--Please Choose--</option>
 
  	<option value="Aero" > Aerobics </option>

  	<option value="Box">Boxing</option>
 
  	<option value="CC">Circuit Class</option>
 
  	<option value="WT">Weight Training</option>
</select>
</p>

 		<!--Radio Buttons-->

<p>Q4.Do you think that you are recieving good value for money from your membership?</p>
 
<table>
 <tr>
 <td><input type="radio" name="Mem" id="Y" value="Y"/><label for="Y">Yes</label></td>
 </tr>
 <tr>
  <td><input type="radio" name="Mem" id="N" value="N" /><label for="N">No</label></td>
 </tr>
</table>


	<!--Text Box-->
<p>Q5.If you answered <b>YES</b> to the question above,how much more would you be willing to pay for your membership?
 
$ <input type="text" name="dollar" size="10" maxlength="7"/>
 </p>

<p>
<input type="submit" value="Finished Survey"/>
<input type="reset" value="Reset"/>
</p>


</form>
</body>
</html>

Thats my html and java code is:

function validate(form)
	{
	var booValid = true;
	var strErrorMessage = "";

	if( (! form.visits[0].checked) && (! form.visits[1].checked) && (! form.visits[2].checked) && (! form.visits[3].checked) && (! form.visits[4].checked) )

	{
	strErrorMessage += "You must answer Question 1 before submitting the form!\n";
	booValid=false;
	}

	if( ( form.visits[4].checked) && ( form.classes[0].checked) || ( form.classes[1].checked) || ( form.classes[2].checked) || ( form.classes[3].checked) )
	{
	strErrorMessage += "You cannot select any options in Question 2 if you have not visited since joining!\n";
	booValid=false;
	}


	if(!booValid)
	{
	alert(strErrorMessage);
	}
	return booValid;
	}

I need urgent help!!:S

javascript

Edited 14 Years Ago by Ezzaral because: Added code tags. Please use them to format any code that you post.

3 Contributors
3 Replies
163 Views
3 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Roses89

Airshow 416 WiFi Lounge Lizard

14 Years Ago

I think I must be addicted to form scripting.

1. A selection from the list in question 3 can only be made if the user selected at least one check box in question

Simple.

2. If the user enters a valid value in the question 5 text box then the script should automatically select the Yes radio button in question 4. The amount entered in the text box must be numeric, not negative and not greater than 1000.

Javascript could do this but it's not good form design:

The response to any question should not affect an earlier question
The response to any question should never automatically determine the response to any other question, earler or later
The rules could tie the interface up such that Q4 could not be reverted to No without first clearing the answer to Q5.

I think it's better to :

enable/disable Q5 in response to the answer to Q4.
validate the reposnse to Q5 before the form is submitted.

We can also validate a whole bunch of other things and do a general tidy up of the CSS and HTML.

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<title>TWA Prac Set 2 - Task 2</title>
<style type="text/css">
body {
  margin-left: 3em;
  color: #00CCFF;
  font-family: verdana,arial,helvetica,sans-serif;
  font-size: 13px;
  line-height: 150%;
}
form {
  margin: 0;
}
h1 {
  font-size: 1cm;
  line-height: 150%;
}
h2 {
  font-size: 16px;
  line-height: 150%;
  margin-left: 4cm;
}
p {
  margin: 0;
}
.section {
  margin: 12px 0 0 0;
}
.question {
  margin: 0;
}
.response {
  margin: 6px 0 0 20px;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  margin: 0 0 2px 0;
}
select {
  color: #6699FF;
}
input {
  color: #6699FF;
}
</style>

<script>
onload = function() {
	var f = document.forms['survey'];
	var clss1 = document.getElementById('clss1');
	var clss1_items = clss1.getElementsByTagName('input');
	var mem_y = document.getElementById('mem_y');
	var mem_n = document.getElementById('mem_n');
	var colors = {
		enabled: '#FFF',
		disabled: '#c0c0c0'
	};

	var setForm = function(){
		var i;
		//1. Set Q3 in respose to Q2
		f.clss2.disabled = true;
		f.clss2.style.backgroundColor = colors.disabled;
		for(i=0; i<clss1_items.length; i++ ) {
			if(clss1_items[i].checked) {
				f.clss2.disabled = false;
				f.clss2.style.backgroundColor = colors.enabled;
				break;
			}
		}
		//2. Set Q5 in respose to Q4
		f.dollar.disabled = (mem_y.checked) ? false : true;
		f.dollar.style.backgroundColor = (mem_y.checked) ? colors.enabled : colors.disabled;
	};

	//Attach event handlers to form elements
	for(i=0; i<f.length; i++) {
		var el = f[i];
		if(el.tagName.toLowerCase() == 'input' && el.type == 'text') {
			el.onblur = setForm;
		}
		else if(el.tagName.toLowerCase() == 'input' && (el.type == 'radio' || el.type == 'checkbox')) {
			el.onclick = setForm;
		}
		else if(el.tagName.toLowerCase() == 'select') {
			el.onchange = setForm;
		}
	}
	setForm();//initialise form.
	
	f.onsubmit = function() {
		if(this.clss2.disabled) {
			alert('Q2: At least one class must be selected from the list');
			return false;
		}
		if(this.clss2[this.clss2.selectedIndex].value == 'PC') {
			alert('Q3: A class must be selected from the menu');
			return false;
		}
		if(mem_y.checked == false && mem_n.checked == false) {
			alert('Q4: Select Yes or No');
			return false;
		}

		//The amount entered in the text box must be numeric, not negative and not greater than 1000.
		if(!this.dollar.disabled){
			val = this.dollar.value;
			if(val == '' || Number(val).toString() !== val || Number(val) < 0 || Number(val) > 1000) {
				alert('Q5: Please enter a number from zero to 1000');
				return false;
			}
		}
		return true;
	}
};
</script>
</head>
  
<body>

<h1>Get Me Fit Quick - Quick Member Survey</h1>

<p>Please take a minute to fill in the form below. We value your feedback - thanks</p>

<form name="survey" method="post" id="f1" action="http://tl28serv.uws.edu.au/twainfo/form.asp">

<!--Tick Boxes-->
<div class="section">
	<div class="question">
		Q2. Which of our classes have you attended?
	</div>
	<div class="response">
		<ul id="clss1">
		<li><input type="checkbox" name="clss1_1" id="clss1_1" value="aerobics" />&nbsp;<label for="clss1_1">Aerobics</label></li>
		<li><input type="checkbox" name="clss1_2" id="clss1_2" value="boxing" />&nbsp;<label for="clss1_2">Boxing</label></li>
		<li><input type="checkbox" name="clss1_3" id="clss1_3" value="circuitclass"/>&nbsp;<label for="clss1_3">Circuit Class</label></li>
		<li><input type="checkbox" name="clss1_4" id="clss1_4" value="weighttraining"  />&nbsp;<label for="clss1_4">Weight Training</label></li>
		</ul>
	</div>
</div>

<!--Drop Down Menu-->
<div class="section">
	<div class="question">
		Q3. Which of the above classes has been most beneficial for you? You can only choose one from the list:
	</div>
	<div class="response">
		<select name="clss2" size="1">
		 	<option value="PC">--Please Choose--</option>
		  	<option value="Aero">Aerobics </option>
		  	<option value="Box">Boxing</option>
		  	<option value="CC">Circuit Class</option>
		  	<option value="WT">Weight Training</option>
		</select>
	</div>
</div>

<!--Radio Buttons-->
<div class="section">
	<div class="question">
		Q4. Do you think that you are recieving good value for money from your membership?
	</div>
	<div class="response">
		<ul>
		<li><input type="radio" name="Mem" id="mem_y" value="Y"/>&nbsp;<label for="mem_y">Yes</label></li>
		<li><input type="radio" name="Mem" id="mem_n" value="N" />&nbsp;<label for="mem_n">No</label></li>
		</ul>
	</div>
</div>

<!--Text Box-->
<div class="section">
	<div class="question">
		Q5. If you answered <b>YES</b> to the question above, how much more would you be willing to pay for your membership?
	</div>
	<div class="response">
		$&nbsp;<input type="text" name="dollar" size="10" maxlength="7" /> ???? per session/day/month/year ????
	</div>
</div>

<div class="section">
	<div class="response">
		<input type="submit" value="Finished Survey" />
		<input type="reset" value="Reset" />
	</div>
</div>

</form>
</body>
</html>

It's best not to use grey as a general background color for input elements because some browsers use grey to indicate disabled.

Avoid id="class..." and name="class..." . "Class" is a reserved word in Javascript, which can choke on it. When necessary, I use "clss".

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

haute34 0 Newbie Poster · Answer 1 · 2010-04-16T17:25:39+00:00

My system stuck... I have to reinstall xampp. I will get back to you when done...

Roses89 0 Junior Poster in Training · Answer 2 · 2010-04-18T19:01:03+00:00

Omg!Thanks Guys!!:D I got it done at the end!Thanks for ur help!