Dynamic input field generation

[Rosebud]

Hello,

I'd like some help trying to generate input fields on the fly. What I
have on an HTML page is a single text input field labelled #1, e.g. #1
<input type="text">. Next to the field is a button that, on click, I'd
like to automatically generate a second text input field below the
first, labelled #2. Everytime the button is clicked, another field is
created with an incremented label.

I explored iframes, but these text fields will be part of a larger
form that has to be passed together. I'd rather not use hidden text
fields because I don't want to hardcode a limit to the number of
fields available. Please point me in the right direction, or let me
know if this isn't possible.

Thanks.

 

[steve stevo]

try this

place this code in the head
<script>
var i=1 // count amount of formfields
function createNewInput(){
i++
findObj("dynForm").innerHTML+="<br><input type='text' id='field" + i + "'
value='whatever'>"
findObj("dynForm").innerHTML+="<input type='button' value='add new'
onClick='createNewInput()'>"
alert(findObj("dynForm").innerHTML)
}

function findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=findObj(n,d.layers.document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

</script>

place this in the body

<table>
<tr>
<td id="dynForm"><input type='text' id='field1' value='whatever'><input
type='button' value='add new' onClick='createNewInput()'></td>
</tr>
</table>


Simon

 

[Lasse Reichstein Nielsen]

Please don't top post.

<script>

The type attribute is mandatory
<script type="text/javascript">

The "findObj" function appears to be a generic function. Quite
ingenious. Am I correct in deducing that an argument like
"elemName?frameName" tries to find the element named "elemName" in the
sibling frame called "frameName"?

It then tries to find the function using (in this order)
d[elemName]
d.all[elemName]
d.forms[elemName] (i ranging over all forms)
d.layers.* (i ranging over all layers, find recursively)
document.getElementById(elemName)

To be even better at finding elements in NS4, you could also search
through document.{links,anchors,images,forms,applets} (or what other
collections NS4 has available). I would test for document.getElementById
first, since more present browsers would be caught there.

function findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=findObj(n,d.layers.document);
if(!x && document.getElementById) x=document.getElementById(n); return x;

change "document.getElementById" to "d.getElementById", or it won't find
elements in other frames in Mozilla.

/L