时间戳

首页 > 解决方案 > 带有在 JS 中创建的动态条目的 PHP 帖子

javascript - 带有在 JS 中创建的动态条目的 PHP 帖子

问题描述

我有一个按钮，允许用户添加另一行以添加不同类型的退回设备。我将此数据发布到另一个页面以打印出来。如果我尝试从 post 数组中检索数据，我只能获取条目中的最后一个

我尝试将名称设置为 name="device[]" 然后添加一个值 "key" 但由于我使用的是下拉选择，所以我不能这样做。

<select name="device-type[]">
   <option value="" disabled selected hidden>Select Equipment Type</option>
   <option value="dvr">DVR</option>
   <option value="modem">Modem</option>
   <option value="router">Router</option>
   <option value="other">Other</option>
</select>

我有一个按钮，它调用一个 JS 函数来添加另一个与之相同的选择元素。

JS代码：

function addBox(){
    $("#devices").append('<select name="device-type" class="focus:outline-none plain-field">\n' +
        '                    <option>Select Equipment Type</option>\n' +
        '                    <option value="dvr">DVR</option>\n' +
        '                    <option value="modem">Modem</option>\n' +
        '                    <option value="router">Router</option>\n' +
        '                    <option value="other">Other</option>\n' +
        '                </select>\n' +
        '                <input class="focus:outline-none plain-field" name="device-number" type="text" placeholder="CMAC/SN">\n' +
        '                <input type="checkbox" name="power-cord" class="">Power Cord?\n' +
        '                <input type="checkbox" name="remote" class="">Remote?\n' +
        '                <br>');
    return false;

PHP 从中检索信息：

<p><?php echo $_POST['device-type']?></p>
<p><?php echo $_POST['device-number']?></p>

我的问题是，如何在 post 数组中检索设备类型和编号？

标签： javascriptphphtml

解决方案

看起来您需要在[]字段名称中添加方括号，以使它们成为一个多数组以$_POST进行处理。此外，如果您想通过 标识每一行index，则在单击ADD按钮时，您可以计算select生成的框的数量以创建计数并将其用作每个 的键索引array。如果您在文件中运行以下内容PHP，单击ADD按钮添加一些select框，然后单击SUBMIT，您将看到您的数据以multi-dimensional array. 我还为您的初始选择框指定了多数组的索引 0。

在此处输入图像描述 在此处输入图像描述

 <?php
    if(isset($_POST) && !empty($_POST)) {
        echo "<pre>";
        print_r($_POST);
        foreach($_POST['device-type'] as $key => $type) {
            echo "<b>Type:</b> " . $type . " ";
            echo (isset($_POST['device-number']) && isset($_POST['device-number'][$key]) && !empty($_POST['device-number'][$key])) ? "<b>Number:</b> " .$_POST['device-number'][$key] . " " : "";
            echo (isset($_POST['power-cord']) && isset($_POST['power-cord'][$key]) && !empty($_POST['power-cord'][$key])) ? "<b>Power Cord:</b> " .$_POST['power-cord'][$key] . " " : "";
            echo (isset($_POST['remote']) && isset($_POST['remote'][$key]) && !empty($_POST['remote'][$key])) ? "<b>Remote:</b> " .$_POST['remote'][$key] . " " : "";
            echo "<br/>";
        }
        echo "</pre>";
    }
    ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        function addBox() {
            //console.log($('select.plain-field').length + 1);
            var rowCount = $('select.plain-field').length + 1;
            $("#devices").append('<br/><select name="device-type[' + rowCount + ']" class="focus:outline-none plain-field">\n' +
                                 '                    <option value="">Select Equipment Type</option>\n' +
                                 '                    <option value="dvr">DVR</option>\n' +
                                 '                    <option value="modem">Modem</option>\n' +
                                 '                    <option value="router">Router</option>\n' +
                                 '                    <option value="other">Other</option>\n' +
                                 '                </select>\n' +
                                 '                <input class="focus:outline-none plain-field" name="device-number[' + rowCount + ']" type="text" placeholder="CMAC/SN">\n' +
                                 '                <input type="checkbox" name="power-cord[' + rowCount + ']" class="">Power Cord?\n' +
                                 '                <input type="checkbox" name="remote[' + rowCount + ']" class="">Remote?\n' +
                                 '                ');
            return false;
        }
    </script>
    <form action="" method="post">
        <div id="devices">
            <select name="device-type[0]">
                <option value="">Select Equipment Type</option>
                <option value="dvr">DVR</option>
                <option value="modem">Modem</option>
                <option value="router">Router</option>
                <option value="other">Other</option>
            </select>
        </div>
        <input type="button" onclick="addBox();" value="Add [+]" />
        <br/>
        <br/>
        <input type="submit" value="Submit" />
    </form>

推荐阅读