Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Dynamically creating input fields?

Reply
Thread Tools

Dynamically creating input fields?

 
 
Peter Kirk
Guest
Posts: n/a
 
      09-23-2004
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

 
Reply With Quote
 
 
 
 
Antonie C Malan Snr
Guest
Posts: n/a
 
      09-28-2004
Peter Kirk wrote:
> 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/~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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
Creating controls dynamically based on user input mohaaron@gmail.com ASP .Net 4 11-01-2007 08:21 AM
Inserting Controls Dynamically - with Validators Also Added Dynamically Jeffrey Todd ASP .Net 1 06-02-2005 04:33 PM
Load User Control Dynamically, Cast object dynamically =?Utf-8?B?UmV6YSBOYWJp?= ASP .Net 1 03-05-2005 12:04 AM
Load User Control Dynamically, Cast object dynamically =?Utf-8?B?UmV6YSBOYWJp?= ASP .Net 1 03-04-2005 07:57 PM



Advertisments