SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot ericgtr's Avatar
    Join Date
    Nov 2005
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validate Javascript Dropdown

    Hi all,

    I have this javascript that I am using to show hidden rows upon selection. All works great but what I need to do is validate that one of these are selected. Any advice with this would be appreciated.

    HTML Code:
    <html>
    	<head>
    		<title>Script Demo Gops</title>
    		<style>
    			#d1, #d2, #d3{display:none;}
    		</style>
     
    		<script language="javascript">
    			var oldD="";
    			function show(o){
    				if(oldD!="") oldD.style.display='none';
    				if(o.selectedIndex>0){
    					var d=document.getElementById(o[o.selectedIndex].value);
    					d.style.display='block';
    					oldD=d;
    				}
    			}
    		</script>
          </head>
    <body>
    	<select onchange="show(this)">
    		<option>--Choose--</option>
    		<option value="d1">Layer 1</option>
    		<option value="d2">Layer 2</option>
    		<option value="d3">Layer 3</option>
    	</select>
     
    	<div id="d1">
    		this is a div1<br>
    		this is a div1<br>
    		this is a div1<br>
    		this is a div1<br>
    		this is a div1<br>
    	</div>
    	<div id="d2">
    		this is a div2<br>
    		this is a div2<br>
    		this is a div2<br>
    		this is a div2<br>
    		this is a div2<br>
    	</div>
    	<div id="d3">
    		this is a div3<br>
    		this is a div3<br>
    		this is a div3<br>
    		this is a div3<br>
    		this is a div3<br>
    	</div>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    When you submit it, you would have a validation function that runs onsubmit, and checks that the selectedIndex of the select element is greater than 0. If it is 0 then the validation function should return false to prevent the form from being submitted.

    You haven't given the select a name though, so it's not going to submit anything, so the first step is to name the select element.

    Code html4strict:
    <form id="myForm" action="process.php">
    	...
    	<select name="layer">
    		<option>--Choose--</option>
    		<option value="d1">Layer 1</option>
    		<option value="d2">Layer 2</option>
    		<option value="d3">Layer 3</option>
    	</select>
    	...
    </form>

    I'll use javascript to attach the onchange event to the form. You can also do that for the onchange event on the select element with this:

    Code javascript:
    document.getElementById('myForm').elements.layer = show;

    The onsubmit event will be similar, so we'll use a variable to access the form instead

    Code javascript:
    var frm = document.getElementById('myForm');
    frm.onchange = validate;
    frm.elements.layer = show;

    And now we just need a validation function

    Code javascript:
    var frm = document.getElementById('myForm');
    frm.onchange = validate;
    frm.elements.layer = show;
    function validate() {
        var frm = document.getElementById('myForm');
        if (frm.elements.layer.selectedIndex === 0) {
            return false;
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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