Dynamically creating input fields?

Discussion in 'Javascript' started by Peter Kirk, Sep 23, 2004.

  1. Peter Kirk

    Peter Kirk Guest

    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
     
    Peter Kirk, Sep 23, 2004
    #1
    1. Advertising

  2. 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/~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
     
    Antonie C Malan Snr, Sep 28, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Darrel
    Replies:
    3
    Views:
    396
    Scott M.
    Nov 13, 2004
  2. gotcha
    Replies:
    0
    Views:
    229
    gotcha
    Oct 24, 2003
  3. Thomas
    Replies:
    6
    Views:
    184
  4. Replies:
    2
    Views:
    110
    sunilp
    Jan 5, 2006
  5. Replies:
    23
    Views:
    586
    Tim Streater
    Dec 18, 2013
Loading...

Share This Page