How do I use jQuery to grow an HTML form?

Answer 1

You can create the HTML you want to append to the form and insert it into the appropriate container using jQuery.append().

Sometimes what I'll do is keep a TBODY in my form table and give that TBODY and ID so I can reference it via jQuery to append extra rows/cells/form inputs.

Answer 2

I think something like this.

inputNum = 2;

function GrowTable()
{
    var input = $("<tr id=\"fileinput" + inputNum + "\">
        <td></td>
        <td>
            <input type=\"file\" name=\"Attachment" + inputNum + "\" id=\"Attachment" + inputNum + "\" />
        </td>
    </tr>");

    input.insertAfter("#fileinput" + (inputNum - 1));

    inputNum++;
}

Answer 3

Keeping a counter might help, something like

$('form').append("<tr id=\"fileinput" + i + "\"><td></td><td><input type=\"file\" /></td></tr>");

Answer 4

This'll get you most of the way there.

var row = $('table tr:last').clone();
$(row).attr('id', 'new_ID');
$('input', row).attr('id', 'new_ID_for_input');
$('table').append(row);