use jquery to load form input directly into page

Question

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!

Answer 1

I think you want to do DOM manipulation using JS. All you have to do is append a new OPTION tag with the user-input value to the SELECT like:

var option = $('<OPTION/>');
$(option).html('INSERT YOUR VALUE HERE');
$('SELECT').append(option);

Remember: this is adding an OPTION just on the client side. So if your actual form submission (in your iframe) fails to push the data to your database, this would represent an inconsistent view for your user( where he would think new OPTION is created but its actually failed).

So, you would have to tie your UI update with your backend response. Typically, you would refresh this UI in the AJAX response of the call updating the backend.

Answer 2

Maybe you should be using AJAX to populate the boxes? Then you could have it refresh the data anytime you want.

jQuery Ajax

Answer 3

Hi thomas,

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!