Question

I have a drag and drop calendar that ‘on drop’ needs to pass the details into a variable.

So far i have managed to get it to append in a textarea so i can see it is recording the data fine or create one hidden field that will take the last drop.

However, I need each item to be in a hidden field so I can pass it onto the next page where it will then be processed in PHP.

I am guessing that i would need a loop of some kind so for each drop…generate hidden field.

But i am having no luck getting it to work.

Here is my code. Any help would be really useful.

Thanks

 drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);


            //Record and add dropped items to list
            var txt = $("#listbox");
            var dtstart = copiedEventObject.start + '\n'
            var caltitle = copiedEventObject.title

            txt.val(txt.val() + dtstart); // For our reference - Remove later

                var input = document.createElement("input");
                input.setAttribute("type", "hidden");
                input.setAttribute("name", "dtstart");
                input.setAttribute("value", dtstart);

                //append to form element that you want .
                document.getElementById("calendarform").appendChild(input)

            // remove the element from the "Draggable Events" list
            $(this).remove();

        }
    });


});

Answer 1

What you can do is to make the listbox a “ul” element as follows

<ul id = "listbox"> 

 </ul>

then add the following jquery to your function

var txt = $('#listbox');     
txt.append("<li class ='listItem'> "+dtstart +"</li>")

at the end you will have a list of <.li>(dot is there otherwise it wouldn’t be shown in the answer) elements with the same class. Then you can get all the elements of class “listItem” and pass the values to your next page

hope this answer is clear

EDIT

to get all the values in ‘listItem’ class you can do the following

var listItems = $('.listItem');

listItems.each(function(){
    // your code goes here for each record
});