Geek Answers Handbook

How to allow user to enter elements into HTML table

I want to allow the user to enter a list of faces in a web application, and then send them as one batch. Each line looks something 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 with one line of blank entries, and I want the new line to be added to the list whenever the user fills in any of the fields - i.e. the list is growing on demand. Similarly, I want the row to disappear whenever the user clears all the fields in it.

What is the easiest, most reliable and convenient way to implement it?

Finally, how do I send this value table back to the server? How can I specify the name of each field so that the server can create a list of Person objects based on the entered values?

+4
source share
4 answers

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

+4
source

How can I specify the name of each field so that the server can create a list of Person objects 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>

What generates the 'person' array

+2
source

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

  <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 method can help you easily get all the values ​​of the whole string using (i.e.) $ GET ['person'. $ I.'fname '], $ GET [' person '. $ I.'lname '] ... etc.

0
source

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 am not familiar with server-side scripting, so my answer is only partially. Here is an example . In addition, I recommend adding input validation using JS.

0
source

More articles:


All Articles