dynamic dropdown option will show different multiple free textbox

Question

0.00/5 (No votes)

See more:

//here the scenario, I've two option in one dropdown, if I select either one the option will populate multiple textbox.

XML

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>dynamic dropdown populate multiple text box</title>
</head>

<body>

<p align="center">//if choose for option1 and will populate free text box<br>
&nbsp;</p>


<form method="POST" action="###">
<table width="362" border="0" align="center">
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">Option</font></strong></td>
      <td width="199"><div align="left">
      <select name="plat" placeholder="please select">
        <option></option>
        <option id="option1">option1</option>
        <option id="option2">option2</option>
      </select>
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">sub type1</font></strong></td>
      <td>
      <div align="left">
      <input name="subtype1" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td align="center" bgcolor="#31AFDA"><strong><font color="#FFFFFF">sub
        type2</font></strong></td>
      <td><div align="left"><input name="subtype2" type="text" size="33" /></div></td>
    </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">sub type3</font></strong></td>
      <td>
      <div align="left">
      <input name="subtype3" type="text" size="33" />
      </div>
      </td>
      </tr>
    </table>




    <p align="center"><input type="submit" value="Submit" name="B1"></p>
</form>



<p align="center">&nbsp;</p>
<p align="center">//if choose for option2 and will populate free text box as
below<br>
&nbsp;</p>
<form method="POST" action="###">
<table width="362" border="0" align="center">
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">Option</font></strong></td>
      <td width="199"><div align="left">
      <select name="option" >
        <option></option>
        <option id="option3">option1</option>
        <option id="option4">option2</option>
      </select>
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">sub type1</font></strong></td>
      <td>
      <div align="left">
      <input name="subtype1" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td align="center" bgcolor="#31AFDA"><strong><font color="#FFFFFF">sub
        type2</font></strong></td>
      <td><div align="left">
        <input name="subtype2" type="text" size="33" /></div></td>
    </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">sub type3</font></strong></td>
      <td>
      <div align="left">
      <input name="subtype3" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">sub type4</td>
      <td>
      <input name="subtype4" type="text" size="33" /></td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">sub type5</td>
      <td>
      <input name="subtype5" type="text" size="33" /></td>
      </tr>
    </table>



<p align="center"><input type="submit" value="Submit" name="B1"></p>
</form>



</body>

</html>

Posted 14-May-13 21:25pm

Ntcoded

Add a Solution

Comments

Mohibur Rashid 15-May-13 7:30am

where is your question?

Ntcoded 15-May-13 9:08am

My mistake, how to make it dynamic drop down to populate multiple text box/ text field ?.... For example as per shown above...rely seek your help...(in javascript)

Ntcoded 15-May-13 22:20pm

probably question that I submitted less clear .. the things I try to say something like this, I try to make a dynamic drop down with two options, if I choose the first option it will exhibit the free text box as a sub type 1,2 and 3. while sub-type 4 and 5 are hidden. when I choose the second option it will exhibit sub type free text box 1,2,3,4 and 5.

Mohibur Rashid 15-May-13 22:24pm

You already got a reply. anyway, if you want to make it database based i.e. if you want to get your next combo list from database. then I will suggest you to look at few things, like

1. ajax
2. json

3. if you understand javascript then your life will be easier with jQuery.

Ntcoded 27-May-13 22:32pm

millions thank for your advise, I choose to use jQuery..and I got the solution for this..thanks bro..

Mohibur Rashid 27-May-13 22:55pm

happy to help

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

BrianHamilton · Answer 1 · 2013-05-15T07:16:00

This code will make the textboxes visible/invisible. If you want to Div's to be made visible/invisible, give the Div's an id and alter the code

<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>dynamic dropdown populate multiple text box</title>
</head>
 
<body>
<script>
function Process()
{
	var x = document.getElementById('option').selectedIndex;
	var y = document.getElementById('option').value;

	switch(x)
	{
		case 0:
			break;
		case 1:
			document.getElementById('subtype4').style.visibility="hidden";
			document.getElementById('subtype5').style.visibility="hidden";
			break;
		case 2:
			document.getElementById('subtype4').style.visibility="visible";
			document.getElementById('subtype5').style.visibility="visible";
			break;
	}
}
</script>

<form method="POST" action="###">
<table width="362" border="0" align="center">
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">
        <font color="#FFFFFF">Option</font></td>
      <td width="199"><div align="left">
      <select name="option" id="option">
        <option></option>
        <option id="option1">option1</option>
        <option id="option2">option2</option>
      </select>
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">
        <font color="#FFFFFF">sub type1</font></td>
      <td>
      <div align="left">
      <input id="subtype1" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td align="center" bgcolor="#31AFDA"><font color="#FFFFFF">sub
        type2</font></td>
      <td><div align="left">
        <input id="subtype2" type="text" size="33" /></div></td>
    </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">
        <font color="#FFFFFF">sub type3</font></td>
      <td>
      <div align="left">
      <input id="subtype3" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">sub type4</td>
      <td>
      <input id="subtype4" type="text" size="33" /></td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">sub type5</td>
      <td>
      <input id="subtype5" type="text" size="33" /></td>
      </tr>
    </table>
 

 
<p align="center"><input type="button" value="Submit" name="B1"  önClick="Process()"></p>
</form>
 

 
</body>
 
</html>