how to load the form elements depending on selection option

msi_333 · **Posted:** Sun Jan 23, 2011 6:42 pm

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 · **Posted:** Mon Jan 24, 2011 3:20 pm

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>

msi_333 · **Posted:** Mon Jan 24, 2011 6:31 pm

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

saics · **Posted:** Wed Jan 26, 2011 4:24 pm

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>

msi_333 · **Posted:** Wed Jan 26, 2011 8:59 pm

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 · **Posted:** Thu Jan 27, 2011 3:01 pm

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 · **Posted:** Sat Jan 29, 2011 11:33 am

any answers??

how to load the form elements depending on selection option

Users browsing similar posts