How can I add a row to an HTML form?

Question

I'm making a simple app where there are a series of either drop downs or text boxes. Once the user has filled these in the resulting strings are then concatenated and displayed to the user. Now I need a simple function where the user can press a '+' button and adds a row. Ideally I need the row above to be copied (including inputs). So for example I have:

dropdown textbox textbox dropdown

concatenated string

How can I simply copy the row above (minus the concatenated string), including what the user has inputted. If it's easier simply adding the row above for now would be good. I'm using JavaScript...here's the code for a form for example:

<form action="">
  <input type="text" id="site" value="Site" title="Site" onfocus="clickclear(this, 'Site')" onblur="clickrecall(this,'Site')" />
  <input type="text" id="placementdesc" value="Placement description" title="Placement description" onfocus="clickclear(this, 'Placement description')" onblur="clickrecall(this,'Placement description')" />
  <input type="text" id="placementtype" value="Placement Type" title="Placement Type" onfocus="clickclear(this, 'Placement Type')" onblur="clickrecall(this,'Placement Type')" />
  <input type="text" id="size" value="Size" title="Size" onfocus="clickclear(this, 'Size')" onblur="clickrecall(this,'Size')" />
  <input type="text" id="pricing" value="Pricing" title="Pricing" onfocus="clickclear(this, 'Pricing')" onblur="clickrecall(this,'Pricing')" />
  <select id="servetype" title="Serve Type">
    <option>STD – Standard trafficking type</option>
    <option>SSV – Site-served</option>
    <option>PIX – Pixel</option>
    <option>CCD – Click command</option>
    <option>PCC – Pixel and Click command</option>
    <option>RMV – Rich Media Video</option>
    <option>RME – Rich Media Expand</option>
    <option>RMO – Rich Media Other</option>
  </select>
</form>

Is this simple or would I need to use the DOM and use createElement etc? Would it be easier if this was done in a table?

Just to be clear, I'm trying NOT to use JQuery...I'm willing to switch though if it's easier to do it this way.

Answer 1

Add the plus button next to each input and give them a class of addRow (for example).

Map a function to .addRow 's click event:

$(".addRow").click(function(){
    $(this)
        .prev("input") // select the previous input element
        .clone() // clone said element
        .appendTo("#formID"); // append the clone to the form
});

Keep in mind this will clone the existing values of the inputs too, so you may want to clear the clone's value using val() before appending it.