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
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Validate--dropdown menu lists--no selection made

    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>

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    <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>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    validate multi dropdown boxes

    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.

  • #4
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Try this, give each of your selects a descriptive title so it can be told to your user which field needs attention.

    Code:
    <!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
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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