Add New Line

[juicy]

I create 10 textfield in tabular form (with loop 10 times). Now I want to
add a button to let user add new line, but I don't have idea/ reference on
how to do this.

Can anyone give me some useful link/ suggestion on this?

Thanks.

[RobG]

juicy said on 04/04/2006 11:17 AM AEST:

I create 10 textfield in tabular form (with loop 10 times). Now I want to
add a button to let user add new line, but I don't have idea/ reference on
how to do this.

Can anyone give me some useful link/ suggestion on this?

Insert a BR element where required, say after each 'textfield'?
--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

[juicy]

Sorry, should be add new textfield.

Currently my solution is put the loop to 20 times,

for(i=0;i<20;i++)
{
if(i>15){//call javascript to set the textfield as hidden}

//create textfield here
}

The disadvantage is these hidden textfield will cause empty space between
10 visible textfield and object below the hidden textfield. And it has
limit the textfield can be add up to 20 only.

Please give suggestion on how to do this or useful links are also
encouraged..as I don't have other idea to solve this...

Thanks.

[[on]]

I'm not that sure what you want to do. Looks like you want to add 5
textfields to an alreddy large set of textfields, and you also want to
"hide" the onces alreddy in the set.

If this is wrong in anyway, you really should try to rephrase your
question.

Anyhow;

I'm guessing you have the textfields in a HTMLelement (div, form, span,
whatever).

// START OF CODE

// First we grab the element the textfields are in, simplest with
getElementById, if the element has a ID attribute.
var textfieldcontainer = document.getElementById("TextFields");

// Then we need all the textfields inside the element.
var textfields = document.getElementsByTagName("input");

// If your container element was a <form> you would now also select the
Submit, Reset buttons so if you did that you must do a check... but I
won't show that.

// First we hide all the elements in the container, even we have
alreddy hidden some we will hide them again.
for (i = 0;i < textfields.length;i++)
{
textfields[i].setAttribute("type","hidden");
}

// Now we create the 5 new textfields. And give them various of
attributes.
var newText1 = document.createElement("input");
newText1.setAttribute("type","text");
newText1.setAttribute("name","whatever");

var newText2 = document.createElement("input");
newText2.setAttribute("type","text");
newText2.setAttribute("name","something");

var newText3 = document.createElement("input");
newText3.setAttribute("type","text");
newText3.setAttribute("name","someone");

var newText4 = document.createElement("input");
newText4.setAttribute("type","text");
newText4.setAttribute("name","pennywise");

var newText5 = document.createElement("input");
newText5.setAttribute("type","text");
newText5.setAttribute("name","theclown");

// And now we add the newly created textfields (appendChild adds to the
end)
textfieldcontainer.appenChild(newText1);
textfieldcontainer.appenChild(newText2);
textfieldcontainer.appenChild(newText3);
textfieldcontainer.appenChild(newText4);
textfieldcontainer.appenChild(newText5);

// END OF CODE

This is a pretty basic way of doing it, but the key here is first we
hide then we add. If we do them at the same time it will just be
harder.

btw:
getElementsByTagName(..) returns a HTMLcollection and not a Array, and
it's Live.
So if you add elements of the same type (as the one grabbed by the
method) you will get referenses to the newly added ones aswell. This
may create never ending loops at times.
juicy wrote:

Sorry, should be add new textfield.

Currently my solution is put the loop to 20 times,

for(i=0;i<20;i++)
{
if(i>15){//call javascript to set the textfield as hidden}

//create textfield here
}

The disadvantage is these hidden textfield will cause empty space between
10 visible textfield and object below the hidden textfield. And it has
limit the textfield can be add up to 20 only.

Please give suggestion on how to do this or useful links are also
encouraged..as I don't have other idea to solve this...

Thanks.