All geek questions in one place

How to process multiple <form> s in one table and check HTML

The question is - it seems that I cannot have two forms embedded in the same table and check my HTML. For example, the W3 Validator gives me an Element <form> not allowed as child of element <tr> in this context. I see no way to get around validation errors.

I want to achieve this:

  • In the “row” html table, I have and can change some input values, and then use my “Save” button at the end of the line to save them
  • If I need to delete a row, I can do this by clicking the "Delete" button.
  • It makes sense for me to have two forms: one for the "Save / Delete" button, for each line.
  • I can have several lines, each line with its own "Save / Delete" button

UI example

Numbers are input fields, and save / delete buttons are. enter image description here

My simplified inappropriate HTML below:

 <!DOCTYPE html> <html> <head> <title>HTML</title> </head> <body> <table> <tr> <form> <td><input type="text" name="row_id" value="1"></td> <td><input type="text" name="five" value="5"></td> <td><input type="text" name="three" value="3"></td> <td><input type="submit" value="Save This Row"></td> </form> <td><form> <input type="text" name="row_id" value="1"> <input type="submit" value="Delete This Row"> </form></td> </tr> </table> </body> </html>

HTML works surprisingly, but this is not confirmed. I am looking for a solution in which it works - work and verification.

+6
source share
3 answers

You have several options:

  • Keep your code as is. Its invalid, but it works. In some future browsers this may be unsuccessful, but it is not.
  • Reorganize the code so that all the fields are in the same form and place the entire table inside this form. Perhaps this will require changes to the server side form handler and may require changes to the HTML.
  • Rebuild it so that you have a table with two columns, with the first column containing forms containing internal tables with one row. This requires that you explicitly set the column widths of the internal tables so that everything looks like a single table.
  • Place the Save buttons on the forms (inside the cell) and access these forms using the input buttons using the form attribute. Thus, each form will be inside one cell, and it will be connected with input elements outside it with these attributes. This would be the cleanest solution, but the form attribute is not supported by IE.
+3
source

I know this old post, but just run into it looking for something else. Another solution to this problem, which is now available 3 years later, is to place arrays of text fields and the identifier of the line you want to keep or delete.

Something like:

 <form> <table> <tr> <td><input type="text" name="row_id[1]" value="1"></td> <td><input type="text" name="five[1]" value="5"></td> <td><input type="text" name="three[1]" value="3"></td> <td> <button name="action" type="submit" value="delete_1">Delete</button> <button name="action" type="submit" value="save_1">Save</button> </td> </tr> <tr> <td><input type="text" name="row_id[2]" value="2"></td> <td><input type="text" name="five[2]" value="7"></td> <td><input type="text" name="three[2]" value="10"></td> <td> <button name="action" type="submit" value="delete_2">Delete</button> <button name="action" type="submit" value="save_2">Save</button> </td> </tr> </table> </form>

You can, of course, repeat the rows of the table as often as you want. Each of them has a unique identifier, which is contained in the value of the action button, as well as in an array of input fields. For example, if you click the "Delete" button in the second line, you will get the ACTION value "delete_2" on the server. A quick split, explosion, or similar action will then give you an ACTION and an identifier.

For the save function, you can simply use this identifier to call the corresponding text fields from the corresponding arrays.

This method allows you to embed the entire table in one form.

As a side point, since the DELETE function probably does not require the use of any other variables, since they are rarely updated and then deleted in one go, you can achieve the same goal with a simple URL and a GET parameter for the identifier. However, be careful, as you can allow your users to delete multiple entries by simply changing the URL variables and linking to the page again and again.

Hope this helps someone, and again I realize this is an old post.

+2
source

To add another parameter to the @Jukka list:

  1. Like # 2, the entire table is in one form, but add two additional forms (outside the table) with only hidden fields (one form to save and one form to delete). Buttons on a large form did not represent this form. Instead, they fill in the hidden form fields with the values ​​from this line, and then submit the hidden form. This requires some JavaScript, but unlike option number 2, no changes on the server side are required.
0
source

Source: https://habr.com/ru/post/978699/

More articles:


All Articles