Simple Form Submit with Ajax via jQuery

Anyone who knows me knows I like to keep things simple. I’ve been working a lot lately forms that need some ajax magic to keep the site usage streamlined. Here’s what I found works best for me:

The Form

OK, so I’ll start with my basic form to add a name:

<div id="update_name_div" style="display:none;"><p>New name added.</p></div>
	<form action="handler.php">
			<label for="new_name">New Name</label>
			<input type="text" id="new_name" name="new_name" placeholder="Add Name..." /
		        <input type="submit" id="submit_name_form" class="button-primary" value="Add" />
	</form>
</div>

That will give us a form with a single input field and a submit button. We’ll make the hidden div at the top with id=’update_name_div’ show once the ajax submit process is complete.

The Ajax/jQuery

Now to bring them together using ajax via jQuery; be sure to include the jQuery library in your site for this to work. I’m using the $.get method to retrieve the results. See the comments for an explanation of what’s going on:

<script>
$(document).ready(function() {
	//when the 'add' button is clicked perform an ajax request to add the entered data
	$('#submit_name_form').click(function(event) { 
			
		//if field is empty setup an alert
		if ($('input[name="new_name"]').val() == '') {
			//prevent submit button to sending to the handler page
			event.preventDefault();
			//popup the alert
			alert('Please enter a name');
		}
		
		//otherwise perform ajax request
		else {
			//hide 'updated' div if it's already up.
			$('#update_name_div').hide();
			
			//prevent submit button to sending to the handler page
			event.preventDefault();
			
			//set the inputted value to a variable
			new_name_var = $('input[name="new_name"]').val();
			
			//send the value to the handler page via GET.  Can be retrieved in php as $_GET['name_input']
			$.get('handler.php', { name_input: new_name_var} );
			
			//show 'updated' div with a nice fade in.
			$('#update_name_div').fadeIn('slow');
			
			//reset the input field to empty
			$('input[name="new_name"]').val('');
		}
	}); 
});
</script>

Basically the script first checks to see if the field is empty. If it is the user will be alerted, otherwise it will collect the value of the input field and send it over to handler.php for handling. Once the process is complete a div will fade in at the top of the screen letting the user know their data was submitted. All this without ever leaving the page.

The Handler

Next we need a handler page which will take the data from this form and add it to the database (or do whatever else you want).  Here’s the handler.php:

handler.php

<?php
$new_name = $_GET[name_input];
echo $new_name;
?>

You can have the handler do whatever you want; insert information into the database, email information to yourself, or in this case just echo out the inputted information.

Again, this is a very simple implementation that works.  Feel free to post any questions or suggestions to make it better.  Blizam.