Let us understand with a simple example of how to submit a form to a database with JQuery, PHP, HTML, MySql.
This is a direct working code with explanation given whereever required.
<div class="container">
<form id="submit" method="post">
<fieldset>
<legend>Enter Employee Information</legend>
<label for="fname">Employee First Name:</label>
<input id="fname" class="text" name="fname" size="20" type="text">
<label for="lname">Employee Last Name:</label>
<input id="lname" class="text" name="lname" size="20" type="text">
<button class="button positive"> <img src="../images/icons/somepic.png" alt="">
Add Employee </button>
</fieldset>
</form>
<div class="success" style="display:none;">Employee has been added.</div>
</div>
// It is relatively easy to make ajax calls with jquery. we need to pass type( GET or POST),
// URL ( of the destination), data, success( what to be done post successful execution).
$(document).ready(function(){
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var fname = $('#fname').attr('value');
// We are storing it in the variable called “fname” and we are taking it from the input
// field with the id of “fname” and the “.attr(‘value’) tells jQuery to take the value from
// the attribute of the value from the input field
var lname = $('#lname').attr('value');
$.ajax({
type: "POST",
url: "ajaxcalls.php",
data: "fname="+ fname +"& lname="+ lname,
success: function(){
$('form#submit').hide(function(){$('div.success').fadeIn();});
}
});
return false;
});
});
Add this in ajaxcalls.php File:
<?php
include ("../../inc/config.inc.php");
// Employee INFORMATION
$fname = htmlspecialchars(trim($_POST['fname']));
$lname = htmlspecialchars(trim($_POST['lname']));
$addClient = "INSERT INTO Employees (fname,lname) VALUES ('$fname','$lname')";
mysql_query($addClient) or die(mysql_error());
?>
Hope you like it.
