...

View Full Version : how to add select lists dynamically when i click add another button



venkib097
09-01-2007, 12:15 PM
hi guys ,
my code :

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:2px;">
<tr>
<td align="right" width="25%" bgcolor="#E8F0F7"><div>Select a Shift:</div></td>
<td class="runningText" width="75%">&nbsp;
<select name="selectshift" onChange="javascript:function to be included();">
<option value="choose">please choose</option>
<option value="morning">MORNING</option>
<option value="general">GENERAL</option>
<option value="afternoon">AFTERNOON</option>
<option value="night">NIGHT</option>
</select>
</td></tr>
<tr><td>
<div id="content area"> </div>
when i select shift some shift (like morning) ,it will dispaly dynamically in next row in the content area with two select lists with option values(here the option values are hours from 7am -to- 5pm)& one button. if i click add button it wii add another two select lists in the same division area below the first added select lists with same option values like above.please any one help to this ............soon
thanks
venki'

vwphillips
09-01-2007, 01:08 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcIncluded(zxcobj){
var zxcshow=document.getElementById(zxcobj.value);
if (!zxcshow) return;
if (zxcobj.hide&&zxcobj.hide!=zxcshow) zxcobj.hide.style.display='none';
zxcshow.style.display='';
zxcobj.hide=zxcshow
}

function zxcAdd(zxcobj){
var zxcp=zxcobj.parentNode;
var zxcclone=zxcp.getElementsByTagName('DIV')[0].cloneNode(true);
zxcp.appendChild(zxcclone);
}

/*]]>*/
</script></head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:2px;">
<tr>
<td align="right" width="25%" bgcolor="#E8F0F7"><div>Select a Shift:</div></td>
<td class="runningText" width="75%">&nbsp;
<select name="selectshift" onChange="zxcIncluded(this);">
<option value="choose">please choose</option>
<option value="morning">MORNING</option>
<option value="general">GENERAL</option>
<option value="afternoon">AFTERNOON</option>
<option value="night">NIGHT</option>
</select>
</td></tr>
<tr><td>
<div id="content area" style="position:relative;">

<div id="morning" style="display:none;" >
<input type="button" name="" value="ADD" onclick="zxcAdd(this);" />
<div>
<select >
<option >Morning</option>
<option >7am</option>
<option >8am</option>
<option >Add Options</option>
<option >as required</option>
</select>
<select >
<option >Morning</option>
<option >7am</option>
<option >8am</option>
<option >Add Options</option>
<option >as required</option>
</select>
</div>
</div>
<div id="general" style="display:none;" >
<input type="button" name="" value="ADD" onclick="zxcAdd(this);" />
<div>
<select >
<option >General</option>
<option >7am</option>
<option >8am</option>
<option >Add Options</option>
<option >as required</option>
</select>
<select >
<option >General</option>
<option >7am</option>
<option >8am</option>
<option >Add Options</option>
<option >as required</option>
</select>
</div>
</div>
</div>

</body>

</html>

venkib097
09-03-2007, 07:04 AM
hi vwphillips thanks for posting code .that code is what i am expecting.

venkib097
09-03-2007, 08:21 AM
thnks for posting coding,that is help very helpful for me . i am new to javascript . how can i know (learn) about DIV concept and i dont the concept abt hide&display&byTagname,replace,innnerHtml .....and so on.how can i learn about these things. please help me to learn about these things.if any links about these topics plese forword me. my mail id venkib097@yahoo.co.in
thanks
venki.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum