471,571 Members | 1,261 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,571 software developers and data experts.

Dynamic input field generation

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.
Jul 20 '05 #1
2 17261
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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=findObj(n,d.layers[i].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



"Rosebud" <su**********@yahoo.com> wrote in message
news:c8**************************@posting.google.c om...
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.

Jul 20 '05 #2
"steve stevo" <st***@stevosteve.fsnet.co.uk> writes:

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[i][elemName] (i ranging over all forms)
d.layers[i].* (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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=findObj(n,d.layers[i].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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Venus | last post: by
reply views Thread by Venus | last post: by
reply views Thread by MattB | last post: by
34 posts views Thread by clinttoris | last post: by
3 posts views Thread by Mukesh | last post: by
1 post views Thread by gau.tai | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Vinnie | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.