Retrieving data from JSON array (PHP) and populating textboxes

Question

I'm trying to pull the data gathered from the MySQL query referenced below and populate the corresponding textboxes with that data:

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

$server = "••••";
$username = "••••";
$password = "••••";
$database = "••••";

$username_pull = $_POST['a_username'];

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);

$sql = "SELECT uname, pword, fullname, phone_num, email_add, car_details FROM app_login WHERE uname = '$username_pull'";
$result = mysql_query($sql) or die ("Query error: " . mysql_error());

$records = array();

while($row = mysql_fetch_assoc($result)) {
    $records[] = $row;
}

mysql_close($con);

echo $_GET['jsoncallback'] . json_encode($records);

?>

If I insert in $username_pull = "admin", I get the following json info, so I know it works:

[{"uname":"admin","pword":"password","fullname":"John Smith","phone_num":"123-456-7890","email_add":"[email protected]","car_details":"2013 Black Cadillac ATS"}]

Here's my json callback function:

function fillTheGap() 
{
    var f_uname = $("#a_username").val();

    $.ajax({
        url: "login2.php",
        data: f_uname,
        dataType: "jsonp",
        jsonp: "jsoncallback",
        success: function(data) 
        {
                $("#a_phonenum").val(data.phone_num);
            $("#a_fullname").val(data.fullname);
            $("#a_email").val(data.email_add);
            $("#a_cardetails").val(data.car_details);
            },});
}

Here's the form that initiates the data pulling:

    <form name="check_user" method="" action="post">
        Your Username: 
        <input id="a_username" name="a_username" type="text" onBlur="fillTheGap()">
        Your Full Name: 
        <input id="a_fullname" name="a_fullname" type="text">
        Your Phone Num:
        <input id="a_phonenum" name="a_phonenum" type="text">
        <input name="submit" type="button" value="Submit">
</form>

How do I make it to where it populates the textboxes with its corresponding ID name?

I greatly appreciate everyone's help in advance!

"same ID" how exactly, you can only use an ID once, it's unique? Also, your database functions are wide open to XSS attacks! — adeneo
– adeneo, Commented May 9, 2013 at 20:23
You're right. I'll take the necessary precautions to avoid those problems. And you're right about the ID's. I meant to try doing this with classes instead. — user2137681
– user2137681, Commented May 9, 2013 at 20:39

Luigi De Rosa · Accepted Answer · 2013-05-09 20:24:21Z

1

Try something like this:

data = {"uname":"admin","pword":"password","fullname":"John Smith","phone_num":"123-456-7890","email_add":"[email protected]","car_details":"2013 Black Cadillac ATS"}

$.each(data, function(key, value){
       $("#a_"+key).val(value);
});

So your function should be something like:

function fillTheGap() 
{
    var f_uname = $("#a_username").val();

    $.ajax({
        url: "login2.php",
        data: f_uname,
        dataType: "jsonp",
        jsonp: "jsoncallback",
        success: function(data) 
        {
              $.each(data, function(key, value){
                 $("#a_"+key).val(value);
              });
        }
    });
}

Also you can try it here: http://jsfiddle.net/nhKks/

answered May 9, 2013 at 20:24

Luigi De Rosa

7203 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Retrieving data from JSON array (PHP) and populating textboxes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related