how to load the form elements depending on selection option

Computer Programming Forums : Questions and Answers, Articles, Tutorials, and Code Snippets

Switch to full style
HTML,DHTML,Javascript,XML,CSS
Post a reply
DrRakha
  • DrRakha
  • Posts: 2715
  • Joined: Tue Mar 27, 2007 10:55 pm
  • Location: Earth
  • Website

Re: how to load the form elements depending on selection option

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

Re: how to load the form elements depending on selection option

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>

DrRakha
  • DrRakha
  • Posts: 2715
  • Joined: Tue Mar 27, 2007 10:55 pm
  • Location: Earth
  • Website

Re: how to load the form elements depending on selection option

Mon Jan 24, 2011 6:31 pm

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

saics

Re: how to load the form elements depending on selection option

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>

DrRakha
  • DrRakha
  • Posts: 2715
  • Joined: Tue Mar 27, 2007 10:55 pm
  • Location: Earth
  • Website

Re: how to load the form elements depending on selection option

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

Re: how to load the form elements depending on selection option

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

Re: how to load the form elements depending on selection option

Sat Jan 29, 2011 11:33 am

any answers??

Post a reply
  Related Posts  to : how to load the form elements depending on selection option
 Good looking selection box with image per option     -  
 load class to applet- load frame class to applet     -  
 php login form (sign-in form)     -  
 selection sort     -  
 C++ Selection Sort     -  
 Help with selection sort for strings?     -  
 selection of checkbox in buttongroup in netbeans     -  
 fill selection options from list     -  
 calculate data from multiple selection     -  
 validate age entered as selection box in javascript     -  
Switch to full style

Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com


Powered by phpBB © phpBB Group.


Codemiles.com