Ajax Call To Populate Form Fields From Database Query When Select Value Changes

I have been looking through the questions on here and cant find an exact answer to what i am after :( but i have managed to get something. i have a form select field which i popula

Solution 1:

ok the solution that i used, for anyone else wanting to know how i solved it is

my index.php which contains the javascript and the form code

javascript code

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"type="text/javascript"></script><script>functionshowUser(str)
{
if (str=="")
{
    document.getElementById("company_name").value="";
    return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=newXMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var data = JSON.parse(xmlhttp.responseText);
        for(var i=0;i<data.length;i++) 
        {
          document.getElementById("company_name").value = data[i].name;
          document.getElementById("company_email").value = data[i].web;
        }
    }
}
xmlhttp.open("GET","formdata.php?q="+str,true);
xmlhttp.send();
}
</script>

and the form code

<selectstyle="width:100%;"class="quform-tooltip chosen-select"id="company_select"name="company_select"title="Company Select"onChange="showUser(this.value)"><optionvalue="">Please select</option><?php$userID = $user->getUserID();
$query = $user->database->query("SELECT * FROM tbl_businesses as business LEFT JOIN tbl_user_businesses as biz_user ON business.businessID = biz_user.businessID WHERE biz_user.userID ='$userID'");

while($row=$user->database->fetchArray($query))
{
    $bizID = $row['businessID'];
    $bizName = $row['businessName'];
    echo"<option value='$bizID'>$bizName</option>";
}?></select><inputid="company_name"type="text"name="company_name"value="" /><inputid="company_email"type="text"name="company_name"value="" />

then my formdata.php

$q = intval($_GET['q']);

$sql="SELECT * FROM tbl_businesses WHERE businessID = '".$q."'";

$result = $user->database->query($sql);
$info = array();
while($row=$user->database->fetchArray($result))
{
    $cID = $row['businessID'];
    $cName = $row['businessName'];
    $cWeb = $row['businessWebsite'];
    $info[] = array( 'id' => $cID, 'name' => $cName, 'web' => $cWeb );
}
echo json_encode($info);?>

thats it, thanks to charlietfl for your help!

hope this helps someone :)

Solution 2:

Here's an example with PHP and JQuery. If you are not familiar with JQuery, I suggest you take some time to digg into that before going on with your ajax, it's definitely gonna worth it. JQuery have methods like get and ajax to do async request to the server.

Now, heres some jquery we used to get JSON data from the server.

var title = '.....'
$.getJSON('getActivite.php?title=' + title, null,
        function(data){
            $("#currentId").val(data.ID);
            $("#nomActivite").val(data.Nom);
            $("#Description").val(data.Description);
            $("#DateEvent").val(data.Date);
});     

$("#currentId").val(data.ID); , this says : find the element with the id currentId in the DOM, and change it's value to the property ID of the data received from the ajax call.

On the PHP side, they had

<?php
    header('Content-Type: application/json');

    mysql_connect("localhost","root") ordie (" NOPE . [" . mysql_error() . "]");
    mysql_select_db("garderie");


    $title  = $_GET["title"]; // we received this from the json call$query = "  select a.ActiviteID as ActiviteID  , rtrim(a.Nom) as Nom, a.Description from activites a inner join .....' ";


    $result = mysql_query($query);       
    $ligne  = mysql_fetch_array($result);

    $data = array(
        'ID'            => $ligne["ActiviteID"],
        'Nom'           => $ligne["Nom"],
        'Description'   => $ligne["Description"],
        'Date'          => $date
    );

    mysql_close();

    echo (json_encode($data));
?>