Dynamically creating input fields?

[Peter Kirk]

Hi there

I have a form which submits a list of data to a web-application (which then
saves to a database).
The list consists of four input fields per row.
Eg.
<field_1.1><fie ld_2.1><field_3 .1><field_4.1>
<field_1.2><fie ld_2.2><field_3 .2><field_4.2>
<field_1.3><fie ld_2.3><field_3 .3><field_4.3>
....

Now I want to allow the user to enter new rows in the list, and I have
thought about the possibility of using javascript to dynamically create a
row of empty input fields on the screen when the user clicks on a button -
is this possible, and how?

Thanks,
Peter

[Antonie C Malan Snr]

Re: Dynamically creating input fields?

Peter Kirk wrote:[color=blue]
> Hi there
>
> I have a form which submits a list of data to a web-application (which then
> saves to a database).
> The list consists of four input fields per row.
> Eg.
> <field_1.1><fie ld_2.1><field_3 .1><field_4.1>
> <field_1.2><fie ld_2.2><field_3 .2><field_4.2>
> <field_1.3><fie ld_2.3><field_3 .3><field_4.3>
> ...
>
> Now I want to allow the user to enter new rows in the list, and I have
> thought about the possibility of using javascript to dynamically create a
> row of empty input fields on the screen when the user clicks on a button -
> is this possible, and how?
>
> Thanks,
> Peter
>[/color]
Yes, it is. One problem, though. I cannot get entered values from the
generated input fields. However here's how:

First, create a place in your html file where the generated components
will go.

<tr id="contentPlac e"></tr> Obviously, in a table row in this example.

Then generate first the <td> object and then the form elements. Add the
form elements to the <td>, add the <td> to the <tr> and add the whole
lot to the form.

var contentPlace = document.getEle mentById("conte ntPlace");
var cell = document.create Element("TD");
cell.id="conten tCell";
cell.colSpan= 9;
cell.align="cen ter";
var text1 = document.create TextNode("Auto" );
var input1 = document.create Element("Input" );
input1.name="au to";
input1.value="a uto";
input1.type="Ch eckBox";

Of course, input1.type="Te xt"; is also valid. Then specify
input1.size=xx etc.

Now adding:

contentPlace.ap pendChild(cell) ;
cell.appendChil d(text1);
cell.appendChil d(input1);

I also got a reference to the form (getElementById ("myform");)
and added the various form elements. No go. The elements generate
beautifully, but no input from them goes to the server.

Have a look at http://members.optusnet.com.au/~mala...CN/dealer.html
an play with the Category select element.

If you get it working, please tell me.

In the end I used hidden fields and unhide them when needed.
Cosmetically inferior, but it works.

Chris