Question

I know this is a similar question to my previous one however its slightly different.

I have this script adding each ‘dropped’ element to a list. Now i need it adding into a variable / hidden field so i can pass it to the next page via a form.

When i run it at the moment. It alerts for each one however, it does it not just for every item dropped but if there are 10 items dropped it will run 10 times per item droped rather than once per item dropped.

Any help would be great.

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

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

            var listItems = $('.listItem'); 

                $('#calendarform').submit(function() {

                        listItems.each(function(){   //For each event do this:

                            alert( listItems.text() );                  

                        });

                    return false;

                });

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

Answer 1

the problem lies in this code

listItems.each(function(){  //For each event do this:
    alert( listItems.text() );                  
});

you are alerting the text of all the list items for each list item.

use jQuery(this) to access the current item within an each block

listItems.each(function(){   //For each event do this:
    alert( $(this).text() );                  
});

Assuming your code is within a drop event handler, you are also adding a submit handler each time you drop. This means that each time you drop, you queue up another submit event. This is probably not desired. Move this submit(function(){}) block outside your drop handler to prevent it from firing that function more than once.

$('#calendarform').submit(function(e) {
    var listItems = $('.listItem'); 
    listItems.each(function(){   //For each event do this:
        alert( listItems.text() );                  
    });
    e.preventDefault();//stop normal behavior
    return false;

});

and to create elements on the fly you just pass jQuery the html, and append it to your form.

$('<input type="hidden" name="listItem[]"/>').appendTo("#calendarForm").val(listItem.text())

you may have to fiddle with the name element to get it to submit as an array in your server side language, but you’re also within an each loop, which provides you with an index, so you can do the following.

$('#calendarform').submit(function(e) {
        var form = $(this);
        var listItems = $('.listItem'); 
        listItems.each(function(index){   //For each event do this:
            var listItem = $(this);
            $("<input type='hidden'/>").val(listItem.text()).appendTo(form).attr('name', 'listItem[' + index + ']');
        });
        e.preventDefault();//stop normal behavior
        return false;

    });