jQuery-UI selectable outputting array to hidden form

Question

This site always comes up with answers to my questions when using Google but I've struggled to find an answer to this so thought I would register, say hello and ask :)

I have a timetable (using html tables) and each cell is marked as selectable for jquery-ui selectable.

i then have a form with button that will use POST to book the selected cells.

<form  method="get" action="../test" id="add">
                    <button type="submit" class="btn btn-primary">Book selected period(s)</button>
                </form>

In the selectable serialize example it shows it selecting the numbers fine. but when I go hit the button (using GET for testing) it seems to get the wrong numbers. For example if i select cell 1 and click book, it shows cell_id=1 in the GET, but if i select cell 1 and cell 2, it loops through counting them, so GET shows cell_id=1, cell_id=1, cell_id=2 (so counting 1, then 1+1 rather than just 1+1)

this means if i select 5 cells, I get 15 results (1+2+3+4+5) rather than 5. Is there a way around this. this is what i have so far in the javascript:

         $( "#selectable" ).selectable({
         filter: ".selectable",
            stop: function() {
                $( ".ui-selected", this ).each(function() {
                    var data = $(this).data();
                    $(data).each(function(key, value){
                        var period_id = document.createElement("input");
                        period_id.setAttribute("type", "hidden");
                        period_id.setAttribute("name", "booking[1][period]");
                        period_id.setAttribute("value", data.period);
                        document.getElementById("add").appendChild(period_id);
                   });

                });
            }
        });

In the bit above i'm getting the period_id from the cell which is taken from some other php. it works as intended if selecting single cells just not multi. if any other code is needed to help answer this, please let me know

thanks

edit as an addition, this is what i'm hoping to achieve (for a clearer understanding of what i mean). user sees timetable grid. they can select one cell and choose book, which would pass via POST an array of the period and day they selected to go to a booking.php. they also have the option of selecting multiple cells, and clicking book, which would then pass each cell as an array for booking so php could loop through all cell arrays and book multiple cells using their room/day id's as returned by the jquery selectable.

Why are you iterating over $(data)? It seems you're only interested in data.period, so a loop shouldn't be necessary. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jun 1, 2012 at 10:28
at the moment i'm only using data.period to test it works. there are other data fields i need in the future once this is resolved — Dopefishmedia
– Dopefishmedia, Commented Jun 1, 2012 at 10:44

Kevin Huemann · Accepted Answer · 2012-06-05 06:31:17Z

Here is a solution I came up with using a hidden input element.

Jquery

                //Activities Selectable
            $(".selectable-activities").selectable(
                {filter: "li"},
            {
                stop: function() 
                    {//places selected in input box
                        var text = "";
                        $( "#activities-input" ).val(text);
                        $( ".ui-selected", this ).each(function() {
                            var index = $(this).attr("id");
                            text = text + " " + index;
                            $( "#activities-input" ).val(text);
                        });
                    }


            },
            //Clears input box on reload
            {   create: function() {$( "#activities-input" ).val("");}}
            );

Html

                <fieldset>
                <legend>Environmental</legend>
                <ol class="selectable selectable-activities">
                    <li class="ui-state-default" id="LNTS" >"leave No Trace" Skills</li>
                    <li class="ui-state-default" id="Aqua" >Aquatic Ecology / Study</li>
                    <li class="ui-state-default" id="OutSkill" >Camping Skills / Outdoor Living</li>
                    <li class="ui-state-default" id="Cons" >Conservation</li>
                    <li class="ui-state-default" id="Ento" >Entomology</li>
                    <li class="ui-state-default" id="Farm" >Farming / Gardening</li>
                    <li class="ui-state-default" id="Fores" >Forest Ecology</li>
                    <li class="ui-state-default" id="Geol" >Geology (Earth)</li>
                    <li class="ui-state-default" id="Herp" >Herpetology (amphibians & Reptiles)</li>
                    <li class="ui-state-default" id="Mari" >Marine Science</li>
                    <li class="ui-state-default" id="Natur" >Nature Explosure</li>
                    <li class="ui-state-default" id="Oni" >Ornithology (Birds)</li>
                    <li class="ui-state-default" id="Vet" >Veterinary Science</li>
                    <li class="ui-state-default" id="WildLi" >Wildllife Ecology</li>
                    <li class="ui-state-default" id="Zoo" >Zoology (Animals)</li>
                </ol>
                </fieldset>

                <!--Here is the hidden input-->
                <input type="hidden" name="a" id="activities-input" />

Pethical · Accepted Answer · 2012-06-01 10:26:52Z

0

<pre>
     $( "#selectable" ).selectable({
     filter: ".selectable",
        stop: function() {
            $( ".ui-selected", this ).each(function() {
                var data = $(this).data();
                $(data).each(function(key, value){
                    var period_id = document.createElement("input");
                    period_id.setAttribute("type", "hidden");
                    period_id.setAttribute("name", "booking["+key+"][period]");
                    period_id.setAttribute("value", data.period);
                    document.getElementById("add").appendChild(period_id);
               });

            });
        }
    });

booking[1] => booking[key].

answered Jun 1, 2012 at 10:26

Pethical

1,49211 silver badges18 bronze badges

1 Comment

Dopefishmedia Over a year ago

that still gives me multiple results, 3 bookings will still return 6 results. ideally in the end i want each cell selected to return period and day in an array, so i'd have booking[1][period]/[day] and booking[2][period]/[day] for 2 bookings, so i can then use php to loop through each array

Dopefishmedia · Accepted Answer · 2012-06-21 08:51:25Z

0

The way I ended up resolving this was to add

var count = 0

just before

$( ".ui-selected", this ).each(function() {

then each field had this

date_id.setAttribute("name", "booking["+count+"][date]");

then at the end of the loop just have

count = count + 1

worked for me, but thanks to everyone for the advice

answered Jun 21, 2012 at 8:51

Dopefishmedia

313 bronze badges

Collectives™ on Stack Overflow

jQuery-UI selectable outputting array to hidden form

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related