Question

I have a sortable list using jqueryUI. I want each of these lists to have 4 different states. So I’ve assigned each list item a toggle function. How can I get what states each items are at if say, I were to submit this information via a form? Is this possible at all? Any help will be much appreciated. Thanks

$(".sortedli").toggle(function(){
    //state 1
    $(this).css("background-color","white");},
    function(){
    //state 2
    $(this).css("background-color","green");},
    function(){
    //state 3
    $(this).css("background-color","red");},
    function(){
    //state 4
    $(this).css("background-color","yellow");}
  );

<ul id="coll-selected-list" class="droptrue ui-sortable">
              <li class="sortedli" style="">blah</li>
              <li class="sortedli" style="">blah</li>
              <li class="sortedli" style="">blah</li>
</ul>

Answer 1

You could create a hidden input element for each of them when the form is submitted and attach those hidden elements to the form before allowing the submission to proceed:

$(myform).submit(function(){
    var li_1_state = document.createElement('input');
    $(li_1_state).attr({'type':'hidden','name':'li_1_state'});
    $(li_1_state).val(*grab the state here*);
    $(myform).append(li_1_state);
    // repeat for the other list elements
});