I'm trying to create a table where each row is a form. I want that each input is in a different table division, but I still need that for example, all first inputs belong to the same table head and so on.
What I'm trying to do is an editable grid, more or less this:
<table>
<tr>
<form method="POST" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
<tr>
<form method="POST" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
</table>
But apparently I cannot arrange the tags in that way (or so is what the w3c validator said).
Any good way to do this?
If you want a "editable grid" i.e. a table like structure that allows you to make any of the rows a form, use CSS that mimics the TABLE tag's layout: display:table, display:table-row, and display:table-cell.
There is no need to wrap your whole table in a form and no need to create a separate form and table for each apparent row of your table.
Try this instead:
<style>
DIV.table
{
display:table;
}
FORM.tr, DIV.tr
{
display:table-row;
}
SPAN.td
{
display:table-cell;
}
</style>
...
<div class="table">
<form class="tr" method="post" action="blah.html">
<span class="td"><input type="text"/></span>
<span class="td"><input type="text"/></span>
</form>
<div class="tr">
<span class="td">(cell data)</span>
<span class="td">(cell data)</span>
</div>
...
</div>
The problem with wrapping the whole TABLE in a FORM is that any and all form elements will be sent on submit (maybe that is desired but probably not). This method allows you to define a form for each "row" and send only that row of data on submit.
The problem with wrapping a FORM tag around a TR tag (or TR around a FORM) is that it's invalid HTML. The FORM will still allow submit as usual but at this point the DOM is broken. Note: Try getting the child elements of your FORM or TR with JavaScript, it can lead to unexpected results.
Note that IE7 doesn't support these CSS table styles and IE8 will need a doctype declaration to get it into "standards" mode: (try this one or something equivalent)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Any other browser that supports display:table, display:table-row and display:table-cell should display your css data table the same as it would if you were using the TABLE, TR and TD tags. Most of them do.
Note that you can also mimic THEAD, TBODY, TFOOT by wrapping your row groups in another DIV with display: table-header-group, table-row-group and table-footer-group respectively.
NOTE: The only thing you cannot do with this method is colspan.
Check out this illustration: http://jsfiddle.net/ZRQPP/
If all of these rows are related and you need to alter the tabular data ... why not just wrap the entire table in a form, and change GET to POST (unless you know that you're not going to be sending more than the max amount of data a GET request can send).
(That's assuming, of course, that all of the data is going to the same place.)
<form method="POST" action="your_action">
<table>
<tr>
<td><input type="text" name="r1c1" value="" /></td>
<!-- ... snip ... -->
</tr>
<!-- ... repeat as needed ... -->
</table>
</form>
You may have issues with column width, but you can set those explicitly.
<table>
<tr>
<td>
<form>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<form>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
You may want to also consider making it a single form, and then using jQuery to select the form elements from the row you want, serialize them, and submit them as the form.
See: http://api.jquery.com/serialize/
Also, there are a number of very nice grid plugins:
http://www.google.com/search?q=jquery+grid&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
If using JavaScript is an option and you want to avoid nesting tables, include jQuery and try the following method.
First, you'll have to give each row a unique id like so:
<table>
<tr id="idrow1"><td> ADD AS MANY COLUMNS AS YOU LIKE </td><td><button onclick="submitRowAsForm('idrow1')">SUBMIT ROW1</button></td></tr>
<tr id="idrow2"><td> PUT INPUT FIELDS IN THE COLUMNS </td><td><button onclick="submitRowAsForm('idrow2')">SUBMIT ROW2</button></td></tr>
<tr id="idrow3"><td>ADD MORE THAN ONE INPUT PER COLUMN</td><td><button onclick="submitRowAsForm('idrow3')">SUBMIT ROW3</button></td></tr>
</table>
Then, include the following function in your JavaScript for your page.
<script>
function submitRowAsForm(idRow) {
form = document.createElement("form"); // CREATE A NEW FORM TO DUMP ELEMENTS INTO FOR SUBMISSION
form.method = "post"; // CHOOSE FORM SUBMISSION METHOD, "GET" OR "POST"
form.action = ""; // TELL THE FORM WHAT PAGE TO SUBMIT TO
$("#"+idRow+" td").children().each(function() { // GRAB ALL CHILD ELEMENTS OF <TD>'S IN THE ROW IDENTIFIED BY idRow, CLONE THEM, AND DUMP THEM IN OUR FORM
if(this.type.substring(0,6) == "select") { // JQUERY DOESN'T CLONE <SELECT> ELEMENTS PROPERLY, SO HANDLE THAT
input = document.createElement("input"); // CREATE AN ELEMENT TO COPY VALUES TO
input.type = "hidden";
input.name = this.name; // GIVE ELEMENT SAME NAME AS THE <SELECT>
input.value = this.value; // ASSIGN THE VALUE FROM THE <SELECT>
form.appendChild(input);
} else { // IF IT'S NOT A SELECT ELEMENT, JUST CLONE IT.
$(this).clone().appendTo(form);
}
});
form.submit(); // NOW SUBMIT THE FORM THAT WE'VE JUST CREATED AND POPULATED
}
</script>
So what have we done here? We've given each row a unique id and included an element in the row that can trigger the submission of that row's unique identifier. When the submission element is activated, a new form is dynamically created and set up. Then using jQuery, we clone all of the elements contained in <td>'s of the row that we were passed and append the clones to our dynamically created form. Finally, we submit said form.
You can use the form attribute id to span a form over multiple elements each using the form attribute with the name of the form as follows:
<table>
<tr>
<td>
<form method="POST" id="form-1" action="/submit/form-1"></form>
<input name="a" form="form-1">
</td>
<td><input name="b" form="form-1"></td>
<td><input name="c" form="form-1"></td>
<td><input type="submit" form="form-1"></td>
</tr>
</table>
If you need form inside tr and inputs in every td, you can add form in td tag, and add attribute 'form' that contains id of form tag to outside inputs.
Something like this:
<tr>
<td>
<form id='f1'>
<input type="text">
</form>
</td>
<td>
<input form='f1' type="text">
</td>
</tr>
If all of these rows are related and you need to alter the tabular data ... why not just wrap the entire table in a form, and change GET to POST (unless you know that you're not going to be sending more than the max amount of data a GET request can send).
I cannot wrap the entire table in a form, because some input fields of each row are input type="file" and files may be large. When the user submits the form, I want to POST only fields of current row, not all fields of the all rows which may have unneeded huge files, causing form to submit very slowly.
So, I tried incorrect nesting: tr/form and form/tr. However, it works only when one does not try to add new inputs dynamically into the form. Dynamically added inputs will not belong to incorrectly nested form, thus won't get submitted. (valid form/table dynamically inputs are submitted just fine).
Nesting div[display:table]/form/div[display:table-row]/div[display:table-cell] produced non-uniform widths of grid columns. I managed to get uniform layout when I replaced div[display:table-row] to form[display:table-row] :
div.grid {
display: table;
}
div.grid > form {
display: table-row;
div.grid > form > div {
display: table-cell;
}
div.grid > form > div.head {
text-align: center;
font-weight: 800;
}
For the layout to be displayed correctly in IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10" />
Sample of output:
<div class="grid" id="htmlrow_grid_item">
<form>
<div class="head">Title</div>
<div class="head">Price</div>
<div class="head">Description</div>
<div class="head">Images</div>
<div class="head">Stock left</div>
<div class="head">Action</div>
</form>
<form action="/index.php" enctype="multipart/form-data" method="post">
<div title="Title"><input required="required" class="input_varchar" name="add_title" type="text" value="" /></div>
It would be much harder to make this code work in IE6/7, however.
If you can use javascript and strictly require it on your web, you can put textboxes, checkboxes and whatever on each row of your table and at the end of each row place button (or link of class rowSubmit) "save". Without any FORM tag. Form than will be simulated by JS and Ajax like this:
<script type="text/javascript">
$(document).ready(function(){
$(".rowSubmit").click(function()
{
var form = '<form><table><tr>' + $(this).closest('tr').html() + '</tr></table></form>';
var serialized = $(form).serialize();
$.get('url2action', serialized, function(data){
// ... can be empty
});
});
});
</script>
What do you think?
PS: If you write in jQuery this:
$("valid HTML string")
$(variableWithValidHtmlString)
It will be turned into jQuery object and you can work with it as you are used to in jQuery.
I second Harmen's div suggestion. Alternatively, you can wrap the table in a form, and use javascript to capture the row focus and adjust the form action via javascript before submit.
I had a problem similar to the one posed in the original question. I was intrigued by the divs styled as table elements (didn't know you could do that!) and gave it a run. However, my solution was to keep my tables wrapped in tags, but rename each input and select option to become the keys of array, which I'm now parsing to get each element in the selected row.
Here's a single row from the table. Note that key [4] is the rendered ID of the row in the database from which this table row was retrieved:
<table>
<tr>
<td>DisabilityCategory</td>
<td><input type="text" name="FormElem[4][ElemLabel]" value="Disabilities"></td>
<td><select name="FormElem[4][Category]">
<option value="1">General</option>
<option value="3">Disability</option>
<option value="4">Injury</option>
<option value="2"selected>School</option>
<option value="5">Veteran</option>
<option value="10">Medical</option>
<option value="9">Supports</option>
<option value="7">Residential</option>
<option value="8">Guardian</option>
<option value="6">Criminal</option>
<option value="11">Contacts</option>
</select></td>
<td>4</td>
<td style="text-align:center;"><input type="text" name="FormElem[4][ElemSeq]" value="0" style="width:2.5em; text-align:center;"></td>
<td>'ccpPartic'</td>
<td><input type="text" name="FormElem[4][ElemType]" value="checkbox"></td>
<td><input type="checkbox" name="FormElem[4][ElemRequired]"></td>
<td><input type="text" name="FormElem[4][ElemLabelPrefix]" value=""></td>
<td><input type="text" name="FormElem[4][ElemLabelPostfix]" value=""></td>
<td><input type="text" name="FormElem[4][ElemLabelPosition]" value="before"></td>
<td><input type="submit" name="submit[4]" value="Commit Changes"></td>
</tr>
</table>
Then, in PHP, I'm using the following method to store in an array ($SelectedElem) each of the elements in the row corresponding to the submit button. I'm using print_r() just to illustrate:
$SelectedElem = implode(",", array_keys($_POST['submit']));
print_r ($_POST['FormElem'][$SelectedElem]);
Perhaps this sounds convoluted, but it turned out to be quite simple, and it preserved the organizational structure of the table.
Tables are not meant for this, why don't you use <div>'s and CSS?
it's as simple as not using a table for markup, as stated by Harmen. You're not displaying data after all, you're collecting data.
I'll take for example the question 23 here: http://accessible.netscouts-ggmbh.eu/en/developer.html#fb1_22_5
On paper, it's good as it is. If you had to display the results, it'd probably be OK.
But you can replace it with ... 4 paragraphs with a label and a select (option's would be the headers of the first line). One paragraph per line, this is far more simple.
Related
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<tr>id</tr>
<input type="text" id= "101" style = "color:black" required></td>
<input type="button" value="Submit" style = "color:Red;">
<script>
document.getElementById("101").reset()
</script>
</body>
</html>
1) i want to make mandatory my id field but i am unable to do it .I used required but it is not working
2) i want to empty my text fields after submitting the fields when user clicks submit it is not working
3)In my code i used tr as text fields plese suggest for following tr tag only
You need to keep your code inside <form> and just submit type is enough to reset it. No need to write javascript to reset. Here is your working code snippet:
<body>
<form>
<table>
<tr>
<td>id</td>
<td><input type="text" id= "101" style = "color:black" required></td>
<td><input type="submit" value="Submit" style = "color:Red;"></td>
</tr>
</table>
</form>
</body>
If you want separate reset button to reset the field, add this in your table:
<td><input type="reset" value="Reset" style = "color:Red;"></td>
First, your html markup is wrong (inside TR you need to put TD), plus you are missing the form tag.
Adding the form tag, the page will submit and refresh. Te text field will be blank by default, no need to use javascript.
"required" is a HTML5 tag, it will work only with html5 browser that support it.
This code will work with every compatible html5 browser
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<table>
<tr>
<td>id</td>
<td><input type="text" id= "101" style = "color:black" required></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" style = "color:Red;"></td>
</tr>
</table>
</form>
</body>
</html>
If you want an "editable grid" i.e. a table like structure that allows you to make any of the rows a form, use CSS that mimics the TABLE tag's layout: display:table, display:table-row, and display:table-cell.
There is no need to wrap your whole table in a form and no need to create a separate form and table for each apparent row of your table.
Try this instead:
<style>
DIV.table
{
display:table;
}
FORM.tr, DIV.tr
{
display:table-row;
}
SPAN.td
{
display:table-cell;
}
</style>
<div class="table">
<form class="tr" method="post" action="blah.html">
<span class="td"><input type="text"/></span>
<span class="td"><input type="text"/></span>
</form>
<div class="tr">
<span class="td">(cell data)</span>
<span class="td">(cell data)</span>
</div>
</div>
The problem with wrapping the whole TABLE in a FORM is that any and all form elements will be sent on submit (maybe that is desired but probably not). This method allows you to define a form for each "row" and send only that row of data on submit.
The problem with wrapping a FORM tag around a TR tag (or TR around a FORM) is that its invalid HTML. The FORM will still allow submitting as usual but at this point, the DOM is broken. Note: Try getting the child elements of your FORM or TR with JavaScript, it can lead to unexpected results.
Note that IE7 doesn't support these CSS table styles and IE8 will need a doctype declaration to get it into "standards" mode: (try this one or something equivalent)
Any other browser that supports display:table, display:table-row and display:table-cell should display your CSS data table the same as it would if you were using the TABLE, TR and TD tags. Most of them do.
Note that you can also mimic THEAD, TBODY, TFOOT by wrapping your row groups in another DIV with display: table-header-group, table-row-group, and table-footer-group respectively
you are missign a semi-colon in your input field. Should be
<input type="text" id="101" style="color:black;" required>
In general it's preferable to create a separate .css file rather than utilizing the style attirbute
In general you are invokingthe javascript incorrectly.
<input type="button" value="Submit" style = "color:Red;" onclick="clearInput()">
And you should change the javascript accordingly:
<script>
function clearInput() {
document.GetElementById('101').value = "";
}
</script>
Your table form in general is wrong. Your general structure should look something like this
<table>
<td>
<tr>1</tr>
<tr>2</tr>
</td>
<td>
<tr>Column 2 Row</tr>
</td>
</table>
A working js fiddle example:
function clearInput() {
document.getElementById('101').value = "";
}
input[type="button"] {
color: red;
}
<input type="text" id="101">
<input type="button" value="Submit" onclick="clearInput()">
I'm creating a website, and I have a form that gets created by Django. Once the page is loaded, the user can add text inputs to the form by clicking a button. The problem is that when the submit button is clicked, only the text inputs that were originally created by Django get submitted. In other words, the extra text inputs that were added dynamically don't get submitted.
I'm guessing that this is due to the fact that the submit button is only "aware" of form elements that were present when the page was loaded, and not dynamically loaded elements. With that in mind, I'm guessing I need to use some kind of Javascript in order to submit all of the form elements, including the dynamically added ones, but I can't figure out how to do it.
I've tried the jQuery submit function, but I don't really know what I'm supposed to do with it. Any tips would be appreciated!
EDIT: Here's a code snippet, which shows what the HTML looks like after 2 more text inputs have been added dynamically to the "origin"
<table>
<form class="dataInput" action="/foner/116" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
<tbody class="origin">
<tr>
<th>
<label>Origin:</label>
</th>
<td>
<input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
</td>
<td>
<button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
</tbody>
<tr>
<th>
<label>Notes:</label>
</th>
<td>
<input class="submitButton" type="submit" value="S" />
</td>
</tr>
</form>
</table>
Ok, I was able to solve the problem. I had a table that was arranging all of the text inputs for the form, and the table also enclosed the form itself. It turns out that by inverting this, and enclosing the table inside of the form, all of the dynamically generated inputs get POSTed successfully. Thanks again to those who gave input in the comments above -- it's always helpful to get other opinions & perspectives.
So my question is (I know you're not supposed to ask questions in answers, but in case anyone feels like responding...): How was I supposed to know this? If you're using a compiled language, this is something that a compiler would probably catch for you. Is it just the kind of thing that you get the hang of with experience? Are there any books that would help me to get a handle on elementary problems like this? I find web development to be very tedious and frustrating because I often get hung up for long periods of time on trivial errors like this, and I'm assuming it doesn't have to be this way; I just don't quite know how to improve.
I have a form that adds a new user into the database. It all works perfectly, but what I want is to be able to add more than one user at a time, so when I click to "Add another user", it would appear another list of fields for adding a user. I don't know exactly how to explain it so I'll add some pictures:
Here is what I have when I try to add a user:
And, what I want is that when I click on "Add another user", to show me another list of fields under the other, like this:
So, if I click five times, it would show me five "forms" and the original one:
I've found this question where it shows how to do it with a different example, but my code has a table and a form so I don't know much exactly how to do it. Here's my form code:
<table id="minimalist-table">
<tr><th>Username</th><th>Password</th><th>Mail</th><th>Language</th><th>Sex</th></tr>
<form method="post" action="?action=users&sa=add">
<tr>
<td><input type="text" name="username[]" required="required"></td>
<td><input type="password" name="password[]" required="required"></td>
<td><input type="email" name="email[]" required="required"></td>
<td><select name="language[]">
<option value="en_US">English</option>
<option value="es_ES">Spanish</option>
</select></td>
<td><select name="sex[]">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
</tr>
<tr><td><input type="submit" value="Submit"> </td></tr>
</form></table>
I have the values with arrays (like name="email[]") because it's the way I can handle multiple elements for the database...
I've tried to put all this code into a function, so when I call the function it adds another group of fields into the form, but I don't know how to do it with JavaScript...
Thanks!
In such cases I usually create a hidden "template" element/row containing the HTML that should be added:
<table id="minimalist-table">
...
<tr class="template" style="display:none">
... all fields ...
</tr>
<tr class="submit_row"><td><input type="submit" value="Submit"> </td></tr>
So in the javascript you can do this to get the HTML (and disable the hidden inputs):
var row_template = $('#minimalist-table > .template').html().find(':input').prop('disabled', true)
The finished code would look something like this (untested)
var row_template = $('#minimalist-table > .template').html()
$('#add_row').on('click', function(){
$('#minimalist-table .submit_row').before(row_template);
});
I have a table with add more button which adds a certain number of rows with inputs in it. But the HTML string for these rows have grown large enough and its becoming a pain.
So, what I am thinking is to have a div hidden tag with the required HTML that is repeated again and again on clicking the add more button.
So, how to push the div tag innerHTML inside a TR. Below is the code that I need to push, so I kept it inside the hidden DIV tag.
<tr>
<td><label for="bucket_size"><b>1.</b> Bucket Size:</label></td>
<td><input type="text" name="bucket_size[]" id="bucket_size"></td>
<td><label for="control_bucket_size">Control Bucket Size: </label></td>
<td><input type="text" name="control_bucket_size[]" id="control_bucket_size" value="0"></td>
</tr>
<tr>
<td><label for="from_date">Active From: </label></td>
<td><input type="text" name="from_date[]" id="from_date" class="hasDatePicker"></td>
<td><label for="to_date">To: </label></td>
<td><input type="text" name="to_date[]" id="to_date" class="hasDatePicker"></td>
</tr>
<tr>
<td><label for="location">Location: </label></td>
<td class="locationSelect">
</td>
<td style="text-align:center;" colspan="2"></td>
</tr>
It doesn't get inserted properly if I directly insert after the particular TR, the innerHTML of the div tag. How to do it?
You can't have a TR as a child of a DIV, even if the DIV is hidden (it's invalid markup). You can't modify a table by changing its innerHTML in IE < 9 (though you can write an entire table or change the contents of a cell). Use DOM methods.
Likely the best method is to clone a row, then update name and id properties, plus anything else that needs it, and append it to the TBODY. If you append to the TABLE, most browsers are OK but IE will barf, so append to the TBODY.
Extremely simple example:
<table>
<tr onclick="this.parentNode.appendChild(this.cloneNode(true))">
<td>Here is a cell in a row
<td>Here is a cell in a row
</table>
If you're trying to clone a table row then use another table row, not a div. And don't use innerHTML, use cloneNode
<table>
<tr id="clone_me" style="display:none">
<td>...</td>
</tr>
</table>
<script>
var original_node = document.getElementById('clone_me');
var clone_node = original_node.cloneNode(true);
clone_node.removeAttribute('id'); // Prevent duplicate ID
try {
clone_node.style.display = 'table-row';
}
catch(iesucks) {
clone_node.style.display = 'block'; // Should be 'table-row' but need this hack for IE 6-7
}
original_node.parentNode.appendChild(clone_node); // Add new node to end of table
</script>
If you find older IE's struggle with display:table-row then try toggling visibility instead.
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?
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.
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'
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.
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.