0

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

4
Contributors
9
Replies
12
Views
6 Years
Discussion Span
Last Post by ubi_ct83
0

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';
0

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....

0

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

0

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/

0

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>
0

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.

0
<!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>
0
<!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?

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.