I am trying to populate some form fields using MySQL data.
I'd like to be able to enter a value in a text field, search the db using the value from the field, then populate the rest of the form fields with the results without leaving the page.
Any guidance would be greatly appreciated.
I ended up modifying this script I found. It is not on the same page, but performs the function I need. When the users enters a value and exits the field, the value is checked against a table for a match. It then returns the results to the calling page with the values in fields.
This is placed in the page with the form elements:
function showData(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_listing_data.php?q="+str,true);
xmlhttp.send();
}
<input type="text" name="mls_id" id="mls_id" onchange="showData(this.value)">
<div id="txtHint"></div> // this is where the populated fields appear
This is the file that does the query and returns results to first file - called from first file.
$link = mysql_connect("localhost","name","pw") or die ("No database connection - please try again later.");
$db = mysql_select_db("db", $link);
$q=$_GET["q"];
$sql="SELECT * FROM table WHERE MLS_LISTING_ID = '$q'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<input type=\"text\" name=\"agent_name\" id=\"agent_name\" value=" . $row ['MLS_AGENT_NAME'] . " readonly=\"readonly\">";
echo "<input type=\"text\" name=\"sale_price\" id=\"last_name\" value=" . $row['SALE_PRICE'] . " readonly=\"readonly\">";
echo "<input type=\"text\" name=\"street_number\" id=\"last_name\" value=" . $row['STREET_NUMBER'] . " readonly=\"readonly\">";
echo "<input type=\"text\" name=\"street_name\" id=\"last_name\" value=" . $row['STREET_NAME'] . " readonly=\"readonly\">";
}
Use jQuery post to get data from the database
On page with inputs:
$.post("pageWhereYouGetData.php", {valueYouWantToQueryTheDBWith: $("input.info").val()}, function(data){
var dataArray = data.join(", ");
//do stuff with inputs here like: $("input.moreInfo").val(dataArray[0]) which would set the value of your input to the value of the row 'row1' from the database
});
pageWhereYouGetData.php:
$results = mysql_fetch_assoc(mysql_query("SELECT row1, row2, row3 FROM table WHERE rowName = '" . mysql_real_escape_string($_POST['valueYouWantToQueryTheDBWith']) . "'"));
$data = array($results['row1'], $results['row2'], $results['row3']);
echo explode(", ", $data);
Here you are creating an array that is filled with the data you need, converting it to a string, and then echoing it out. On the javascript side, you are converting it back into an array (because you can't send variables via ajax, only values) and then using the array to populate your inputs.
The idea is to send data without reloading the page, convert it to a string, convert it back once we get the data, and then use it how we wish.
You can use AJAX for that - use your input submit button to fire a php file to search the database.
Which brings us onto MySQL searching. You'll want to use a FULLTEXT search the database (plenty documentation on that here http://dev.mysql.com/doc/refman/5.0/en/fulltext-search.html). Or if it is not as complex a search you should just use a SELECT * WHERE. Then echo out the data you found.
The AJAX request will then give you back what was echo'd and then you can use some JQuery to fill what ever elements you like with your data.