So my webapp has a problem. It seems that whenever I load content into a div (i'm using the jquery tab ui), I'm not able to access any changes to form elements that may occur.
For example: I have a select box with 2 options: <select name="suite_type" id="suite_type"> <option value="1">Residential</option> <option value="2">Commercial</option> </select> This is loaded into my load div along with a bunch of other form elements I won't bore you with. Now I'm trying to basically post information to my database without a page reload.. So I'm using the jquery post method to send it over, but none of my values are updating. document.getElementById('suite_type').value always returns 1, even if I change it to the commercial option. If i try this on a text field it just returns blank (I imagine its because it loaded with a blank value. I've tried adding a simple onchange alert to the select box which just tells me its current value.. and Its always 1. Do I have to reinitialize the DOM after the content it loaded or something? This is driving me crazy since I really don't want the page to reload on form submit. Here's the code I'm using to load the form into the page: function load_suite(suiteid){ $("#loading").fadeIn("fast"); $.post("/admin/admin.php", {process: "edit_suite", id: ""+suiteid +""}, function(data){ if(data.length > 1) { $("#edit-suites .loaddiv").replaceWith("<div class =\"loaddiv \">"+data+"</div>"); } $("#loading").fadeOut("fast"); //}); return false; } And here's what I'm using to try and sent the info back: function submit_suite(){ $("#loading").fadeIn("fast"); $.post("/admin/admin.php", {process:$('#process').val(), available_date:$('#available_date').val(), suite_type:, bedrooms:document.getElementById('bedrooms2').value, bathrooms:document.getElementById('bathrooms2').value, price:document.getElementById('price2').value, suite_description:$ ('#suite_description').val(), suiteid:$('#suiteid').val()}, function(data){ if(data.length > 1) { $("#edit-suites .loaddiv").replaceWith("<div class =\"loaddiv \">"+data+"</div>"); } $("#loading").fadeOut("fast"); }); return false; } When I check the console log in firebug any of those values that loads as empty initially, stay empty regardless of what I put in them.