I have a page that loads page content using Ajax and jQuery out of MySQL. For retrieving basic pages this is fine, all loads and displays well. However, when I try to retrieve a form out of the table, jQuery doesn't recognize the controls that are loaded. I've written the function to trap the submit button and process the form with Ajax, but it seems to skip the code and submit like a normal page. Racking my brain here. Source below:
jQuery
Code:
//Jquery functions for main site
$(document).ready(function(){
$(".navitem").mouseover(function(){
$(this).css("background-color", "#FFFFFF");
$(this).css("color", "#0026FF");
$(this).css("font-weight", "bolder");
}).mouseout(function(){
$(this).css("background-color", "#0026FF");
$(this).css("color", "#FFFFFF");
$(this).css("font-weight", "");
}).click(function(){
var pageid;
pageid = 'page=' + $(this).attr("id");
$.ajax({
type: 'POST',
url: 'includes/content.php',
data: pageid,
dataType: 'text',
success: function(response){
var json = $.parseJSON(response);
$("div#content").html(json['content']);
},
error: function(error){
$("div#content").html("<h2>Page not found</h2>");
}
});
});
$('.error').hide();
$(".button").click(function() {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
Form HTML loaded from table:
Code:
Samples page<br>
<div id="content">
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label> <br>
<input type="text" name="name" id="name" size="30" value="" class="text-input" /> <br>
<label class="error" for="name" id="name_error">This field is required.</label> <br>
<label for="email" id="email_label">Return Email</label> <br>
<input type="text" name="email" id="email" size="30" value="" class="text-input" /> <br>
<label class="error" for="email" id="email_error">This field is required.</label> <br>
<label for="phone" id="phone_label">Return Phone</label> <br>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <br>
<label class="error" for="phone" id="phone_error">This field is required.</label> <br>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
</div>
Please help!