Question

Consider the following HTML snipped:

<input type="submit" value="Delete selected"><input type="submit" value="Print selected">
<div class="table">
  <div class="row">
    <span class="cell"><input type="checkbox" name="chose" value="1"></span>
    <span class="cell"><input type="text" name="name" value="Joe"></span>
    <span class="cell"><input type="text" name="age" value="23"></span>
    <span class="cell"><input type="submit" name="save" value="Save"></span>
    <span class="cell"><input type="submit" name="delete" value="Delete"></span>
  </div>
  <div class="row">
    <span class="cell"><input type="checkbox" name="chose" value="2"></span>
    <span class="cell"><input type="text" name="name" value="Jack"></span>
    <span class="cell"><input type="text" name="age" value="42"></span>
    <span class="cell"><input type="submit" name="save" value="Save"></span>
    <span class="cell"><input type="submit" name="delete" value="Delete"></span>
  </div>
</div>

The result is the following document:

I want to crate two forms in such a way that the upper buttons submit the ckeckboxes…

…and the row buttons submit the inputs in the same line:

Although this example has only two lines, I would like to know how to do it to an arbitrary number of rows. Also, the solution should not use JavaScript (even because I know how to do it with JavaScript anyway). OTOH one can rearrange the position of elements and use CSS if not changing the visual result.

So, is it possible to do it?

Note: I am using <div>s instead of <table> so we need not to think about the correctness of using forms inside tables.

Answer 1

Part of the post information that is sent is the name of the button that was used to submit with the value “Submit”. If you name them accordingly, you can determine which row is to be saved.