Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
basic example of populating a form from a database using AJAX and JSON, jQuery version
// jQuery version of
-- the SQL database table
create table form_ajax (
ID varchar(5) not null,
Name varchar(100),
Address varchar(100),
Phone varchar(20),
Email varchar(255),
constraint form_ajax_pk primary key (ID)
-- the data
insert into form_ajax(ID, Name, Address, Phone, Email)
values('123', 'Test Only', '123 Smith Street Jonestown 2000 NSW', '0123456789', '');
// simplified to provide an example; deal with non-standards browsers yourself
// please use some common sense and add more structure, error handling, etc.
// NB: the PHP stuff is all server side, and is the AJAX service
// check for AJAX request
if (isset($_GET['action'])) {
if ($_GET['action'] == 'fetch') {
// tell the browser what's coming
header('Content-type: application/json');
// open database connection
$db = new PDO('mysql:dbname=test;host:localhost;', 'website', 'website');
// use prepared statements!
$query = $db->prepare('select * from form_ajax where ID = ?');
$row = $query->fetch(PDO::FETCH_OBJ);
// send the data encoded as JSON
echo json_encode($row);
<!DOCTYPE html>
<html lang="en-au">
<meta charset="utf-8" />
<title>Form from AJAX using jQuery</title>
<script src=""></script>
// NB: the JavaScript stuff here is all client side and is the AJAX client
// encapsulate the lot within a function scope called on document ready
jQuery(function($) {
// hook the submit action on the form
$("#form-ajax").submit(function(event) {
// stop the form submitting
// grab the ID and send AJAX request if not (empty / only whitespace)
var ID = this.elements.ID.value;
if (/\S/.test(ID)) {
// using the ajax() method directly
type : "GET",
url : url,
cache : false,
dataType : "json",
data : data,
success : process_response,
error: function(xhr) { alert("AJAX request failed: " + xhr.status); }
// there is a shortcut method to GET JSON:
// $.getJSON(url, data, process_response);
else {
alert("No ID supplied");
* process the response, populating the form fields from the JSON data
* @param {Object} response the JSON data parsed into an object
function process_response(response) {
var frm = $("#form-ajax");
var i;
console.dir(response); // for debug
for (i in response) {
frm.find('[name="' + i + '"]').val(response[i]);
<form id="form-ajax" action="form-ajax.php">
<label>ID:</label><input type="text" name="ID" /><br />
<label>Name:</label><input type="text" name="Name" /><br />
<label>Address:</label><input type="text" name="Address" /><br />
<label>Phone:</label><input type="text" name="Phone" /><br />
<label>Email:</label><input type="email" name="Email" /><br />
<input type="submit" value="fill from db" />
Copy link

gpdart commented Jul 2, 2013

This code is not running successfully.

Copy link

gpdart commented Jul 2, 2013

ReferenceError: data is not defined
[Break On This Error]

data : data,

Copy link

akshayjoshi999 commented Oct 8, 2013

thank you very much i adapted the code for my use thank you very much for efforts.

Copy link

fsmanpk commented Apr 28, 2015

its do nothing.... HOW TO USE IT?

Copy link

pb1646a commented Aug 9, 2017

Did you try to put the php in a separate php file called Form-ajax.php in your root?

Copy link

Sadicko commented Jun 5, 2019

I've tried this code and is working, how do i show the the selected text. it shows is selected but unless i click on the select box and hover. i want to show what was selected in the select box.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment