...

View Full Version : Validate--dropdown menu lists--no selection made



ammweb
06-23-2008, 09:28 PM
How would you validate a page that had several drop down menus. When the submit button is submitted, and NO selection has been made?

See code below:
<html>
<head>

</head>
<body>

<table width="100%" height="500px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="600px" valign="top" bgcolor="#F5F0DD"><table width="100%" height="452" border="1" bgcolor="#BFD5EA">
<form action="remcardqueue.asp" method="post">
<input name="subject" type="hidden" value="AMM | Remembrance Card Package Order" />
<input name="MAILCODE" type="hidden" value="XXXX" />
<tr>
<td height="66" colspan="3"><div align="center"><font color="#006633" size="5">Remembrance Card Package Selection</font></div></td>
</tr>
<tr>
<td width="22%" height="66"><div align="center"><img src="images/cards/1111.jpg" alt="Association Standard Remembrance Card Package" border="0"><br />
<span class="smallfont">Click to view details</span></div></td>
<td width="58%" class="surveysmall"><p><b><font color="#006633">Association Standard Remembrance Card Package</font><font color="#006600">(One of each of the cards shown here)<br />
</font></b><span class="surveyfont"> X1111</span> </p> </td>
<td width="20%" class="surveysmall"><div align="right">

<select name="X1111" id="X1111">
<option value="0">0</option>
<option value="1">1</option>
</select></div></td>
</tr>
<tr>
<td height="58"><div align="center"><a href="http://www.amm.org/cards/cdpkg/d011.asp" target="_NewWin"><img src="images/cards/D011.jpg" alt="Baby Remembrance" width="30" height="45" border="0"><br />
<span class="smallfont">Click to view details</span></a></div></td>
<td class="surveysmall"><p><b><font color="#006633">Baby Remembrance Folder</font></b><br />
<span class="surveyfont">D011</span> </td>
<td class="surveysmall"><div align="right">

<select name="D011" id="D011">
<option value="0">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>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/dfp006.asp" target="_NewWin"><img src="images/cards/dfp006.jpg" alt="Family Prayer" width="32" height="45" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/dfp006.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><p><span class="surveysmall"><b><font color="#006633">Family Prayer Folder
</font></b><br />
</span><span class="surveyfont">DFP006</span>
</td>
<td><div align="right">

<select name="DFP006" id="DFP006">
<option value="0">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>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/dh215.asp" target="_NewWin"><img src="images/cards/DH215.jpg" alt="Healing Remembrance" width="30" height="41" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/dh215.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><span class="surveysmall"><b><font color="#006633">Healing Folder</font></b><br />
</span><span class="surveyfont">DH215</span> </td>
<td><div align="right">

<select name="DH215" id="DH215">
<option value="0">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>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/dh005.asp" target="_NewWin"><img src="images/cards/dh005.jpg" alt="Healing Remembrance" width="31" height="45" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/dh005.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><span class="surveysmall"><b><font color="#006633">Healing Folder</font></b><br />
</span><span class="surveyfont">DH005</span> </td>
<td><div align="right">

<select name="DH005" id="DH005">
<option value="0">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>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/dh106.asp" target="_NewWin"><img src="images/cards/dh106.jpg" alt="Healing Remembrance" width="30" height="42" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/dh106.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><span class="surveysmall"><b><font color="#006633">Healing Folder</font></b><br />
</span><span class="surveyfont">DH106</span> </td>
<td><div align="right">

<select name="DH106" id="DH106">
<option value="0">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>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/d3106.asp" target="_NewWin"><img src="images/cards/d3106.jpg" alt="Memorial Remembrance" width="32" height="45" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/d3106.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><span class="surveysmall"><b><font color="#006633">Memorial Remembrance Folder</font></b><br />
</span><span class="surveyfont">D3106</span> </td>
<td><div align="right">

<select name="D3106" id="D3106">
<option value="0">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>
</select></div></td>
</tr>
<tr bgcolor="f5f0dd">
<td colspan="4"><div align="center">
<p>&nbsp; </p>

<input type="submit" name="button" id="button" value="Create Your Card Package"/>
</div></td>
</tr>
</form>
</table>
</td>
</tr>
</table>

</body>
</html>

rangana
06-24-2008, 03:52 AM
<script type="text/javascript">
window.onload=function()
{
var df=document.forms[0];
df.onsubmit=function()
{
var opts=document.getElementsByTagName('select');
for(var i=0;i<opts.length;i++)
{
if(opts[i].value=='0')
{
alert('You need to choose at least one option');
return false;
}
else
return true;
}
return;
}
}
</script>

ammweb
06-24-2008, 04:51 PM
I tried adding your code to the code posted.

I got the error when nothing was selected, but I also got the error when I selected any of the list menu but the first one. If I selected the first one, the form submitted.

Thanks for your help so far.

Basscyst
06-24-2008, 10:46 PM
Try this, give each of your selects a descriptive title so it can be told to your user which field needs attention.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CF Help</title>
<script type="text/javascript">
window.onload=function(){
document.forms[0].onsubmit=function(){
return formValid(this);
}
}
function formValid(formObj){
var sel=formObj.getElementsByTagName('select');
var len=sel.length;
var msg = "The following fields still require selection:\n\r"
var flg=false;
for(var i=0;i<len;i++){
if(sel[i].selectedIndex==0){
msg += sel[i].getAttribute('title')+"\n\r";
flg=true;
}
}
if(flg){
alert(msg);
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form>
<select name="sel1" title="First Select">
<option>Select. . .</option>
<option>Something</option>
</select>
<select name="sel2" title="Second Select">
<option>Select. . .</option>
<option>Something</option>
</select>
<select name="sel3" title="Third Select">
<option>Select. . .</option>
<option>Something</option>
</select>
<select name="sel4" title="Fourth Select">
<option>Select. . .</option>
<option>Something</option>
</select>
<input type="submit" />
</form>
</body>
</html>


Basscyst



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum