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><field_2.1><field_3.1><field_4.1>
<field_1.2><field_2.2><field_3.2><field_4.2>
<field_1.3><field_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]

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><field_2.1><field_3.1><field_4.1>
<field_1.2><field_2.2><field_3.2><field_4.2>
<field_1.3><field_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

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="contentPlace"></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.getElementById("contentPlace");
var cell = document.createElement("TD");
cell.id="contentCell";
cell.colSpan= 9;
cell.align="center";
var text1 = document.createTextNode("Auto");
var input1 = document.createElement("Input");
input1.name="auto";
input1.value="auto";
input1.type="CheckBox";

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

Now adding:

contentPlace.appendChild(cell);
cell.appendChild(text1);
cell.appendChild(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/~malan2000/PCN/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