in your example, the only thing you are posting is {name: 'bob'}, as a hard coded value. You should be able to test this in your php script using echo $_POST['name']; and it should print out bob
change this block to reference an element's value like:
{name: $("#field_name").val()},
you should do the validation in javascript before making the request as we don't even need to transmit anything if we already know that there is missing or invalid data. It doesn't hurt to revalidate server side if you want, and always always clean the data server side before sending it to a database, but there is no need to create more traffic than needed.
Here is a full jquery example:
control.js
//define class/application namespace
function FormController() {
//I always like to pin down a reference to 'this' under a known context.
//It can be helpful if you get down several nested functions deep.
var app = this;
//while javascript doesn't really have 'constructors' we can use a function to simulate one:
this.init = function(){
//in a more complex class you can set initial/default values to stuff here
//for now, we will just bind our button handlers
app.bindHandlers();
}
//define some methods
this.bindHandlers = function(){
//click handler for submit button
$("#submit").click( function(){
//validate before making the request
//There is no need to create traffic if we already know that there is missing or invalid data.
if(app.isValid()){
//data is good, we can go ahead and submit
//swap the results element for an animated gif loader graphic while we wait for a response
$('#loader').fadeIn('slow');
$('#dataTarget-formResult').hide();
//send the request, data is accessable in php via extract($_GET);
$.ajax({
url: 'submit.php',
data: {
inp_fNam: $("#inp_fNam").val(),
inp_lNam: $("#inp_lNam").val(),
inp_addr: $("#inp_addr").val(),
inp_city: $("#inp_city").val(),
inp_state: $("#inp_state").val(),
inp_zip: $("#inp_zip").val()
},
traditional: true,
success: function (responseData) {
//this will execute when we receive a completed response back from the server
$('#dataTarget-formResult').html(responseData);
$('#dataTarget-formResult').fadeIn('slow');
$('#loader').fadeOut('fast');
}
});
}
});
//more button/event handlers can go here...
//lets add a cancel button
$('#cancel').click( function(){
window.location = "/index.php";
});
}
//this method will manage our validation rules
this.isValid = function(){
var ready = true;
var err = "You must fill out all required * fields";
//here we check that required fields are not blank
if($("#inp_fNam").val() == ""){ ready = false; }
if($("#inp_lNam").val() == ""){ ready = false; }
if($("#inp_addr").val() == ""){ ready = false; }
if($("#inp_city").val() == ""){ ready = false; }
if($("#inp_state").val() == ""){ ready = false; }
//let's get more complicated and say we also want to ensure that zip is a numerical value:
if($("#inp_zip").val() == ""){
ready = false;
}
else{
if(isNaN($("#inp_zip").val())){
ready = false;
err = "Zip code must be a number";
}
}
if(!ready){
alert(err);
return false;
}
return true;
}
//more methods here...
//finally, execute the constructor. This will fire anytime we create a new FormController object
app.init();
}
page.html
<!doctype html>
<html>
<head>
<style type="text/css">
.form-label{ width:280px; margin-right:20px;display:inline-block; }
.form-field{ width:150px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js" ></script>
</head>
<body>
<div id="form-wrapper" style="width:100%;">
<p>
<span class="form-label">First Name: *</span>
<span class="form-field"><input type="text" id="inp_fNam" /></span>
</p><br/>
<p>
<span class="form-label">Last Name: *</span>
<span class="form-field"><input type="text" id="inp_lNam" /></span>
</p><br/>
<p>
<span class="form-label">Address: *</span>
<span class="form-field"><input type="text" id="inp_addr" /></span>
</p><br/>
<p>
<span class="form-label">City: *</span>
<span class="form-field"><input type="text" id="inp_city" /></span>
</p><br/>
<p>
<span class="form-label">State: *</span>
<span class="form-field"><input type="text" id="inp_state" /></span>
</p><br/>
<p>
<span class="form-label">Zip: *</span>
<span class="form-field"><input type="text" id="inp_zip" /></span>
</p><br/>
<input type="button" id="submit" value="Submit" /> <input type="button" id="cancel" value="Cancel" />
</div><br/>
<div id="loader"><!--some img--></div>
<div id="dataTarget-formResult"></div>
<!--bind the controller-->
<script src="control.js"></script>
<script type="text/javascript">var myForm = new FormController();</script>
</body>
</html>
*** many edits later, this is now tested and working
***
Some things to keep in mind with javascript:
While it is OOP, it does not have traditional classes. Instead, all functions are also objects, and like any object they can have variable members and methods. It seems odd at first to define a class by declaring a function, but this is really one of the keys to understanding javascript.
Because functions are also objects, they can be passed as parameters to other functions.
Because functions are also objects, you can create instances using new
Functions can be anonymous. anonymous functions can be passed to other functions, or assigned to variables/members to create methods.
function My_Class(){
//in the current context, this refers to the current instance of My_Class
var topContext = this;
//using this, we can add public members to the class
this.myPublicMember = 0;
//variables without this are private, accessible within the class but not from without.
var myPrivateMember = 1;
//we can create a public method by assigning an anonymous function to a public member
this.myPublicMethod = function(){
//because this is within the class, we have access to private members
alert(myPrivateMember);
//also note: in the current context, this now refers to myPublicMethod within the current instance of My_Class.
//We can no longer do alert(this.myPublicMember);
//We also cannot do alert(My_Class.myPublicMember); because this refers to the class itself, not to this instance of the class.
//This is when it is handy to have a reference to the top level context so that we can instead do alert(topContext.myPublicMember);
}
}
//instantiate an new object from the class
var myInstanceOfClass = new My_Class();
//we can access public members
alert(myInstanceOfClass.myPublicMember);
//we cannot access private members
//alert(myInstanceOfClass.myPrivateMember); //error!
//but we can access private members through priviledged public methods
myInstanceOfClass.myPublicMethod();
