'Nesting of HTML Forms in one table element

I wish to nest two separate forms within a table:

<form action="action1">
<table>
<tr>
<td>...</td>
<td><input type="checkbox" ....></td>
<td>Tag1</td>
</tr>
<tr>
<td>...</td>
<td><input type="checkbox" ....></td>
<td>Tag2</td>
</tr>
.
.
.
</table>
<input type="submit">
</form>

Now for each row, I wish to add a button which would land on a different page called action2. All that action2 requires is to know corresponding to which tag (eg., Tag1, Tag2, ....) was the button clicked.

I was thinking of adding the following element in each row.

<td><form action="action2"><input type="hidden" name="tag_" value="corresponding_tag_in_this_row" /><input type="submit"></form></td>

I am generating the table programmatically but when I added this new column, I noticed that nesting of FORM elements in HTML is not allowed. What would be a good alternative to solve this?

action1 requires all the data from the checkboxes and the action2 just needs to know the corresponding tag of the row. action2 and action1 may get each others data, i.e., even if action1 gets data corresponding to both action1 and action2, it is programmed to leave out data for action2 and vice versa.

I do not wish to use any JavaScript. Suggestions for pure HTML would be highly appreciated so that there are no browser compatibility issues.

htmlformshtml-table


Solution 1:[1]

Based on this:

action1 requires all the data from the checkboxes and the action2 just needs to know the corresponding tag of the row.

You don't need a form for action2. Instead use a simple a link and construct the appropriate URL programmatically.

For example:

<td><a href="action2?tag={corresponding_tag_in_this_row}">Do Action 2</a></td>

Where {corresponding_tag_in_this_row} is replaced by what ever langauge or templating language you are using with the appropriate tag for that row. Given that you need this to just

[print] the tag corresponding to the button which was clicked

This should do that without any issues, will reduce the amount of HTML required, and allow a user to bookmark that specific tag.

Solution 2:[2]

You can't make a form submit to different actions. You either have to use JavaScript and make each button open a different page or make different forms which submit to different pages. E.g. If you want to make button1 to submit to page1 and button2 to submit to page2 you should put each one inside different forms with different action properties.

An example using pure javascript:

<script type="text/javascript">
    function sendForm(action) {
         MyForm.action = action;
         MyForm.submit();
    }
    ButtonOne.addEventListener(
        'click', 
        function() { sendForm('action_one.php') }, 
        false);
    ButtonTwo.addEventListener(
        'click', 
        function() { sendForm('action_two.php') }, 
        false);
    ButtonThree.addEventListener(
        'click', 
        function() { sendForm('action_three.php') }, 
        false);
</script>

And later in your code:

<form id="MyForm">
    <input …/>
    …
    <button id="ButtonOne" />
    <button id="ButtonTwo" />
    <button id="ButtonThree" />
</form>

Solution 3:[3]

HTML allows you to target different actions in buttons. The formaction attribute can be set to a different action than the parent form element. I've linked to the MDN for attributes on the input type="submit" element, but it can be used for button type="submit" elements as well. So your HTML should be able to be something like:

<td><input formaction="action2" type="submit"></td>

This will submit the entire form to that action URL however, so it will be up to you to determine how to use the information differently, on the server-side.

HTML does not allow for nesting of form elements, however.

Solution 4:[4]

Depending on your language of choice you could just have it all in one form, posting to the same file, then in that file do something based on which button was pressed.

For example in php you can do something like:

<form action="processing.php" method="post">
    ...
    <input type="submit" name="action1" value="Do Action 1" id="action1Button">
    <input type="submit" name="action2" value="Do Action 2" id="action2Button">
</form>

Then in the processing.php:

    if (!empty($_POST['action1'])) {
    // DO ACTION 1 STUFF
    // Only look for the inputs etc that relate to action 1

    }
    // could be an if/else if there are only 2
    if (!empty($_POST['action2'])) {
    // DO ACTION 2 STUFF
    // Only look for the inputs etc that relate to action 2
    }

Solution 5:[5]

follow these steps: 1.submit the results into the action page using a method(like post) 2.then specify the header location and redirect into the specified page using if.... else... clause as follows:

if($_POST['ACTION1'])
{
header('Location: http://www.example.com/');
}
elseif($_POST['ACTION2'])
{
header('Location: http://www.example2.com/');
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Heretic Monkey
Solution 4 Jake
Solution 5 gokul krishna

Related Questions