how to load the form elements depending on selection option

DrRakha

just put it like this

Code:

<table>
<tr>
<td>select</td>
<td><select name="someselect" onchange="javascript:doSomething();">
<option value="male">Male</option>
<option value="female">female</option>
</select></td>
</tr>
<tr>
<td>hai</td>
<td>hai</td>
</tr>
<tr>
<td><div id="mydiv">
</div></td>
</tr>
</table>

saics

thank u bro..
bro one more question...here we are placing elements...what we suould if we want disappear that element by selecting another option...am using the following code
but my problem is i get a new line because am using null as string value....is there any alternative to don't display that space

<script>
function doSomething(){
if (form.someselect.options[form.someselect.selectedIndex].value=='female')
{
alert("male is option chose ");
document.getElementById('mydiv').innerHTML = ''
}
}
</script>

DrRakha

i don;t understand the problem clearly , which spaces .

saics

msi_333 Bro..plz once check the following code so that u can understand it clearly ...
the problem with this code is , when iam selecting 2 it gives the space(2 r 3 lines) above the address area and above submit button(3 r 4 lines)...,and when iam selecting 3 it gives the space above the submit button (5 or 6 lines of space) and by default (with out selecting any num) it gives the space above "ocp" selection(4 r 5 lines) and above "cat" selection,above address text area,marritalstatus(1 line each).....
So bro..plz suggest me a solution for this problem

thanku in advance

<html>
<head>
<title>Registration form</title>
<script language="javascript">
function doSomething()
{
if (reg.sel.options[reg.sel.selectedIndex].value=='one')
{
}
else if (reg.sel.options[reg.sel.selectedIndex].value=='two')
{
document.getElementById('dob1').innerHTML ='';
document.getElementById('dob2').innerHTML ='';
document.getElementById('bill1').innerHTML ='';
document.getElementById('bill2').innerHTML ='';
document.getElementById('ocp1').innerHTML ='';
document.getElementById('ocp2').innerHTML ='';
document.getElementById('c1').innerHTML ='';
document.getElementById('c2').innerHTML ='';
document.getElementById('ms1').innerHTML ='';
document.getElementById('ms2').innerHTML ='';
document.getElementById('ref1').innerHTML ='Reference';
document.getElementById('ref2').innerHTML ='<input type=text name="ref">';
document.getElementById('gen1').innerHTML ='gender';
document.getElementById('gen2').innerHTML ='<select size="1" name="gen"><option selected value="male">male</option><option value="female">female</option></select>';
document.getElementById('num11').innerHTML ='Num1';
document.getElementById('num12').innerHTML ='<input type=text name="num1">';
document.getElementById('num21').innerHTML ='Num2';
document.getElementById('num22').innerHTML ='<input type=text name="num2">';
document.getElementById('area1').innerHTML ='Area';
document.getElementById('area2').innerHTML ='<input type=text name="area">';
}
else if (reg.sel.options[reg.sel.selectedIndex].value=='three')
{
document.getElementById('bill1').innerHTML ='';
document.getElementById('bill2').innerHTML ='';
document.getElementById('ocp1').innerHTML ='';
document.getElementById('ocp2').innerHTML ='';
document.getElementById('c1').innerHTML ='';
document.getElementById('c2').innerHTML ='';
document.getElementById('area1').innerHTML ='Area';
document.getElementById('area2').innerHTML ='<input type=text name="area">';
}
}
</script>
</head>
<body>
<form name=reg>
<table width=30% height=50% cellpadding=10>
<tr>
<th align=left nowrap>Select:</th>
<td><select size="1" name="sel" onchange="javascript:doSomething();">
<option selected value="null">select</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</td>
</tr>
<tr>
<th align=left><div id="dob1">dob:</div></th>
<td>
<div id="dob2"><select size="1" name="dd">
<script language="javascript">
for(i=1;i<=31;i++)
{
document.write("<option value="+i+">");
document.write(i);
document.write("</option>");
}
</script>
</select>
<select size="1" name="mm">
<script language="javascript">
var month=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];
for(i=0;i<month.length;i++)
{
document.write("<option value="+i+">");
document.write(month[i]);
document.write("</option>");
}
</script>
</select>
<select size="1" name="yyyy">
<script language="javascript">
for(i=1970;i<2010;i++)
{
document.write("<option value="+i+">");
document.write(i);
document.write("</option>");
}
</script>
</select><br>
</div></td>
</tr>
<tr>
<th align=left><div id="ms1">Marrrital status:</div></th>
<td><div id="ms2"><input type=radio name=ms value="married">Married <input type=radio name=ms value="un married">Un Married</div></td>
</tr>
<tr>
<th valign=top align=left>Address:</th><td><textarea rows=5 cols=25 name=addr></textarea></td>
</tr>
<tr>
<th align=left nowrap>
<div id="area1"></div>
</th>
<td>
<div id="area2"></div>
</td>
</tr>
<tr>
<th align=left nowrap>cat:</th>
<td><select size="1" name="cat">
<option selected value="a">a</option>
<option value="b">b</option>
<option value="c">c</option></td>
</tr>
<tr>
<th align=left nowrap>Num:</th>
<td><input type=text name=num size=26></td>
</tr>
<tr>
<th align=left nowrap>
<div id="ref1"></div>
</th>
<td>
<div id="ref2"></div>
</td>
</tr>
<tr>
<th align=left nowrap><div id="gen1"></div></th>
<td><div id="gen2"></div></td>
</tr>
<tr>
<th align=left nowrap><div id="num11"></div></th>
<td><div id="num12"></div></td>
</tr>
<tr>
<th align=left nowrap><div id="num21"></div></th>
<td><div id="num22"></div></td>
</tr>
<tr>
<th align=left nowrap><div id="ocp1">Ocp:</div></th>
<td>
<div id="ocp2"><select size="1" name="ocp"><option selected value="bs">bs</option><option value="fr">fr</option></div>
</td>
</tr>
<tr>
<th align=left nowrap><div id="c1">condition:</div></th>
<td><div id="c2"><select size="1" name="c">
<option selected value="1">1</option>
<option value="2">2</option></div>
</td>
</tr>
<tr>
<th align=left nowrap><div id="bill1">bill:</div></th>
<td><div id="bill2"><input type=text name=ill size=26></div></td>
</tr>
<tr>
<td align=right><input type=submit value=Submit></td>
<td><input type=reset value=Reset></td>
</tr>
</table>
</form>
</body>
</html>

DrRakha

dear , as i can see from your code , this because of calling onchange="javascript:doSomething();"

Code:

<td><select size="1" name="sel" onchange="javascript:doSomething();">
<option selected value="null">select</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</td>

in this function ,you have 3 case for value 1 and 2 and 3 , and in the last two cases (2,3) , you delete the html content of the div like :
document.getElementById('dob1').innerHTML ='';
document.getElementById('dob2').innerHTML ='';
document.getElementById('bill1').innerHTML ='';
document.getElementById('bill2').innerHTML ='';
document.getElementById('ocp1').innerHTML ='';

so you have white lines .

saics

Hi bro..is there any alternative for this problem?
am also thought same for this problem as u said deleting html content....
but plz check this code also bro...in this also am deleting the html code and the page displayed well after changing the select option...in prev code there is a long gap between the elements of the output but here is not....
bro plz give me a solution???

Code:

<script>
 function doSomething(){
if (form.sel.options[form.sel.selectedIndex].value=='one')
{

}
else if (form.sel.options[form.sel.selectedIndex].value=='two')
{
document.getElementById('21').innerHTML ='';
document.getElementById('22').innerHTML ='';
document.getElementById('31').innerHTML ='';
document.getElementById('32').innerHTML ='';
document.getElementById('41').innerHTML ='Hobby';
document.getElementById('42').innerHTML ='<select size="1" name="spe"><option selected value="c">Ckt</option><option value="r">Reading</option>';
document.getElementById('51').innerHTML ='';
document.getElementById('52').innerHTML ='';
}
else if (form.sel.options[form.sel.selectedIndex].value=='three')
{
document.getElementById('21').innerHTML ='';
document.getElementById('22').innerHTML ='';
document.getElementById('31').innerHTML ='';
document.getElementById('32').innerHTML ='';
document.getElementById('mydiv').innerHTML = 'Name:'
document.getElementById('mydiv1').innerHTML ='<input type=text name="s"> ';
}

}
</script>
<body>
<form name="form">
<table>
<tr>
<th align=left nowrap>Select:</th>
<td><select size="1" name="sel" onchange="javascript:doSomething();">
<option selected value="null">select</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</td>
</tr>
<tr>
<td>
<div id="mydiv">
 </div>
</td>
<td>
<div id="mydiv1">
 </div>
</td>
</tr>
<tr>
<th align=left><div id="21">DOB:</div></th>
<td>
<div id="22"><select size="1" name="dd">
<script language="javascript">
for(i=1;i<=31;i++)
{
document.write("<option value="+i+">");
document.write(i);
document.write("</option>");
}
</script>
</select> 
<select size="1" name="mm">
<script language="javascript">
var month=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];
for(i=0;i<month.length;i++)
{
document.write("<option value="+i+">");
document.write(month[i]);
document.write("</option>");
}
</script>
</select> 
<select size="1" name="yyyy">
<script language="javascript">
for(i=1970;i<2010;i++)
{
document.write("<option value="+i+">");
document.write(i);
document.write("</option>");
}
</script>
</select><br>
</div></td>
</tr>
<tr>
<td><div id="41"></div></td>
<td><div id="42"></div></td>
</tr>
<tr>
<th align=left><div id="31">MS:</div></th> 
<td><div id="32"><input type=radio name=ms value="yes">yes <input type=radio name=ms 
value="no">no</div></td>
</tr>
<tr>
<th valign=top align=left>Address:</th><td><textarea rows=5 cols=25 name=addr></textarea>
<tr>
<tr>
<th align=left nowrap><div id="51">ph:</div></th>
<td><div id="52"><input type=text name=ph size=26></div></td>
</tr>
</table>
</form>
</body>

saics

any answers??

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

how to load the form elements depending on selection option