I have five combo boxes. Each one has a different name, but the possible values for each are the same: 1-5. I would like to use Javascript to validate two things:
-
that each value is selected only once. For example, if the value of “cboCircle” is “1” then the value of “cboSquiggle” cannot be 1, and so on.
-
that each selected value is used (i.e. that 1, 2, 3, 4, and 5 have all been chosen.)
Essentially, these values are supposed to act as a ranking system for the combo boxes, in a rough sort of way…
Anyone know how I might be able to accomplish this?
NOTE: I’m new to JS. Thanks!
<head>
<script language="javascript">
function submitSurvey(recID)
{
var msg = "";
if ( (document.form.cboCircle.value=="0") ||
(document.form.cboSquiggle.value=="0") ||
(document.form.cboRectangle.value=="0") ||
(document.form.cboSquare.value=="0") ||
(document.form.cboTriangle.value=="0") )
{
msg += "Please select a value for each combo box.\n";
}
if (msg == "")
{
document.getElementById("txtRecID").value = recID;
form.action = "post.asp";
form.submit();
}
else
{
alert (msg);
}
}
</script>
</head>
<body>
<form name="form" id="form" method="post">
<table>
<table width="99%">
<tr>
<td width="29%" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center"><img name="circle" src="../images/circle.jpg" width="158" height="146" alt=""></p>
</td>
<td width="35%" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center"><img name="squiggle" src="../images/squiggle.jpg" width="204" height="155" alt=""></p>
</td>
<td width="36%" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center"><img name="rectangle" src="../images/rectangle.jpg" width="216" height="122" alt=""></p>
</td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center">
<select name="cboCircle" id="cboCircle">
<%
If RS("shapePrimary") = "Circle" Then
%>
<option value="1" selected>1</option>
<%
Else
%>
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<%
End If
%>
</select>
</p>
</td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center">
<select name="cboSquiggle" id="cboSquiggle">
<%
If RS("shapePrimary") = "Squiggle" Then
%>
<option value="1" selected>1</option>
<%
Else
%>
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<%
End If
%>
</select>
</p>
</td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center">
<select name="cboRectangle" id="cboRectangle">
<%
If RS("shapePrimary") = "Rectangle" Then
%>
<option value="1" selected>1</option>
<%
Else
%>
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<%
End If
%>
</select>
</p>
</td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center"><img name="square" src="../images/square.jpg" width="141" height="143" alt=""></p>
</td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center"><img src="../images/triangle.jpg" alt="" name="triangle" width="226" height="167" id="triangle2"></p>
</td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center">
<select name="cboSquare" id="cboSquare">
<%
If RS("shapePrimary") = "Square" Then
%>
<option value="1" selected>1</option>
<%
Else
%>
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<%
End If
%>
</select>
</p>
</td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<p align="center">
<select name="cboTriangle" id="cboTriangle">
<%
If RS("shapePrimary") = "Triangle" Then
%>
<option value="1" selected>1</option>
<%
Else
%>
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<%
End If
%>
</select>
</p>
</td>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
</tr>
</table>
<p> </p>
<table width="99%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" class="WebApps">
<tr>
<td width="100%">
<p align="left">
<input name="btnSubmit" type="button" class="button" id="btnSubmit" value="Submit Survey" onClick="submitSurvey('<%= RS("recID")%>');">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
I’m sure there are other (possibly simpler) ways to do this, but the above should work…
All it’s doing is keeping a record of whether something has already been selected, in
valsTakenand returning false if it’s already been taken or is 0Edit: original poster wants separate messages depending on selected/not selected. Try this:
Please note that this second example is probably not the best code – I’ve just done this as quickly as I could