function runOnLoad(f) {
if (runOnLoad.loaded) f(); // If already loaded, just invoke f() now.
else runOnLoad.funcs.push(f); // Otherwise, store it for later
}
runOnLoad.funcs = []; // The array of functions to call when the document loads
runOnLoad.loaded = false; // The functions have not been run yet.
// Run all registered functions in the order in which they were registered.
// It is safe to call runOnLoad.run() more than once: invocations after the
// first do nothing. It is safe for an initialization function to call
// runOnLoad() to register another function.
runOnLoad.run = function() {
if (runOnLoad.loaded) return; // If we've already run, do nothing
for(var i = 0; i < runOnLoad.funcs.length; i++) {
try { runOnLoad.funcs[i](); }
catch(e) { /* An exception in one function shouldn't stop the rest */ }
}
runOnLoad.loaded = true; // Remember that we've already run once.
delete runOnLoad.funcs; // But don't remember the functions themselves.
delete runOnLoad.run; // And forget about this function too!
};
// Register runOnLoad.run() as the onload event handler for the window
if (window.addEventListener)
window.addEventListener("load", runOnLoad.run, false);
else if (window.attachEvent) window.attachEvent("onload", runOnLoad.run);
else window.onload = runOnLoad.run;
$(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.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;
});
});
runOnLoad(function(){
$("input#name").select().focus();
});
You should bind the submit event on your form, not the click event on class “button”.
You can also do error checking on the server-side rather than checking the values within javascript.
You don’t have to construct the string for the POST data, you can also use an object and jQuery’s $.param() function to make the whole code you got a bit more readable.
Can you check whether the $.ajax() gets called at all? It looks to me like it’s a URL issue here, use absolute URLs rather than relative ones.
I just downloaded the tuts source files are tried uploading it to my server but no success there. I haven’t really got any experience in JS or PHP so i wouldnt know.