drop-down box dynamically displays text box?

botsko.net · 08-12-2004, 05: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, 06:05 PM

This should work

Code:

<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, 02: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.

Quote:

Originally Posted by JPM

This should work

Code:

<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, 03:09 PM

You can try looking here for additional help....

.....Willy

botsko.net · 08-20-2004, 04:07 PM

Quote:

Originally Posted by Willy Duitt

You can try looking here 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, 04:11 PM

Quote:

Originally Posted by botsko.net

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, 04:16 PM

Just copy and pasted, adding in HTML headers.

PHP Code:


			
<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, 04:39 PM

Somewhere you lost the escape character in the regular expression....

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

.....Willy

botsko.net · 08-20-2004, 04:41 PM

Quote:

Originally Posted by Willy Duitt

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, 04:45 PM

Then attach the file because that worked for me once I fixed the missing escape char....

botsko.net · 08-20-2004, 05:25 PM

here...

Willy Duitt · 08-20-2004, 05: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, 06:05 PM

Quote:

Originally Posted by Willy Duitt

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, 09: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, 10: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