使用多个按钮从 FORM 外部获取输入值答案

【问题标题】：GET input values from outside a FORM with multiple buttons使用多个按钮从 FORM 外部获取输入值
【发布时间】：2021-01-01 20:17:40
【问题描述】：

我有一个表格包含在一个表格中，目的是收集每行的 ID 值，其中包含一个复选框，以及一个表格外部的按钮，用于从表格外部提交表格。

目前它只适用于一个函数，使用 POST 提交，但如果我想要多个函数怎么办？

我不能在表单中包含按钮，因为我有其他功能要放置在其中并且会冲突破坏表单。

我的自动取款机是：

<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>

如果我只想提交值，这可以正常工作，但如果我想要多个按钮和多个操作，例如，从表单外部：

<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>
...

然后将它们收集到 page.php 中：

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

我试过这样做，但没有运气，那么，你会如何解决这个问题？有没有办法做到这一点？

【问题讨论】：

您的 html 无效。 FORM 无法定位到它所在的位置 - 它必须完全包含整个表格或完全包含在单个表格单元格中。
@ProfessorAbronsius 虽然它可以工作.. 但谢谢我也会修复它以获得更好的格式。关于我的问题，你有什么想法吗？是否可以使用这样的按钮并仍然收集价值？
顺便说一句，我最近回答了very similar question，这应该可以让您了解如何做到这一点
是的，添加一些逻辑是可能的

标签： php html forms post

【解决方案1】：

确实，您正在尝试做的事情并没有什么特别的错误。这是一个示例，应该演示如何根据在表单外单击的按钮对单个表单执行多个操作。

<?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>

我更喜欢使用filter_input，因为它会使您对参数的检查更加一致，并且更容易处理您所期望的。

【讨论】：

【解决方案2】：

最好使用 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>

【讨论】：

您可以在没有隐藏输入的情况下执行此方法，方法是将表单序列化为变量并添加一个指示正在执行的操作的属性。在 ajax 调用结束时进行 javascript 重定向会破坏 AJAX 的好处之一，因为您正在通过页面更改/刷新/等终止异步体验。
我的例子只是一个指导 - 不是最终的解决方案