dynamic amount of text boxes 1

[mickywall]

on a page i have a textbox which asks for the number of text fields to be displayed, is there a way so that if i type in 4 into the textbox 4 text fields will be displayed.

or if i typed in 7 , 7 textfields would be displayed

thanks

 

[melt7]

Try using this function:

function makeBoxes(userEntry)//passed from text box
{
var i;
userEntry--;
for (i=0;i<=userEntry;i++)
{
document.write('<INPUT TYPE=&quot;text&quot;
NAME=userBoxes>');
}
}

 

[onpnt]

melt7's way if great and will work fine. I jsut had to write something a few weeks ago to the similar effect and thought I would share it
just another option and it may give you a bit of formatting ease also. it also names the boxes with unique names for use later in gaining access to the values but keeps a unique identifier of &quot;numbers so you can check only indexOf &quot;numbers&quot; to loop through the form and further your tasks.

function addBoxs(num) {
var lng = frm.length + 1
var Nfld = &quot;numbers&quot; + lng
for (count = 0; count = num; count++) {
frm.innerHTML += '<input type=&quot;text&quot; name=&quot;' + Nfld +'&quot; class=txtbx><br>'
}
}


<form name=&quot;frm&quot;>
how many?<input type=&quot;text&quot; name=&quot;countThem&quot; onBlur=&quot;addBoxs(this.value)&quot;>
</form>
_________________________________________________________
for the best results to your questions: FAQ333-2924
Is your question a most FAQ?? Find out here FAQ333-3048

http://www.onpntwebdesigns.com/aspTut4.asp

 

[melt7]

It aint easy being green, heheh.

Onpt, I'm giving you a star for showing me a better way. Unfortunately, I've not gotten to the innerHTML property in my studies yet. I'm getting there, though. Keep up the good work.

 

[mickywall]

thanks i ll try that out...

mickywall

 

[harmmeijer]

For a really large amount of innerHTML I took the liberty of rewriting some of onpnt's code.
function addBoxs(num) {
var arrContent = new Array();
var i = 0;
var lng = frm.length + 1;
var Nfld = &quot;numbers&quot; + lng;
for (count = 0; count = num; count++) {
arrContent[ i ] = '<input type=&quot;text&quot; name=&quot;';
i++;
arrContent[ i ] = Nfld;
i++;
arrContent[ i ] = Nfld;
i++;
arrContent[ i ] = '&quot; class=txtbx><br>';
}
// its quicker to fill an array than to set an object's innerHTML
// if this were a table with more than 200 rows you'd notice the difference.
frm.innerHTML = arrContent.join(&quot;&quot;
}

 

[mickywall]

melt can you give me the whole code....

op.. i cant get it to work...

 

[Targol]

I give you another way. It's main advantage on innerHTML way is that you can add event handlers on the created inputs. Here it is :

function addBoxs(num) {
  for (count = 0; count = num; count++) {
    var lng = frm.length + 1 + count;
    var Nfld = "numbers" + lng;
    var o_newInput = document.createElement("INPUT");
    o_newInput.type="text";
    o_newInput.id="' + Nfld +'"
    o_newInput.onClick= getRef("Number_Onclick");
    frm.appendChild(o_newInput);
    }
}

function Number_Onclick {
  var o_srcElem = window.event.srcElement;
  alert ("You clicked input " + o_srcElem.id);
}

Water is not bad as long as it stays out human body ;-)

 

[melt7]

Since you asked, I messed with it a little more. This way will give you unique names (an issue with my first entry that onpt pointed out). And, this time I included the form as well.


function makeBoxes(userEntry)
{
var i;
userEntry--;
for (i=0;i<=userEntry;i++)
{
var name=&quot;textbox&quot; + i;
document.write(''+ name+'<INPUT TYPE=&quot;text&quot; NAME=&quot;'+ name+'&quot;><BR>');
}
}


<FORM NAME=&quot;textBoxes&quot;>
<INPUT TYPE=&quot;text&quot; NAME=numberOfTextBoxes><BR>
<INPUT TYPE=&quot;button&quot; VALUE=&quot;Create Boxes&quot; onclick=&quot;makeBoxes(textBoxes.numberOfTextBoxes.value);&quot;>

 

[onpnt]

mickywall
the code was tested and working fine. is there something else browser version to outdated, placement of the code etc.. that may be causing it not to work

melt7
Thank you and I'm glad I got to show you a new way of doing something

actually this thread turned out fairly complete in covering a bunch of cool ways to do this. now all we have to do is get one of us to test it all out and see which is the most efficient _________________________________________________________
for the best results to your questions: FAQ333-2924
Is your question a most FAQ?? Find out here FAQ333-3048

http://www.onpntwebdesigns.com/aspTut4.asp

 

[melt7]

OK, mickywall, I see what you're talking about on onpt's version. Just a typo is all.

for (count = 0; count = num; count++)
should be
(count = 0; count < num; count++)

Further, I see a waste of code in my function. &quot;userEntry--;&quot; is not needed if you change the loop test condition to &quot;i<userEntry;&quot;.

 

[mickywall]

thanks everyone for your help...
i ll go and play with it and see what i can come up with


mickywall.

&quot;the world aint a big enough doughnut&quot;

 

[mickywall]

Melt there is a slight problem with this code... firstly
i have other textfields in the form and when i click this button the other textfields disappear.

function makeBoxes(userEntry)
{
var i;
userEntry--;
for (i=0;i<=userEntry;i++)
{
var name=&quot;textbox&quot; + i;
document.write(''+ name+'<INPUT TYPE=&quot;text&quot; NAME=&quot;'+ name+'&quot;><BR>');
}
}


<FORM NAME=&quot;textBoxes&quot;>
<INPUT TYPE=&quot;text&quot; NAME=numberOfTextBoxes><BR>
<INPUT TYPE=&quot;button&quot; VALUE=&quot;Create Boxes&quot; onclick=&quot;makeBoxes(textBoxes.numberOfTextBoxes.value);&quot;>
</form>

 

[harmmeijer]

<script>
function makeBoxes(userEntry){
alert(&quot;hello&quot;
var i=0;
var arrContent = new Array();
for (i=0;i<userEntry;i++){
var name=&quot;textbox&quot; + i;
arrContent[arrContent.length] = name;
arrContent[arrContent.length] = ' <INPUT TYPE=&quot;text&quot; NAME=&quot;';
arrContent[arrContent.length] = name;
arrContent[arrContent.length] = '&quot;><BR>';
}
document.getElementById(&quot;IwantExtraBoxesHere&quot.innerHTML = arrContent.join(&quot;&quot;
}
</script>

<FORM NAME=&quot;textBoxes&quot;>
<label id=&quot;IwantExtraBoxesHere&quot;> </label>
<INPUT TYPE=&quot;text&quot; NAME=&quot;numberOfTextBoxes&quot; id=&quot;numberOfTextBoxes&quot; value=500><BR>
<INPUT TYPE=&quot;button&quot; VALUE=&quot;Create Boxes&quot; onclick=&quot;makeBoxes(document.getElementById('numberOfTextBoxes').value);&quot;>
</form>

 

[melt7]

If you want the textboxes added to the same page, change this line:

document.write(''+ name+'<INPUT TYPE=&quot;text&quot; NAME=&quot;'+ name+'&quot;><BR>');

to this:

textBoxes.innerHTML += '<input type=&quot;text&quot; name=&quot;' + name +'&quot; class=txtbx><BR>'

 

[mickywall]

melt,,, you are a star.....


whats your email?
i might have a proposal for you if you are interested...



mickywall

 

[melt7]

heheh, shoot

naj99@consultant.com