...

View Full Version : drop-down box dynamically displays text box?



botsko.net
08-12-2004, 06:51 PM
I have a drop down that has numbers, 1-4. I want the number value chosen to dynamically display the same number of text boxes.

For example - if the customer chooses 3 from the drop-down, I want three small text boxes to appear.

I can only find a javascript to dynamically load another drop-down with new values - how can I do this? Can you at least point me to a script or give me an example?

JPM
08-12-2004, 07:05 PM
This should work


<html>
<head>

<script type="text/javascript">

function writeText(s)
{
document.getElementById('myDiv').innerHTML = ""
var i = parseInt(s)
for(x=0;x<i;x++)
{
document.getElementById('myDiv').innerHTML +="<input type='text' />"
}

}

</script>

</head>
<body>
<form>
<select onchange="writeText(this.options[this.selectedIndex].value)">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br />
<div id="myDiv"></div>


</form>
</body>
</html>

botsko.net
08-18-2004, 03:13 PM
Any idea why this works fine on Mozilla/Netscape but not IE? It moves everything on the page as if it inserts a new form field, but the field is not visible in IE.



This should work


<html>
<head>

<script type="text/javascript">

function writeText(s)
{
document.getElementById('myDiv').innerHTML = ""
var i = parseInt(s)
for(x=0;x<i;x++)
{
document.getElementById('myDiv').innerHTML +="<input type='text' />"
}

}

</script>

</head>
<body>
<form>
<select onchange="writeText(this.options[this.selectedIndex].value)">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br />
<div id="myDiv"></div>


</form>
</body>
</html>

Willy Duitt
08-18-2004, 04:09 PM
You can try looking here (http://www.codingforums.com/showthread.php?t=42764&highlight=dynamic) for additional help....

.....Willy

botsko.net
08-20-2004, 05:07 PM
You can try looking here (http://www.codingforums.com/showthread.php?t=42764&highlight=dynamic) for additional help....

.....Willy

I tried using the code at that forumns page, but that too will not work in IE 6. It works just fine when you enter a value and hit enter in Firefox .9.3! I need something that works in both - but preferrably in IE!

Willy Duitt
08-20-2004, 05:11 PM
I tried using the code at that forumns page, but that too will not work in IE 6. It works just fine when you enter a value and hit enter in Firefox .9.3! I need something that works in both - but preferrably in IE!

Uh....

I wrote and tested that code with IE6...
If it is not working for you, you are doing something wrong....
Can't possibly say what tho, since you have failed to post any code....

.....Willy

botsko.net
08-20-2004, 05:16 PM
Just copy and pasted, adding in HTML headers.




<html>
<head>
<title>Test</title>

<script type="text/javascript">
<!--//
function addInputs(theInput){
var table = document.createElement('table');
table.id = 'hMembers';
var hMembers = document.getElementById('hMembers');
if(hMembers)theInput.parentNode.removeChild(hMembers);

if(theInput.value.match(/^\d+$/)){
var tbody = document.createElement('tbody');
for(var i=0; i<theInput.value; i++){
var row = document.createElement('tr');
var cell = document.createElement('td');
var num = document.createTextNode((i+1)+')');
cell.appendChild(num);
row.appendChild(cell);
tbody.appendChild(row);

var cell = document.createElement('td');
var name = document.createTextNode('name:');
var input = document.createElement('input');
input.size = 20;
input.name = 'name'+(i+1);
cell.appendChild(name);
cell.appendChild(input);
row.appendChild(cell);
tbody.appendChild(row);

var cell = document.createElement('td');
var age = document.createTextNode('age:');
var input = document.createElement('input');
input.size = 1;
input.name = 'age'+(i+1);
cell.appendChild(age);
cell.appendChild(input);
row.appendChild(cell);
tbody.appendChild(row);

var cell = document.createElement('td');
var sex = document.createTextNode('sex:');
var input = document.createElement('input');
input.size = 2;
input.name = 'sex'+(i+1);
cell.appendChild(sex);
cell.appendChild(input);
row.appendChild(cell);
tbody.appendChild(row);
} table.appendChild(tbody);
theInput.parentNode.insertBefore(table,theInput.nextSibling);
}

else{ alert('Please enter only numbers in this field!');
theInput.value = '';
theInput.focus();
}
}
//-->
</script>
</head>

<body>
<form method="get" action="">
How many in the household: <input type="text" onchange="addInputs(this)">
</form>

</html>

Willy Duitt
08-20-2004, 05:39 PM
Somewhere you lost the escape character in the regular expression....

if(theInput.value.match(/^\d+$/)){

.....Willy

botsko.net
08-20-2004, 05:41 PM
Somewhere you lost the escape character in the regular expression....

if(theInput.value.match(/^\d+$/)){

.....Willy


No its in my source code - this PHPBB program must have red that incorrectly and removed it.

Willy Duitt
08-20-2004, 05:45 PM
Then attach the file because that worked for me once I fixed the missing escape char....

botsko.net
08-20-2004, 06:25 PM
here...

Willy Duitt
08-20-2004, 06:54 PM
I don't know what to tell you....
I just checked your attached file in both Internet Explorer 6 and Firefox 9 and it worked as intended in both.....

.....Willy

botsko.net
08-20-2004, 07:05 PM
I don't know what to tell you....
I just checked your attached file in both Internet Explorer 6 and Firefox 9 and it worked as intended in both.....

.....Willy

I am at work, so there may be some config problem with IE. I will test this with my personal laptop at lunch.

botsko.net
08-20-2004, 10:57 PM
I tested this on a completely seperate computer (my home machine with XP and IE 6.0.26. The version of IE at work is 6.0.28.

I type a number into the field: nothing happens.
I hit enter: the page acts like it is submitting the field, no new boxes appear.

Willy Duitt
08-20-2004, 11:25 PM
onchange="addInputs(this)"

This example uses an onchange event handler....
It is not enough to just type a number in... You must place focus somewhere else (such as clicking on the body or another form element) for the change to register.... Try changing that to onkeyup or something if you are not comfortable with the onchange event.....

.....Willy

Willy Duitt
08-20-2004, 11:36 PM
Try using this select menu instead....
Besides, your first post mentioned this anyway...



<form method="get" action="">
How many inputs:
<select name="newInputs" onchange="addInputs(this)">
<option value="0">Choose Number</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</form>


.....Willy

botsko.net
08-21-2004, 12:48 AM
YAY! That works just fine in both browsers! I appreciate your work!

Willy Duitt
08-21-2004, 02:06 AM
Cheers :thumbsup:

.....Willy

botsko.net
08-21-2004, 05:52 AM
One more question - when this foirm is submitted, what field names can I use to access the data typed into the fields?

Willy Duitt
08-21-2004, 06:08 AM
Here's a trick:

Change the form method to get and the action to http://google.com...

<form method="get" action="http://google.com">

Google will print out a nice little page showing what values are being passed... The information you seek will be there in black and white...

.....Willy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum