Skip to content

Instantly share code, notes, and snippets.

@webaware
Created November 9, 2012 22:02
Show Gist options
  • Save webaware/4048580 to your computer and use it in GitHub Desktop.
Save webaware/4048580 to your computer and use it in GitHub Desktop.
basic example of populating a form from a database using AJAX and JSON, jQuery version
<?php
// jQuery version of https://gist.github.com/3110728
/*
-- 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', 'test@example.com');
*/
// 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 = ?');
$query->execute(array($_GET['ID']));
$row = $query->fetch(PDO::FETCH_OBJ);
// send the data encoded as JSON
echo json_encode($row);
exit;
}
}
?>
<!DOCTYPE html>
<html lang="en-au">
<head>
<meta charset="utf-8" />
<title>Form from AJAX using jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<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
event.preventDefault();
// 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
$.ajax({
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]);
}
}
});
</script>
</head>
<body>
<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" />
</form>
</body>
</html>
@gpdart
Copy link

gpdart commented Jul 2, 2013

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

data : data,

@akshayjoshi999
Copy link

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

@fsmanpk
Copy link

fsmanpk commented Apr 28, 2015

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

@pb1646a
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?

@Sadicko
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