All geek questions in one place

Tabular (X) HTML Forms

I have a set of elements that can be in different states. I want to allow the user to use an (X) HTML form for

  • change state and
  • easily view the status of a group of objects

... so for this I need a layout:

| item1 | radio button for state 1 | radio for state 2 | ... | [update button] | | item2 | radio button for state 1 | radio for state 2 | ... | [update button] |

etc .. I prefer the switches to display lists so that the user can visually scan things in a certain state.

It seemed to me that this is absolutely tabular data. The only problem: you cannot have forms inside the table that intersect the cells of the table (i.e. <tr> <form> <td> ... not valid).

I thought: β€œHey, I could have one giant form wrapping the table, and so that the [update button] value contains the identifiers for each row!” It turns out that some versions of IE send ALL BUTTONS RECORDING BUTTONS in any form.

So I thought it might be possible to fold it with a <div> and put the forms inside a single <td> . But then they break the line into each <div> . So I set their width and made them float: left . But then they are wrapped inside the table cells if the table row is wider than the page and the radio controls do not match the headers.

Can this be laid out, as I suppose? XHTML below shows the intended structure. Note what happens if you resize the browser window under the width of the table (ideally, the name will break or a scroll bar will appear in the table).

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>Test</title> <style type="text/css"> .state-select, .thing-state-name, .update { float: left; width: 8em; } .state-select { text-align: center; } </style> </head> <body> <table> <thead> <tr> <th class="thing-name-header">Thing</th> <th> <div class="thing-state-name">Present</div> <div class="thing-state-name">Absent</div> <div class="thing-state-name">Haven't looked</div> </th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td> <form action="something" method="post"> <input type="hidden" name="id" value="1" /> <div class="state-select"><input type="radio" name="presence" value="present" checked="checked" /></div> <div class="state-select"><input type="radio" name="presence" value="absent" /></div> <div class="state-select"><input type="radio" name="presence" value="unknown" /></div> <div class="update"><input type="submit" value="Update" /></div> </form> </td></tr> <tr> <td>Orange</td> <td> <form action="something" method="post"> <input type="hidden" name="id" value="2" /> <div class="state-select"><input type="radio" name="presence" value="present" /></div> <div class="state-select"><input type="radio" name="presence" value="absent" checked="checked" /></div> <div class="state-select"><input type="radio" name="presence" value="unknown" /></div> <div class="update"><input type="submit" value="Update" /></div> </form> </td></tr> <tr> <td>David Bowie</td> <td> <form action="something" method="post"> <input type="hidden" name="id" value="3" /> <div class="state-select"><input type="radio" name="presence" value="present" /></div> <div class="state-select"><input type="radio" name="presence" value="absent" /></div> <div class="state-select"><input type="radio" name="presence" value="unknown" checked="checked" /></div> <div class="update"><input type="submit" value="Update" /></div> </form> </td></tr> </tbody> </table> </body> </html>
+4
source share
1 answer

Why not wrap the entire table with one form element, as you said, and instead of calling each group of switches "presence", call them "presence [ID]", where ID is the identifier of the row you are updating. For instance:

 <div class="state-select"><input type="radio" name="presence[0]" value="ipresent" checked="checked" /></div> <div class="state-select"><input type="radio" name="presence[0]" value="absent" /></div> <div class="state-select"><input type="radio" name="presence[0]" value="unknown" /></div> <div class="update"><input type="submit" value="Update" /></div>

...

 <div class="state-select"><input type="radio" name="presence[1]" value="present" checked="checked" /></div> <div class="state-select"><input type="radio" name="presence[1]" value="absent" /></div> <div class="state-select"><input type="radio" name="presence[1]" value="unknown" /></div> <div class="update"><input type="submit" value="Update" /></div>

Then you can use PHP to easily scroll through each group of radio buttons and easily update all fields. I tested the code below along with the code above and it worked very well.

 <? foreach($_POST['presence'] as $id => $value){ echo "ID ".$id." is ". $value . "<br>"; //Run your update code with the variables $id and $value } ?>

Implementing this with the code you provided looks something like this:

 <? if(isset($_POST['update'])){ foreach($_POST['presence'] as $id => $value){ echo "ID ".$id." is ". $value . "<br>"; //Run your update code with the variables $id and $value } } ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>Test</title> <style type="text/css"> .state-select, .thing-state-name, .update { float: left; width: 8em; } .state-select { text-align: center; } </style> </head> <body> <form method="post"> <table> <thead> <tr> <th class="thing-name-header">Thing</th> <th> <div class="thing-state-name">Present</div> <div class="thing-state-name">Absent</div> <div class="thing-state-name">Haven't looked</div> </th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td> <div class="state-select"><input type="radio" name="presence[1]" value="present" checked="checked" /></div> <div class="state-select"><input type="radio" name="presence[1]" value="absent" /></div> <div class="state-select"><input type="radio" name="presence[1]" value="unknown" /></div> <div class="update"><input type="submit" name="update" value="Update" /></div> </td></tr> <tr> <td>Orange</td> <td> <div class="state-select"><input type="radio" name="presence[2]" value="present" /></div> <div class="state-select"><input type="radio" name="presence[2]" value="absent" checked="checked" /></div> <div class="state-select"><input type="radio" name="presence[2]" value="unknown" /></div> <div class="update"><input type="submit" name="update" value="Update" /></div> </td></tr> <tr> <td>David Bowie</td> <td> <div class="state-select"><input type="radio" name="presence[3]" value="present" /></div> <div class="state-select"><input type="radio" name="presence[3]" value="absent" /></div> <div class="state-select"><input type="radio" name="presence[3]" value="unknown" checked="checked" /></div> <div class="update"><input type="submit" name="update" value="Update" /></div> </td></tr> </tbody> </table> </form> </body> </html>

And submitting the form will give you:

 ID 1 is present ID 2 is absent ID 3 is unknown
+3
source

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

More articles:


All Articles