I want to automatically genereate the form posts field and the joindate field from the database when the user enters the username and presses tab or some button called fetch in the form. Here is my code so far..i am new to ajax ..so need some help..
<script type="javascript/text>
var name = $('.username').val();
$.ajax({
method: "GET",
url: "http://url.com/test/autofill.php",
dataType: 'json',
data: {
username: username
}).success(function( responseObject ) {
// assuming you have an array of stuff like name, id, email, etc.
// now i populate another field from the ajax response
$('.posts').val( responseObject.posts );
});
</script>
PHP Code:
//connect to database
$name = $_GET['username'];
$return = mysql_query("SELECT * FROM user WHERE username = '$name' LIMIT 1");
$rows = mysql_fetch_array($return);
$formattedData = json_encode($rows);
print $formattedData;
Your javascript code automatically starts as soon as it is loaded. There is no "pressing tab or some button called fetch" action here.
Even more: If the javascript code is in the head section of your code, it will not work, because the referred elements (like .username) have not yet been loaded
So put the javascript code into a function and only call it on (let's say) a button click
Code:
function myrequest() {
var name = $('.username').val();
$.ajax({
method: "GET",
url: "http://url.com/test/autofill.php",
dataType: 'json',
data: {
username: username
}).success(function( responseObject ) {
// assuming you have an array of stuff like name, id, email, etc.
// now i populate another field from the ajax response
$('.posts').val( responseObject.posts );
});
}
HTML:
<button onclick="myrequest()">fetch</button>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<fieldset>
<legend>Form</legend>
<label for="username">Username: </label>
<input type="text" id="username" name="username" />
<button onclick="myrequest()">fetch</button>
<label for="posts">Posts: </label>
<input type="text" id="posts" name="posts" size="20"/>
<label for="joindate">Joindate: </label>
<input type="text" id="joindate" name="joindate" size="20"/>
<p><input type="submit" name="submitBtn" value="Submit" /></p>
</fieldset>
</form>
<script type="javascript/text>
function myrequest() {
var name = $('.username').val();
$.ajax({
method: "GET",
url: "http://url.com/test/autofill.php",
dataType: 'json',
data: {
username: username
}).success(function( responseObject ) {
// assuming you have an array of stuff like name, id, email, etc.
// now i populate another field from the ajax response
$('.posts').val( responseObject.posts );
});
}
}
</script>
PHP Code:
this is my autofill.php
<?
//connect to db
$name = $_GET['username'];
if((!empty($name))
{
$return = mysql_query("SELECT posts FROM user WHERE username = '$name' LIMIT 1");
$rows = mysql_fetch_array($return);
print $formattedData;
}
else
{
echo "ERROR";
}
?>
Thanks...my code is working now..The only thing that is not workin is the $_GET['username'] variable in autofill.php. If i manually enter the username in the query, i get the expected results.
Code:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body><form method="POST" action="/test/userdetails.php">
<fieldset>
<legend>Form</legend>
<label for="username">Username: </label>
<input type="text" name="username" id="username">
<button id="fetchFields">fetch</button>
<label for="posts">Posts: </label>
<input type="text" size="20" name="posts" id="posts">
<label for="joindate">Joindate: </label>
<input type="text" size="20" name="joindate" id="joindate">
<p><input type="submit" value="Submit" name="submitBtn"></p>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function() {
function myrequest(e) {
var name = $('.username').val();
$.ajax({
method: "GET",
url: "autofill.php",
dataType: 'json',
cache: false,
data: {
username: name
},
success: function( responseObject ) {
alert('success');
$('#posts').val( responseObject.posts );
$('#joindate').val(responseObject.joindate);
/*
once you've gotten your ajax to work, then go through and replace these dummy vals with responseObject.whatever
*/
},
failure: function() {
alert('fail');
}
});
}
$('#fetchFields').click(function(e) {
e.preventDefault();
myrequest();
});
});
</script>
this is my autofill.php..
PHP Code:
$name = $_GET['username'];
$return = mysql_query("SELECT posts,joindate FROM user WHERE username = '$name' LIMIT 1"); if(mysql_num_rows($return) > 0) { $rows = mysql_fetch_assoc($return); $formattedData = json_encode($rows); echo $formattedData;
Thanks again..its working fine now!
On another note, why am i not getting a failure, when i enter a incorrect username. It still returns me success with empty values.
Before you post, read our: 
