view input filed after select a bumber from dropdown menu

Question

ubi_ct83 -3 Junior Poster

14 Years Ago

hi all,
how can i view the number of input field base on dropdown menu selection.lets say user choose 3 from dropwdownmenu then 3 input field are viewed

javascript

4 Contributors
9 Replies
223 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by ubi_ct83

All 9 Replies

McLaren 3 Posting Whiz in Training

14 Years Ago

you can do it using jquery framework. Here is the example of how do you get values from something, including dropdown.

http://api.jquery.com/val/

You should have some div where you will put your input fields. Lets say div with class "inputs".

here is the examples how to do something on change event, in this case on dropdown change:

http://api.jquery.com/change/

And here you can see how to put some html code in your div (for putting input fields, you will use for loop and put that code):

http://api.jquery.com/html/

Amr87 1 Junior Poster in Training

14 Years Ago

Do You plan to show hidden inputs when choosing a value from drop down or , you plant to create them ?

anyway , If I get you right , see the code below , it will help you
and If u wanna ask more question , I will be happy to answer

<!DOCTYPE html>
<html>
<head>
<title>Create Input Feilds</title>
<script type="text/javascript">
window.onload =initAll;
function initAll () {
document.getElementById('theMenu').selectedIndex=0;
document.getElementById('theMenu').onchange=setVal;
}

function setVal () {
var list = document.getElementById('theMenu');
var val = list.options[list.selectedIndex].value;

for (var i=0;i<val;i++){
var newInput = document.createElement("input"); // Creating new Input element
newInput.setAttribute('type','text'); // Setting  new Attribute for type
newInput.setAttribute('value','new text input feild'); // Setting  new Attribute for valu
var body = document.getElementsByTagName('body')[0]; // Calling a parent for the input to append to
body.appendChild(newInput); // Appending the inputs to the body , but you can append them to any element in ur document
newInput.style['display']="block"; // Setting Some Styles
newInput.style['margin']="10px";   // Setting Some Styles
}

}

</script>
</head>
<body>
<form action ="#" method="POST">
<select id="theMenu">
<option value="0" selected="selected">Choose Number of Input</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>

</body>
</html>

Amr87 1 Junior Poster in Training

14 Years Ago

<!DOCTYPE html>
    <html>
    <head>
    <title>Create Input Feilds</title>
	<style type="text/css">

table {
	border-collapse: collapse; margin:20px;
}

th, td,tr {
	padding: 10px;
	border: 2px #666 solid;
	text-align: center;
	font-size: 24px;
}
	
	</style>
    <script type="text/javascript">
    window.onload =initAll;
    function initAll () {
    document.getElementById('theMenu').selectedIndex=0;
    document.getElementById('theMenu').onchange=setVal;
    }
     
    function setVal () {
    var list = document.getElementById('theMenu');
    var val = list.options[list.selectedIndex].value;
     
    for (var i=0;i<val;i++){
    var newInput = document.createElement("input"); // Creating new Input element
	var newTR = document.createElement("tr");
	var newTD = document.createElement("td");
    newInput.setAttribute('type','text'); // Setting new Attribute for type
    newInput.setAttribute('value','new text input feild'); // Setting new Attribute for valu
    var TB = document.getElementById('tab');
    var row = TB.appendChild(newTR);
   var cell = row.appendChild(newTD);
   cell.appendChild(newInput);
    }
         }
     
    </script>
    </head>
    <body>
    <form action ="#" method="POST">
    <select id="theMenu">
    <option value="0" selected="selected">Choose Number of Input</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </form>
     <table id="tab">
	 
	 
	 
	 </table>
    </body>
    </html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Akash Saikia 9 Junior Poster · Answer 1 · 2011-04-06T10:49:12+00:00

If the input fields are already made hard coded,then code a javascript loop,and get first three input field's id in it and make them block

document.getElementById(ids).style.display='block';

ubi_ct83 -3 Junior Poster · Answer 2 · 2011-04-06T12:09:10+00:00

If the input fields are already made hard coded,then code a javascript loop,and get first three input field's id in it and make them block
document.getElementById(ids).style.display='block';

im sorry i dont get you....

Akash Saikia 9 Junior Poster · Answer 3 · 2011-04-06T12:12:28+00:00

I mean to say,are the input fields already there in invisible mode?

ubi_ct83 -3 Junior Poster · Answer 4 · 2011-04-06T12:30:08+00:00

I mean to say,are the input fields already there in invisible mode?

no, i plan to view input field using for loop.because,i want to store the value in database

ubi_ct83 -3 Junior Poster · Answer 5 · 2011-04-07T07:31:06+00:00

Do You plan to show hidden inputs when choosing a value from drop down or , you plant to create them ?

anyway , If I get you right , see the code below , it will help you
and If u wanna ask more question , I will be happy to answer

<!DOCTYPE html>
<html>
<head>
<title>Create Input Feilds</title>
<script type="text/javascript">
window.onload =initAll;
function initAll () {
document.getElementById('theMenu').selectedIndex=0;
document.getElementById('theMenu').onchange=setVal;
}

function setVal () {
var list = document.getElementById('theMenu');
var val = list.options[list.selectedIndex].value;

for (var i=0;i<val;i++){
var newInput = document.createElement("input"); // Creating new Input element
newInput.setAttribute('type','text'); // Setting  new Attribute for type
newInput.setAttribute('value','new text input feild'); // Setting  new Attribute for valu
var body = document.getElementsByTagName('body')[0]; // Calling a parent for the input to append to
body.appendChild(newInput); // Appending the inputs to the body , but you can append them to any element in ur document
newInput.style['display']="block"; // Setting Some Styles
newInput.style['margin']="10px";   // Setting Some Styles
}

}

</script>
</head>
<body>
<form action ="#" method="POST">
<select id="theMenu">
<option value="0" selected="selected">Choose Number of Input</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>

</body>
</html>

i want to display input text field.if we choose 2 in the dropdown menu,so browser will display 2 input text field.yes, your code is similar to what i want.
thanks a lot.
since i never learn javascript,

for (var i=0;i<val;i++){
var newInput = document.createElement("input"); // Creating new Input element
newInput.setAttribute('type','text'); // Setting  new Attribute for type
newInput.setAttribute('value','new text input feild'); // Setting  new Attribute for valu
var body = document.getElementsByTagName('body')[0]; // Calling a parent for the input to append to
body.appendChild(newInput); // Appending the inputs to the body , but you can append them to any element in ur document
newInput.style['display']="block"; // Setting Some Styles
newInput.style['margin']="10px";   // Setting Some Styles
}

how can i place the text field in a table?ive tried do this:
for (var i=0;i<val;i++)
{
var newInput'i+1' = document.getElementById('user_input');
var body = document.getElementsByTagName('body')[0];
body.appendChild(newInput'i+1');

}
i get the input field from table <input name="user_input" type="text" id="user_input">.
but why it just show only 1 no matter what number ive chosen.

ubi_ct83 -3 Junior Poster · Answer 6 · 2011-04-07T20:25:10+00:00

<!DOCTYPE html>
    <html>
    <head>
    <title>Create Input Feilds</title>
	<style type="text/css">

table {
	border-collapse: collapse; margin:20px;
}

th, td,tr {
	padding: 10px;
	border: 2px #666 solid;
	text-align: center;
	font-size: 24px;
}
	
	</style>
    <script type="text/javascript">
    window.onload =initAll;
    function initAll () {
    document.getElementById('theMenu').selectedIndex=0;
    document.getElementById('theMenu').onchange=setVal;
    }
     
    function setVal () {
    var list = document.getElementById('theMenu');
    var val = list.options[list.selectedIndex].value;
     
    for (var i=0;i<val;i++){
    var newInput = document.createElement("input"); // Creating new Input element
	var newTR = document.createElement("tr");
	var newTD = document.createElement("td");
    newInput.setAttribute('type','text'); // Setting new Attribute for type
    newInput.setAttribute('value','new text input feild'); // Setting new Attribute for valu
    var TB = document.getElementById('tab');
    var row = TB.appendChild(newTR);
   var cell = row.appendChild(newTD);
   cell.appendChild(newInput);
    }
         }
     
    </script>
    </head>
    <body>
    <form action ="#" method="POST">
    <select id="theMenu">
    <option value="0" selected="selected">Choose Number of Input</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </form>
     <table id="tab">
	 
	 
	 
	 </table>
    </body>
    </html>

there is a problem.if u select menu twice,the text field will be added.could u please tell me why?

view input filed after select a bumber from dropdown menu

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers