GET input values from outside a FORM with multiple buttons

Question

I have a table included in a form, for the purpose of gathering the ID value of each row with a checkbox, and a button from outside the table to submit the form from outside of it.

Right now it works only for one function, submitting with a POST, but what if I wanted multiple functions?

I cannot include the buttons inside the form, because I have other functions to be placed inside it and would conflict breaking the form.

My code atm is:

<html>
<body>
<button type="submit" form="form">Submit</button>
<table>
    <thead>
        <tr><th>Value</th></tr>
        <tr><th>Name</th></tr>
    </thead>
<tbody>
<form action="page.php" method="POST" id="form">
    <?php
    foreach($datas as $d){
    echo '<tr><td><input type="checkbox" name="array[] value='.$d["id"].' />'.$d["id"].'</td></tr>';
    }
    ?>
</form> 
</tbody>
</table>

This works fine if I only want to submit the values, but what if I want multiple buttons with multiple actions, something like this, from outside the form:

<html>
<body>
<button type="submit" form="form" name="submit">Submit</button>
<button type="submit" form="form" name="delete">Delete</button>
<button type="submit" form="form" name="export">Export</button>
...

And then gather them in page.php with:

if (isset($_POST['submit'])) //do submit actions
if (isset($_POST['delete'])) //do delete actions
if (isset($_POST['export'])) //do export actions

I've tried doing so, with no luck, so, how would you fix that? Is there any ways of accomplish this?

Your html is invalid. The FORM cannot be locate where it is - it must either wholly contain the entire table or be wholly contained itself within a single table cell. — Professor Abronsius, Jan 01 '21 at 20:23
@ProfessorAbronsius It works though.. but thanks I'll fix that as well for better formatting. About my questions, you got any ideas? is it possible to use the buttons like that and still gather the value? — Ferdinando Di Lauro, Jan 01 '21 at 20:25
Incidentally I answered a [very similar question](https://stackoverflow.com/questions/65506142/deleting-one-row-using-a-button/65507558#65507558) recently which should give an idea how you can do this — Professor Abronsius, Jan 01 '21 at 20:25

score 0 · Accepted Answer · answered Jan 01 '21 at 20:36

Really there's nothing particularly wrong with what you're trying to do. Here's a sample that should demonstrate how you could do multiple actions for a single form based on which button is clicked outside of the form.

<?php

$action = false;

if (filter_input(INPUT_POST, 'submit'))
    $action = 'submit';
else if (filter_input(INPUT_POST, 'delete'))
    $action = 'delete';
else if (filter_input(INPUT_POST, 'export'))
    $action = 'export';


$datas = array(
    array('id' => 1),
    array('id' => 2),
    array('id' => 3)
);

$ids = array();
if ($action) {
    $ids = filter_input(INPUT_POST, 'ids', FILTER_SANITIZE_NUMBER_INT, FILTER_REQUIRE_ARRAY);
}
?>

<html><head><title>Test</title></head>
<body>

<p>
<?php
switch ($action) {
    case 'submit':
        echo 'Submitting: ' . implode(', ', $ids);
        break;
    case 'delete':
        echo 'Deleting.: ' . implode(', ', $ids);
        break;
    case 'export':
        echo 'Exporting: ' . implode(', ', $ids);
        break;
    default:
        echo 'Waiting for action.';
        break;
} ?>
</p>

<form method="POST" id="form">
    <table>
    <?php
    foreach($datas as $d){
        printf('<tr><td><input type="checkbox" name="ids[]" value="%1$d" %2$s />%1$d</td></tr>',
            $d["id"],
            in_array($d["id"], $ids) ? 'checked="checked"' : '');
    }
    ?>
    </table>
</form>


<button type="submit" form="form" name="submit" value="submit">Submit</button>
<button type="submit" form="form" name="delete" value="delete">Delete</button>
<button type="submit" form="form" name="export" value="export">Export</button>

</body>
</html>

I prefer using filter_input because it'll make your check against the parameter more consistent and easier handle what you expect.

score 0 · Answer 2 · answered Jan 01 '21 at 21:04

Better use ajax.

    <html>
    <body>
    <button id="sub">Submit</button>
    <button id="del">Delete</button>
    <button id="exp">Export</button>
    <table>
        <thead>
            <tr><th>Value</th></tr>
            <tr><th>Name</th></tr>
        </thead>
    <tbody>
    <form action="page.php" method="POST" id="form">

        <imput type="hidden" name="submit" id="isub" value="0">
        <imput type="hidden" name="delete" id="idel" value="0">
        <imput type="hidden" name="export" id="iexp" value="0">

        <?php
        foreach($datas as $d){
        echo '<tr><td><input type="checkbox" name="array[] value='.$d["id"].' />'.$d["id"].'</td></tr>';
        }
        ?>
    </form> 
    </tbody>
    </table>

<script>
   function saveItem(redirect)
    {
        
        $.post(saveUrl, $('#form').serialize(), function () {
            window.location.assign(redirect);
        });
    }


    $('#sub').on('click', function (e) {
        e.preventDefault();
        $('#isub').val(1);
        saveItem('page.php');
    });

    $('#del').on('click', function (e) {
        e.preventDefault();
        $('#idel').val(1);
        saveItem('page.php');
    });

    $('#exp').on('click', function (e) {
        e.preventDefault();
        $('#iexp').val(1);
        saveItem('page.php');
    });
</scrip>

You could do this approach without the hidden inputs by serializing the form into a variable and adding a property indicating which action is being taken. Having a javascript redirect at the end of an ajax call defeats one of the benefits of AJAX since you're terminating an asynchronous experience with a page change/refresh/etc. — Lawrence Johnson, Jan 02 '21 at 02:41

GET input values from outside a FORM with multiple buttons

2 Answers2