form submit jquery

jQuery Tutorial: Submit a Form and Post Data Using jQuery and AJAX

In this jQuery tutorial, you’ll learn how to submit a form, post the data and format the response using jQuery and AJAX:

Here’s the code I used in the video:

<!DOCTYPE html>
<title>Get Data From a MySQL Database Using jQuery and PHP</title>
<script src=""></script>
// Set form variable
var form = $('#search_form');

// Hijack form submit
// Set username variable
var username = $('#username').val();

// Check if username value set
if ( $.trim(username) != '' ) {
// Process AJAX request
$.post('process.php', {name: username}, function(data){
// Append data into #results div

// Prevent default form action
<span>Search by name: </span>
<form method="POST" action="process.php" id="search_form">
<input type="text" id="username" name="name">
<input type="submit" id="submit" value="Search">
<div id="results"></div>

ini_set('display_errors', '1');

// Check if $_POST is set
if ( empty ( $_POST['name'] ) ) {
echo "Yo! Something ain't legit!";

// Connec to MySQL
$mysqli = new mysqli('localhost', 'YOUR_USERNAME', 'YOUR_PASSWORD', 'YOUR_DATABASE');

// Check connection
if ( mysqli_connect_errno() ) {
echo "Can't connect: " . mysqli_connect_error();

$stmt = $mysqli->prepare("SELECT * FROM ajaxget WHERE name = ?");
$stmt->bind_param("s", $_POST['name']);

$result = $stmt->get_result();

while( $row = $result->fetch_object() ) {
$rows[] = $row;
<?php foreach ( $rows as $row ) : ?>
<li><?php echo $row->name; ?>: <?php echo $row->favorite_food; ?></li>
<?php endforeach; ?>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

July 30, 2015