Dynamically add element in form

Question

I am trying to build an "Expense Approval" tab where a salesman must list individually their airfare, hotel, food and car rental for approval.

I thought rather than create 5 or 6 fields for each section, I'd like to have an add new button so that there are only as many fields as needed on the submission.

Questions:

1. Shall I add the following Javascript code somewhere, if yes where should i add it as I don't see any custom scripting possible in salesforce.

2. Do i have to change any Apex code (custom) to accomodate this request.

I know how to do it in HTML and Javascript, like below

HTML code

<SCRIPT language="javascript">
function add(type) {

    //Create an input type dynamically.
    var element = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);


    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).
    foo.appendChild(element);

}
</SCRIPT>

    <FORM>
    <H2>Dynamically add element in form.</H2>
    Select the element and hit Add to add it in form.
    <BR/>
    <SELECT name="element">
        <OPTION value="button">Submit</OPTION>
        <OPTION value="text">Textbox</OPTION>
    </SELECT>

    <INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>

    </FORM>

Answer 1

You can either use Apex/Visualforce or JavaScript (perhaps using something like jQUery would be easier) for that. With the former option you would use a wrapper class (or a native list, if it maps properly) mapped to an <apex:repeat> tag. With the latter, it's simply what you're doing, on steroids.

The pros for VF are that you can easily map the list to a db object with apex, whereas you're going to have to serialize the response from JS (and deserialize it on the Apex side) before you can save it.

On the flip side, the JS version would run much faster on the gui, and won't need any roundtrips to the server every time you add a row.

My apologies for the lack of sample code, I am not near a computer where I can type that much.