how to load the form elements depending on selection option

saics · **Posted:** Thu Jan 13, 2011 4:56 pm

hi friendz...
Any body help on this...i want to create a page with some form elements(text,password,radio buttons,check boxes...etc)..
and the problem is... the very first element in the form is a select option(its my requirement)...following some elements
if i change the select option in the dropdown then the remaining all form elements or some of them should change....i.e it will display the different form elements depending on the select option
any one help me on this with the code.....

thanku in advance....

msi_333 · **Posted:** Fri Jan 14, 2011 1:10 am

something like this .

Code:

<form name="form">
<select name="someselect"  onchange="javascript:doSomething();">
<option value="male">male</option>
<option value="female">female</option>
</select>
</form>

<script>

 function doSomething(){

if (form.someselect.options[form.someselect.selectedIndex].value=='male')
{
 alert("male is option chose ");
}
}
</script>

saics · **Posted:** Fri Jan 14, 2011 11:38 am

thanku dude....
but how to put that message(male is option chose) below that select option element?

saics · **Posted:** Sun Jan 16, 2011 3:13 pm

any one please will help on this??
how to add the elements to that page only when the java script on "select" option run...that is insted of displaying that massage in alert(in the above example) a message should be displayed there itself the page contain select scroll....
thank u in advance!!!

msi_333 · **Posted:** Sun Jan 16, 2011 9:03 pm

do u you want to show the error in a bar or something like that ?

saics · **Posted:** Mon Jan 17, 2011 12:39 pm

no not like that...
you are displaing that "male is option chose " in the alert window....but my desire is ti print that maeesge below the select ..that means the message should be displayed in that page only..

msi_333 · **Posted:** Mon Jan 17, 2011 10:24 pm

you can add under the select

Code:

<div id="mydiv">
 </div>
 

and in JavaScript use

Code:

document.getElementById('mydiv').innerHTML = ' your message ';

it will change dynamically

saics · **Posted:** Tue Jan 18, 2011 5:51 pm

thanku very much bro...
last one question bro please ....can we also write any number of lines of html code at "your message" place in JavaScript?

msi_333 · **Posted:** Tue Jan 18, 2011 9:53 pm

yes ,you can write anything as string .

saics · **Posted:** Sun Jan 23, 2011 2:53 pm

hi msi_333 bro...
one more doubt regarding this code...can't we insert the data in the table using <div>..tag
Bro..jst watch the following code and give me a suggestion to place it in the table...

<script>
function doSomething(){

if (form.someselect.options[form.someselect.selectedIndex].value=='male')
{
alert("male is option chose ");
document.getElementById('mydiv').innerHTML = '<td>Name:</td><td><input type=text

name="s"></td><br> ';
}
}
</script>

<body>
<form name="form">
<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>
<div id="mydiv">
</div>
</tr>
</form>
</body>

how to load the form elements depending on selection option

Users browsing similar posts