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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How onchange event of select box will work??

    Hi all,

    I am trying to make one application. When we slect value from select box . It will show same type of row according to which value we select from select box.

    Let me explain my problem:
    select box have value 0,1,2,3 . When we select 1 then it will show one row below the select box naming person1 name (input box for name of person1).
    if we will select value 2 from select box then it will show two row according to select value Like this
    person1 Enter Name of person1
    person2 Enter Name of person2

    By default it have value 0 then it will not show any row below the select box.

    i want to do this. But i do not know how i can do this . I think for this i have to onchange event in select box .But in correct way i do not know how it is possible. Please help me to solve my problem .
    Thanks,
    Gagan

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    If I understand you correctly:-

    Code:
    <form name = "myform">
    
    <select name = "numpers" id = "numpers" onchange = "showboxes()">
    <option value = "0">Select number of persons</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>
    <br><br>
    <div id = "list1" style="display:none">Enter name of Person 1 <input type = 'text' name = 'cname1' id = "cname1"></div>
    <div id = "list2" style="display:none">Enter name of Person 2 <input type = 'text' name = 'cname2' id = "cname2"></div>
    <div id = "list3" style="display:none">Enter name of Person 3 <input type = 'text' name = 'cname3' id = "cname2"></div>
    <div id = "list4" style="display:none">Enter name of Person 4 <input type = 'text' name = 'cname4' id = "cname2"></div>
    <div id = "list5" style="display:none">Enter name of Person 5 <input type = 'text' name = 'cname5' id = "cname2"></div>
    </form>
    
    <script type = "text/javascript">
    function showboxes() {
    var x = document.myform.numpers.value;
    
    // optional to allow user to change his mind
    for (i = 5; i>=1; i--) {
    document.getElementById("list"+i).style.display="none";
    }
    // end of optional
    
    for (i =1; i<=x; i++) {
    document.getElementById("list"+i).style.display="block";
    }
    for (i=5; i>x; i--) {
    document.getElementById("cname"+i).value = "";  // set value of hidden boxes to ""
    }
    }
    </script>
    A more sophisticated method would use the DOM (see post below), but this works fine.


    "The only thing to do with good advice is pass it on. It is never any use to oneself." - Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)
    Last edited by Philip M; 06-23-2009 at 04:47 PM.

  • #3
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I typed this up for you. If you're using a framework like Prototype or jQuery then you can rewrite the JS without my ClassUtil class:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <style type="text/css">
    #rows .row
    {
    display: none;
    }
    </style>
    <script type="text/javascript">
    // <![CDATA[
    function ClassUtil()
    	{
    	this.getClass = function(element)
    		{
    		return element.className || (element.getAttribute ? element.getAttribute("class") : false) || "";
    		}
    	this.setClass = function(element,class_name,overwrite)
    		{
    		// without overwrite set, its just like adding a class to the element
    		var new_class = overwrite ? class_name : (this.getClass(element) ? this.getClass(element)+" "+class_name : class_name);
    		element.className = new_class;
    		if (element.setAttribute) element.setAttribute("class",new_class);
    		}
    	this.removeClass = function(element,class_name)
    		{
    		var elm_class = this.getClass(element);
    		var classes_to_check = elm_class.split(" ");
    		var new_class = new Array();
    		for (var i=0;i<classes_to_check.length;i++)
    			{
    			if (class_name != classes_to_check[i]) new_class.push(classes_to_check[i]);
    			}
    		this.setClass(element,new_class.join(" "),true);
    		}
    	this.checkClass = function(element,class_name)
    		{
    		var elm_classes = this.getClass(element).split(" ");
    		var classes_to_check = class_name.split(" ");
    		var chk = 0;
    		for (var i=0;i<classes_to_check.length;i++)
    			{
    			for (var c=0;c<elm_classes.length;c++)
    				{
    				if (classes_to_check[i] == elm_classes[c])
    					{
    					chk++;
    					break;
    					}
    				}
    			}
    		return chk == classes_to_check.length;
    		}
    	this.getElementsByClassName = function(class_name,opt_root)
    		{
    		var root = opt_root || document;
    		var all = root.getElementsByTagName("*");
    		var sp = new Array();
    		for (var i=0;i<all.length;i++)
    			{
    			if (this.checkClass(all[i],class_name)) sp.push(all[i]);
    			}
    		return sp;
    		}
    	}
    var cutil = new ClassUtil();
    
    function selectOnChange(select)
    	{
    	var num_to_show = select.value || 0;
    	var rows = cutil.getElementsByClassName("row",document.getElementById("rows"));
    	for (var i=0;i<rows.length;i++)
    		{
    		if (i < num_to_show) rows[i].style.display = "block";
    		else rows[i].style.display = "none";
    		}
    	}
    // ]]>
    </script>
    </head>
    <body>
    
    <select onchange="selectOnChange(this)">
    	<option value="">select...</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    </select>
    
    <div id="rows">
    	<div class="row">
    		Person 1: <input type="text" name="person1" />
    	</div>
    	<div class="row">
    		Person 2: <input type="text" name="person2" />
    	</div>
    	<div class="row">
    		Person 3: <input type="text" name="person3" />
    	</div>
    </div>
    
    </body>
    </html>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

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