How to reliably store complex form data for submit

I am creating an appointment web application where the user chooses a start date and an end for an event along with a global start time and end time. At the last screen I allow the user to edit any day during the durati开发者_如何学Pythonon of the event which I display using the jQuery Full Calendar plugin.

Now, I want to keep this on the client side as much as I can until the user finally clicks submit and the whole thing goes at once. Handling the start/end date and the global times is easy enough but how would I go about keeping track of individual days' information in an organized and reliable way? Each day could potentially have different values for a number of fields (different start/end times, description, title, etc...)

Sending the data to the server via JSON would be an ideal solution. You should look at jQuery's serializeArray() which will serialize the form for you ready to send. You could then submit the data via ajax using $.post and display a result to the user in the success callback function.

http://api.jquery.com/serializeArray/

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

<form id="yourform" action="" method="post">
    <input type="text" id="t1" />
    <input type="submit" id="save" />
</form>

And then the JavaScript would be

$(document).ready(function()
{
    $("yourform").submit(function()
    {
         var data = $(this).serializeArray(); 
         var url = "yoururl.com/handler.php";
         $.post(url, data, function(result)
         {
             $("feedback").html(result); //show result
         });
    });
});

Note I have not tested the above code, it's just a rough guideline for you. Your form would need to be set out correctly for the above approach to work. I just put a sample form in to show you how the .submit() links to the form ID.

you could send your data to the server in json format. Like:

day = {
    startTime: someDate,
    endTime: someOtherDate
    ....
}

I don't totally understand the question, but you will probably want to make a javascript array (an object really). Store each day in the array, the object key is the date, and the data is whatever data belongs to that date.

(Or just a regular array with all the days in it, include the date as another field in the array element.)

Then use jQuery.param() to send that array or object to the server.