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
-- 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</title>
// 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
window.addEventListener("DOMContentLoaded", function() {
// hook the submit action on the form
var frm = document.getElementById("form-ajax");
frm.addEventListener("submit", frm_submit, false);
* function to handle form submit, and request data from server
* @param {Event} event
function frm_submit(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)) {
ajax_request(this.action, {"action" : "fetch", "ID" : ID}, process_response);
else {
alert("No ID supplied");
* send an ajax request, with successful response handled by callback
* @param {String} url the url to send the request to
* @param {Object} data map of the data that we'll send
* @param {Function} callback the function that will process the AJAX response
function ajax_request(url, data, callback) {
var i, parts, xhr;
// if data is an object, unroll as HTTP post data (a=1&b=2&c=3 etc.)
if (typeof data == "object") {
parts = [];
for (i in data) {
parts.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
data = parts.join("&");
// create an XML HTTP Request object
xhr = new XMLHttpRequest();
if (xhr) {
// set a handler for changes in ready state
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// check for HTTP status of OK
if (xhr.status == 200) {
try {
catch(e) {
console.log(xhr.responseText); // for debug
alert("AJAX request incomplete:\n" + e.toString());
else {
alert("AJAX request failed: " + xhr.status);
// open connection and send payload"GET", url + "?" + data, true);
* 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 = document.getElementById("form-ajax");
var i;
console.dir(response); // for debug
for (i in response) {
if (i in frm.elements) {
frm.elements[i].value = response[i];
}, false);
<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

monomita commented Feb 5, 2013

This code is not running successfully.

Copy link

webaware commented Feb 15, 2013

@monomita: in what way? What error does it give? Are you running it on a server with PHP and MySQL? Do you have a database? Did you modify the connection properties to match your server? Did you create the table? etc.

Copy link

uomopalese commented Jan 29, 2015

Hi, i have all my settings in the right way, but I only get a popup saying: AJAX request failed: 404.
I can't figure out what I'm missing...

Copy link

uomopalese commented Jan 29, 2015

Hi, sorry, my fault, i was missing the page form-ajax.php ( I was using one single page gistfile1.php ).
Now is working like a charm, thanks a lot. Do you think it's possible to first query the database and than build the form in the page, based on the retrieved json string?

Copy link

msdrama011983 commented Dec 30, 2019

I get the error: No ID supplied

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