[jQuery] Can't access form values after using load()
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.