jQuery get a list of class names and add to hidden forms

Question

I have a timetable-making widget that I'm setting up for my website. Subjects are enclosed in individual DIVs which are then dragged up to columns on a table. See example: http://jsfiddle.net/x5T4h/2/ (thank you for previous help)

Now I have a bunch of hidden inputs below the table

<input type="hidden" name="monday" value="">
<input type="hidden" name="tuesday" value="">
<input type="hidden" name="wednesday" value="">
<input type="hidden" name="thursday" value="">
<input type="hidden" name="friday" value="">
<input type="hidden" name="saturday" value="">
<input type="submit" name="submit" class="btn green disabled" value='Save'>

And each subject DIV has a class with it's ID e.g <div id="drag" class="21">Biology</div>

Is there any way I can get Javascript to get the class of each DIV in a column and add it (in order) to the hidden input, based on which day it is.

It seems pretty complicated and I have no clue so any help is greatly appreciated.

My JS already:

<script>
$(function() {
    $( "ul li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });

    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");

            $( this ).addClass( "ui-state-highlight" );
            if($(ui.draggable).hasClass('draggable-source'))
                $( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');
            else
                $( ui.draggable ).appendTo( this );

            console.log(this.id)
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
})
</script>

Answer 1

mhhh... seems a little bit triggy... try this (untested yet)

window.readDays = function() {
    $( 'table#days .day' ).each( function() {
        var vals = [];
        $( '.ui-draggable > div', $(this) ).each(function() {
            vals.push( $(this).attr('class') );
        } );
        $( 'input[name="'+ $(this).attr('id') +'"]' ).val( vals.join(','));
    } );
}

Answer 2

Not clear what format you want the values, so comma separated makes sense as starting point. It's not clear what event you want this to be trigegred by.

$('#days .day' ).each(function(){
  var day=this.id; 
   var items= $(this).find('div').map(function(){
       /* text of item seems like only place currently to retrieve the title of item*/
       return $(this).text();
   }).get()
   $( 'input[name="'+ day+'"]' ).val( items.join(','));
});

DEMO: http://jsfiddle.net/x5T4h/5/

Chances are you will submit all the data using ajax, in which case you wouldn't even need hidden inputs, just send arrays to server