Question

I need some help getting a serialized <ul> list submitted via a AJAX post form request. How would I go about doing this? Below is my current code.

HTML:

<form id="update_fruit_form" method="post" action="/update_fruits" accept-charset="UTF-8">
  <ul id="list_a">
    <li id="item_Apple" value="1">Red</li>
    <li id="item_Green" value="2">Pear</li>
    <li id="item_Banana" value="3">Yellow</li>
  </ul>

  <input type="submit" value="Submit">
</form>

jQuery:

$("#update_fruit_form").submit(function() {
$.ajax({
    url: "update_fruits.html",
    context: "#list_a" ,
    success: function(){
      $(this).addClass("done");
    }
  });
});

Thanks!

Answer 1

 var list = {};  
  $('#list_a li').each(function(){
    list[ $(this).attr('value') ] = $(this).html(); 
  });

 $("#update_fruit_form").submit(function() {
    $.ajax({
      url: "update_fruits.html",
      data: list, 
      success: function(){
       $(this).addClass("done");
      }
    }); 
 });