How to allow user to enter elements in an HTML table

Question

I want to allow a user to enter a list of persons in a web application, and then submit them as one batch. Each row looks roughly like this:

<TR>
    <TD> <INPUT name="person.fname"> </TD>
    <TD> <INPUT name="person.lname"> </TD>
    <TD> <INPUT name="person.birthdate"> </TD>
</TR>

The form starts out with a single row of blank inputs, and I want a fresh row added to the list whenever the user fills in any of the fields -- i.e. the list grows on demand. Likewise, I want a row to disappear whenever the user clears all fields in it.

What is the easiest, most robust and most maintainable way to implement this?

Finally, how do I submit this table of values back to the server? What is the preferred way to name each field so that the server can create a list of Person entities based on the entered values?

Answer 1

If you are familiar with jQuery, you can use the .change handler to catch them changing the field. Test to see if it's the last row and if there is data in it. If they have taken everything out of the row, remove it. jQuery has some great ways to do this, but it's all dependent on how you want to write it. If so, append the new row using jQuery's .append function. If you're using Python and cgi_app and you use the same name attribute for each type of cell, you can use form.getlist('fname[]') and it will return an array of the names.

Answer 2

What is the preferred way to name each field so that the server can create a list of Person entities based on the entered values?

You can do:

<TR>
    <TD> <INPUT name="person[fname]"> </TD>
    <TD> <INPUT name="person[lname]"> </TD>
    <TD> <INPUT name="person[birthdate]"> </TD>
</TR>

Which generates array 'person'

Answer 3

JQuery is a good suggestion, but if you don't want to use it, you can try generating input name by appending an index. For example:

<TR>
<TD> <INPUT name="person_0.fname"> </TD>
<TD> <INPUT name="person_0.lname"> </TD>
<TD> <INPUT name="person_0.birthdate"> </TD>
</TR>
...
<TR>
<TD> <INPUT name="person_N.fname"> </TD>
<TD> <INPUT name="person_N.lname"> </TD>
<TD> <INPUT name="person_N.birthdate"> </TD>
</TR>

where "N" is the row index. This way may help you to easily get the entire whole row values by using (i.e.) $GET['person'.$i.'fname'], $GET['person'.$i.'lname']... and so on.

Answer 4

CSS:

input:not(:first-of-type){
    display:none}

jQuery:

$('input').click(function(){
    $(this).val('');
}).blur(function(){
    if($(this).val().length>1){
        $(this)
            .toggleClass('processed')
            .hide('slow')
            .parents('#person').find('input:not(.processed):first').show('slow'); 
    }
});
$('#person').prepend('Click on blank space to proceed<br/>');

HTML:

<tr>
    <form id=person method=post action='/your_page_on_server'>
        <td><input name="fname" value='Enter the first name'/></td>
        <td><input name="lname" value='Enter the last name'/></td>
        <td><input name="birthdate" value='Enter the birth date'/></td>
        <td><input type=submit value='Submit'/></td>
    </form>
</tr>

I'm not familiar with server-side scripting, so my answer in only partial. Here's an example. Also, I recommend to add input validation by JS.