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
ubi_ct83 -3 Junior Poster
Akash Saikia 9 Junior Poster
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
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
I mean to say,are the input fields already there in invisible mode?
ubi_ct83 -3 Junior Poster
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
McLaren 3 Posting Whiz in Training
you can do it using jquery framework. Here is the example of how do you get values from something, including dropdown.
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:
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):
Amr87 1 Junior Poster in Training
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> ubi_ct83 -3 Junior Poster
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.
Amr87 1 Junior Poster in Training
<!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> ubi_ct83 -3 Junior Poster
<!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?
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.