List box Validation

A

adam.lock

Hi

I have a form which has 10 list boxes on it, each with a select option
with values 0 to 3.
Once the user submits the form, I want to validate that only three of
the list boxes have been selected and the total value is equal to 6,
else they get an alert message.
The validation is performed on an asp page.

Would appreciate some help as I am lost with js!!

Cheers
Adam
 
L

Lee

(e-mail address removed) said:
Hi

I have a form which has 10 list boxes on it, each with a select option
with values 0 to 3.
Once the user submits the form, I want to validate that only three of
the list boxes have been selected and the total value is equal to 6,
else they get an alert message.
The validation is performed on an asp page.

Would appreciate some help as I am lost with js!!
Click to expand...

You should be more clear about your requirements.
Do you mean that *exactly* three of the Selection boxes should
have non-zero values, or that it should be no more than three?
Are they all "select-one"?
Are there any other Selection boxes in the same form?

Here's a solution based on my guesses:

<html>
<head>
<script type="text/javascript">
function validate(f) {
var selectCount=0;
var total=0;
for (var i=0;i<f.elements.length;i++) {
if ("select-one"==f.elements.type) {
if (f.elements.value > "0") {
selectCount++;
total+=+f.elements.value;
}
}
}
if (selectCount != 3 || total != 6 ) {
alert("Select 3, with a total of 6.\n" +
"You selected "+selectCount+
", with a total of "+total);
return false;
}
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
<select>
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select><br>
<select>
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select><br>
<select>
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select><br>
<select>
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select><br>
<input type="submit">
</form>
</body>
</html>
 
A

adam.lock

Hi

Thanks for the replies, and sorry about the ambiguity!
Code below, have removed the asp code from the top of the page. The
page posts to itself, updates and then redirects to the next page.

I need client side validation so a user only select 3 of the list boxes
and the combined total is equal to six, otherwise they get an alert
message.

Many Thanks
Adam:

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"
marginwidth="0" marginheight="0" link="#FFFFFF" vlink="#CCCCCC"
alink="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
height="100%">
<tr>
<td height="109" background="bg.jpg"><img src="logo.jpg"
width="830" height="109"></td>
</tr>
<tr align="center" valign="top">
<table width="50%" border="0" cellspacing="0" cellpadding="4">
Click to expand...
<tr>
<td colspan="2">Q30.


Please rank which of the following motivates you at work the most:<br>
Please rank the top 3 only - 1 being most important, 2<br>
being second most important and 3 being the third most
important.<br></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td> Money </td>
<td align="center"><select name="Q30Money" id="30Money "
onChange="javascript:limitOptions(this,3)">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td> Promotional prospects </td>
<td align="center"><select name="Q30Promotionalprospects"
id="30Promotional prospects"
onChange="javascript:limitOptions(this,3)">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>Job title/seniority</td>
<td align="center"><select name="Q30Jobtitle"
id="30Jobtitle" onChange="javascript:limitOptions(this,3)">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>Increased responsibility</td>
<td align="center"><select
name="Q30Increasedresponsibility" id="30Increased responsibility"
onChange="javascript:limitOptions(this,3)">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>Creativity of projects</td>
<td align="center"><select name="Q30Creativityofprojects"
id="30Creativity of projects">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>Personal development</td>
<td align="center"><select name="Q30Personaldevelopment"
id="30Personal development">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>Recognition from your peers</td>
<td align="center"><select
name="Q30Recognitionfromyourpeers" id="30Recognition from your peers">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>Recognition from your boss</td>
<td align="center"><select
name="Q30Recognitionfromyourboss" id="30Recognition from your boss">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>Recognition from your clients</td>
<td align="center"><select
name="Q30Recognitionfromyourclients" id="30Recognition from your
clients">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td> Training </td>
<td align="center"><select name="Q30Training"
id="30Training ">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td> Working environment </td>
<td align="center"><select name="Q30Workingenvironment"
id="30Working environment">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td> Variety of projects </td>
<td align="center"><select name="Q30Varietyofprojects"
id="30Variety of projects">
<option value="0" selected>Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Submit"
value="Next"></td>
</tr>
</table>
<input type="hidden" name="submit" value="1">
</form>
</td>
</tr>
</table>
</body>
</html>
 
A

adam.lock

Lee thanks for the script.

Works exactly as I needed.

Really appreciate your time and help on this.

Cheers
Adam
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Very Basic CC Validation Javascript 0
Jquery not triggering / acting as expected. 0
Survey details won't go through using php, ajax, Mysql 0
Limit selection in list Box 4
Multiple Select validation with jquery 3
validation 1
Validation 8
Form validation and combo boxes 2

Members online

No members online now.
Total: 31 (members: 0, guests: 31)
Robots: 347

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,065
Latest member
OrderGreenAcreCBD

Latest Threads

Top