...

View Full Version : How onchange event of select box will work??



gagan
06-23-2009, 03:01 PM
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

Philip M
06-23-2009, 04:25 PM
If I understand you correctly:-


<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)

itsallkizza
06-23-2009, 04:29 PM
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:


<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum