How can I keep data that a user has entered in my jQuery/Ajax pop-up form?

Question

I have a form on a website I'm working (you can see it here) on that allows my users to give feedback. It's an jQuery/Ajax popup form:

$('.contact_us').click(function(){
    var boxy_content;
    boxy_content += "<div style=\"width:300px; height:300px \"><form id=\"feedbacked\">";
    boxy_content += "<p>Subject<br /><input type=\"text\" name=\"subject\" id=\"subject\" size=\"33\" /></p><p>Your E-Mail Address:<br /><input type=\"text\" name=\"your_email\" size=\"33\" /></p><p>Comment:<br /><textarea name=\"comment\" id=\"comment\" cols=\"33\" rows=\"5\"></textarea></p><br /><input type=\"submit\" name=\"submit\" value=\"Send >>\" />";
    boxy_content += "</form></div>";

    // Other code here...

Is there anyway I can save what the user has entered in the form after they have clicked the close button and load it there next time the click the feedback button?

Answer 1

Why not have the form HTML and handling in a separate file, and just load it in using jQuery?

It should keep your code cleaner (no messy HTML in JavaScript), and you can easily implement a 'sticky' form by echoing the POST'ed data into the form values server-side.

UPDATE

Load the form into a dynamic iframe, so that when the user POSTs it, the whole page doesn't refresh.

Answer 2

I would suggest that instead of recreating the whole boxy form on each click of the feedback button, create it once at the beginning and just show/hide it when you want.. this way it will maintain the contents of the previous submission..

Also do not rewrite its contents with the results of the ajax call.. create another box to be used for messages...