PHP post with dynamic entries created in JS

Question

I have a button that allows the user to add another row to add different types of returned equipment. I am posting this data to another page to print out. If I try and retrieve the data from the post array, I can only get the last in the entry

I've tried setting the name to name="device[]" then adding a value of "key" but since I'm using a drop down select, I can't do that.

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

I have a button that calls a JS function to just add another select element identical to that.

JS code:

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 to retrieve the information from that:

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

My question is, how can I retrieve the device type and number in the post array?

Can we please see examples of your JS and PHP to see exactly how you are trying to get the select tag built from that info? Thank you. — Woodrow
– Woodrow, Commented May 16, 2019 at 19:27
@woodrow I added some of my code to explain what I have so far — Ryan Rowe
– Ryan Rowe, Commented May 16, 2019 at 19:40

Jonathan K · Accepted Answer · 2019-05-16 20:14:32Z

0

Simply make your HTML select tag accept multiple values. E.g:

<select name="device_type[]" class="focus:outline-none plain-field" multiple>
....
</select>

You can get the selected values on the PHP end using $_POST['device_type']

Refer to store multiple select option into a PHP array for more information

answered May 16, 2019 at 20:14

Jonathan K

5505 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Woodrow · Accepted Answer · 2019-05-16 20:46:34Z

It looks like you need to add [] brackets to your field names to make them a multi array for $_POST to handle processing. Also, if you want to identify each row by an index, on clicking the ADD button, you can count the amount of select boxes generated to create a count and use that as the key index for each array. If you run the following below in a PHP file, click the ADD button to add some select boxes, and then click SUBMIT, you will see your data echo'd out as a multi-dimensional array. I also gave your initial select box an index of 0 for the multi array.

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

Did this help? Please let me know if you have any questions.

Collectives™ on Stack Overflow

PHP post with dynamic entries created in JS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related