Adding dynamic elements to a sortable list to send them using POST/GET (jquery/javascript)

im really stuck trying to finish this script, but the true is that i sucks at jquery (im a php devloper).

The idea is this, i have this litle form http://jsfiddle.net/34xEg/2/ . I want my user to be able to add many work experiences as they want, so any time he hits on add work all the fields in the form goes empty and the information goes to a list (a sortable one like this: http://www.ryancramer.com/projects/asmselect/examples/example1.html .

Later, when the user finish, he can delete items form the list or just send them using a button with POST or GET acctions.

The think is, i really dont have any idea of how to achieve this, i complete the form and the pickdate function (hit with your mouse on the from or to fields), if you guys can he开发者_StackOverflow中文版lp me with a example script of how to add info to a sortable list (maybe in jquery) it will be nice, or if you have a big heart and you can show me a complete example it will be GREAT!

Thanks for any help!!!

you could use the Append function or appendTo or something in that genre, and to remove an element u use the remove function to remove items from the list... the on click you can loop through each element so you then can post them or whatever youlike to do with it

http://api.jquery.com/serialize/
http://api.jquery.com/jQuery.post/

jQuery makes it very easy. Check the docs.

Whether or not the data is sortable depends on how you display it. Has nothing to do with how the data gets into the database--they are two separate issues.

Give your add job button an id. jQuery event from that.

jQuery('#addwork').click( function(e){
  addJob( jQuery('#comp_name').val(), jQuery('#jobdesc').val(), function(c){
     // On callback display confirmation, and clear the entry fields
  });
});

addJob might do something like this:

function addJob( comp_name, jobdesc, jobtitle, etc){
   var newEl = '<div class="jobnode"><h3 class="jobheader">'+jobtitle+'</h3><p class="jobdescription">'+jobdesc+'</p> ...etc';
   // add new element to element collection in the dom using appendTo just like above poster says
   var ins = jQuery('#sortableparent').appendTo(newEl);

   if (ins.length >= 1) {
     return true;
   }
};

When the user is ready to save, recurse through the dom parent element and build a JSON object, & send that as your $.ajax data.

var jobs = {
  {'title':'Helpdesk Peon','desc':'Answer phone, respond to issue tickets, bang head on desk'},
  {'title':'Boss Man','desc':'Answer phone, give orders, drink from snifter, bang head on desk'},
  {'title':'Office Assistant','desc':'Answer phone, give orders, drink from snifter, bang head on desk'}
};