Self-submitting forms have nearly always been possible with PHP, but back "in the day" (when we were all using static HTML, native JavaScript, and PHP 4), they were messy to say the least. Luckily, things have greatly evolved. Many would say they have evolved past the point I prefer to do them (many frameworks and the like have ways of putting them together), but I prefer to do new things by hand-coding them myself. It gives me more control, and a performance advantage.

That being said, there is reason not to use jQuery and dynamic elements to make your forms and submit them, particularly in the common case of a search form. That's the example I'm using here. I've used it many times in production. It's always good to show results right below the form that produced them, giving users a chance to see what they searched for give them a chance to narrow or widen their search.

So, take a look at an "advanced search" form that shows results right below it (using the Employees Sample Database), then we'll pick apart how it happens.

Search

I'll be the first to admit this isn't a perfect example (some of those queries can get really big), but let's run with it. What we are really doing here is creating a form that isn't a form. Like this:

<div class="form-group">
      <label for="department">Latest Department:</label> 
      <select class="form-control" id="dept_no">
      <option value=""></option>
 </select>
 </div> 
 ...
<button class="btn btn-primary" id="search">Search</button>

It has all of the form classes so it looks and feels like one, but it lacks the form tags and that's just a button sitting there at the bottom, not a submit button. In the document ready function, we're going to make this "fake form" actually do something:

//"submit" search form when enter key is hit
	$( ".form-group" ).keydown(function( event ) {
		  if ( event.which == 13 ) {
			   event.preventDefault();
			   submitSearch();
		  }
	});	  
	$('#search').click(function() {
	   submitSearch();
	});
	

That makes the form call a customized submit function when the user either hits that button or hits the Enter key (which one would expect it to do). Let's delve into that function. First, it does the rather obvious and just AJAXes in an empty table where the search results should appear:

	$.ajax ({
		  url: '../main/php/serverHTML.php?type=HTML&content=searchTable',
		  contentType : 'html',
	   })
	   

Then the interesting part happens when the table loads. We grab the data from all of our form fields with jQuery, putting them into an object while we are at it (this is as close as JavaScript gets to an associative array, and actually turns out to be more useful for our purposes, as you'll see):

var params = { deptNo : $('#dept_no').val(),
			       empNo : $('#empNo').val(),
			       firstName : $('#firstName').val(),
			       lastName : $('#lastName').val(),
			       lowSalary : $('#lowSalary').val(),
			       highSalary : $('#highSalary').val(),
			       title : $('#title').val(),
			       firstHire : $('#firstHire').val(),
			       lastHire : $('#lastHire').val()};
			       

Then we are are going to actually make our empty table a DataTable with JSON via a back-end search function with those parameters (I won't get into how to make a dynamic SQL query here, you can look at the complete code if you'd like to see how I did it). This is where that object is really useful. jQuery (in version 1.9 and newer) serializes objects in a form that PHP can recover as an associative array without decoding. So, we just POST over the object via AJAX:

"ajax" : { 
		   "url" : '../main/php/searchServer.php',
		   "method": 'POST',
           "data" : params,
	    },
	    

and all of the data gets "plunked" into that page's POST array. From there, it's just building a basic DataTable from the JSON that gets shot back. It really isn't that tough, and produces great results. Try it for a bunch of forms!