Get list of select values as pipe delimited in hidden field and submit

Viewed 461

I have a web form with two select lists, users move the items they want from one select box to another select box, when the user hits the Save button I want to get a list of all of the values in the select box named "Two" and input them into the hidden field called "TwoArray" then submit the form. I thought I could use .map to do this but I haven't been able to figure it out, the code so far is below. NOTE: I want a delimited list of ALL values in the Select with name Two regardless of if they are "selected" or not. Help please! Output in the hidden field in this example should be "103,109"

<!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="100">Loc1</option>
            <option value="101">Loc2</option>
            <option value="102">Loc3</option>
        </select>
        &nbsp;
        &nbsp;
        <select id="Two" name="Two" multiple="multiple">
            <option value="103">Loc4</option>
            <option value="109">Loc10</option>
        </select>

        <br />
        <input type="text" name="something" /><br />
        <input type="hidden" name="form" value="1" />
        <input type="hidden" name="TwoArray" value="" />
        <input type="button" id="leftall" value="<<" />
        <input type="button" id="left" value="<" />
        <input type="button" id="right" value=">" />
        <input type="button" id="rightall" value=">>" />
        <input type="button" id="update" value="Save" />
        <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>
1 Answers
Related