use jquery to load form input directly into page

I have a form on one page, some of the form data is pulled from various tables in my mysql database -- the tables hold the options for different selects, so the following is the way my data will look after the php scripts are run:

 <select name="vehicleStyle">
    <option value="empty" selected="selected">- select -</option>
    <option value="coupe">Coupe</option>
    etc....
  </select>

I have a second form that loads over this page in an iframe, this 2nd form allows me to update the data included in this mysql table so that I can add options to the form on the fly. Everything works absolutely fine and wonderful however, if I update (add a value) to this table on the fly, I have to refresh the page in order for the new data to show up in the first form on the main page. I've played with auto-refreshing the page, but that's kind of obnoxious.

Is there a way to add this form data directly into my original page via jquery?

I think twitter does something like this when you add a tweet (I don't use twitter) but it adds your recent tweet onto the top of the page without actually reloading the entire page.

Thanks so much!

Solution

I believe the best way is to use the load jQuery function (http://api.jquery.com/load/). It lets you load a page from a url directly from javascript.

Here is what I would do:

move the creation of the select to a new url (fillselect.php for exemple)
load the page without creating the select: create a div tag instead (name it divforselect for exemple)
in the onload javascript event of the page, write this: $("#divforselect").load("fillselect.php") This will result in the div tag innerText set to the content of the fillselect.php page. So the url fillselect.php will not be a complete html page but will only contain the select tag.

After that you can call $("#divforselect").load("fillselect.php") whenever you want to refresh the select!