How to submit a list of items in an html form

Question

Okay it seems the original request was confusing so let me try re-wording. I have a form, see below code, with two Selects, users move things from the Available Locations list (One) to the Selected Locations list (Two) and input some other fields (I included one text field as an example), I need to be able to see what values are in the first select (One) and which are in the second list (Two)

There will be a large number of values so having the user just click or ctrl+click on the values they want isnt practical.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test for P1727410</title>
    <script src="/ref-files/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            function moveItems(origin, dest) {
                $(origin).find(':selected').appendTo(dest);
            }

            function moveAllItems(origin, dest) {
                $(origin).children().appendTo(dest);
            }

            $('#left').click(function () {
                moveItems('#Two', '#One');
            });

            $('#right').on('click', function () {
                moveItems('#One', '#Two');
            });

            $('#leftall').on('click', function () {
                moveAllItems('#Two', '#One');
            });

            $('#rightall').on('click', function () {
                moveAllItems('#One', '#Two');
            });
        });
    </script>
</head>
<body>
    <h2>Test for P1727410</h2>
    Available Locations | Selected Locations
    <form method="POST" action="#">
        <select id="One" name="One" multiple="multiple">
            <option value="1">Loc1</option>
            <option value="2">Loc2</option>
            <option value="3">Loc3</option>
        </select>
        &nbsp;
        &nbsp;
        <select id="Two" name="Two" multiple="multiple">
        </select>

        <br />
        <input type="text" name="something" /><br />
        <input type="hidden" name="form" value="1" />
        <input type="button" id="leftall" value="<<" />
        <input type="button" id="left" value="<" />
        <input type="button" id="right" value=">" />
        <input type="button" id="rightall" value=">>" />
        <br />
        <input type="Submit" name="Submit" value="Submit" />
    </form>
    <p>
    <?php
        if(isset($_POST['form'])) {
            echo "<pre>";
            print_r($_POST);
            echo "</pre>";
        }
    ?>
    </p>
</body>
</html>

Why not **select all/none**? What's exactly is the question? What are the options? — , Sep 17 '17 at 03:45
@DaniSpringer I have a list of locations, potentially up to 892 of them, I'm looking to be able to select certain locations from the Available locations and add them to the Selected locations, on the back end we're updating the user with the locations, they could be selecting anything from 1 to 892 locations, select all is great if they want them all but in many cases they will want a subset — Aaron O, Sep 17 '17 at 04:15
So add a search box to filter out results. Or other filters. I don't understand what the question is. If it's "can you do this for me", then no. SO helps troubleshooting: [mcve] — , Sep 17 '17 at 04:16
@DaniSpringer I have simplified down the code shared, it works to allow users to select what they want into the second list, all I'm asking is how to take what the user selects into the second list and submit it to the back end, code is in the original post. I'm not looking for anybody to do this for me, just stuck on how to make this happen, we've been doing this in a client app and we're attempting to duplicate the functionality in a web app, but can't find a way to do this in HTML/PHP/AJAX — Aaron O, Sep 17 '17 at 04:44
I'm still not 100% sure what you mean, but you probably want to add this comment (perhaps shortened) to the post. — , Sep 17 '17 at 04:45
How about this: http://johnwbartlett.com/cf_tipsntricks/index.cfm?TopicID=86 — ADyson, Sep 17 '17 at 04:53
@ADyson thats exactly the UI I'm looking for BUT how do I get the list of selected values in each list to submit? When I var_dump $_POST I don't see anything for those lists. — Aaron O, Sep 17 '17 at 04:56
to submit any HTML element through a normal form submit event, it has to have a "name" attribute. That's missing from both your selects. See https://stackoverflow.com/a/2407401/5947043 for a "multiple" type select, as well. — ADyson, Sep 17 '17 at 04:56
@ADyson I wasn't paying attention when I re-typed the sample code I'm sorry, updated with names. The issue I'm running into is I'm trying to capture a list of all values in the second scrollbox not just the ones the user has clicked on, basically when they move an item into the second list I want it considered "Selected" and get a list of every item they add to the second scrollbox — Aaron O, Sep 17 '17 at 05:00
@DaniSpringer I restated the question hopefully more clearly, I'm sorry if the way it was worded was confusing. — Aaron O, Sep 17 '17 at 05:03
One simple, although mildly clunky, way would be to have javascript intercept the submit event, mark all the elements in the second select as "selected", and then allow the submit to continue. Or you could store all the selected values separately in a hidden field (e.g. as comma-separated values) too and use _that_ to submit to the server. But you'd have to keep it up to date if people remove things again. — ADyson, Sep 17 '17 at 05:09

score 2 · Answer 1 · answered Sep 17 '17 at 06:48

This question is confusing because we're not sure what you exactly want to show on the front-end (HTML + Javascript), what do you want to send to the back-end (PHP), and what do you want to insert/update/delete in the database.

The simplest solution I think of is the following:

You should have 3 tables in your database: users, locations, and user_locations. The user_locations should have at least 2 columns: "user_id" and "location_id".

HTML: Add a new html input hidden:

<input type="hidden" id="two_values" name="two_values" value="" />

Javascript: When user clicks submit button, take all values of the 2nd dropdown, and send them to the server. Like so:

<script>
    $(document).ready(function() {
        // on user clicks submit button, this code will be executed first
        $('form').submit(function() {
            // we'll take all values of the Two dropdown and put them in 1 string
            var all_values = '';
            $("#Two option").each(function() {
                if(all_values === '') {
                    all_values += $(this).val();
                } else {
                    all_values += ',' + $(this).val();
                }
            });
            $('#two_values').val(all_values);
        });
    });
</script>

PHP: Get the two_values, and split them to array.

if(isset($_POST['form'])) {
    $two_values_arr = explode(',', $_POST['two_values']);
    // ...
}

PHP and MySQL: First, delete all previous user's locations:

$q = 'DELETE FROM `locations` WHERE `user_id` = ' . $user_id;
// run the $q ..

Then, do a loop to insert each value for this user

foreach($two_values_arr as $location_id) {
    $q = 'INSERT INTO `user_locations` (user_id, location_id) VALUES (' . $user_id . ', ' . $location_id . ')';
    // run the $q ..
}

Viewing HTML: When user views the page, you should fetch all user's locations, locations the user have should be printed to the Two dropdown, and ones he doesn't have in the One dropdown

Very helpful, I wanted to use a form instead of ajax for the different behaviour wrt redirects and this worked nicely — JonnyRaa, Jan 31 '20 at 14:05

How to submit a list of items in an html form

1 Answers1