LSN Rabbani LSN Rabbani - 1 year ago 156
Javascript Question

Auto-fill input form with PHP, MySQL and jQuery

I had a problem with my auto-fill input form, with PHP MySQL and jQuery of course. So I have the select option form and some 'disabled' textboxes. And I want when I select the one of the option, the textboxes is auto-fill with value from the database

So there is my whole code :

PHP (Database connection) - I put it above my


$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'db_mydatabase';

mysql_connect($host, $user, $pass);

$user = '';
$query = mysql_query("SELECT * FROM tb_payment") or die (mysql_error());


<select name="student" class="input-data">
<option value="">-- SELECT STUDENT --</option>
<!-- Do loop data from database -->
<?php while ($row = mysql_fetch_object($query)): ?>
<option value="<?php echo $row->id_user ?>">
<?php echo $row->name ?>
<?php endwhile; ?>
<br />
<table border=1>
<td><input type="text" class="output-id" disabled /></td>
<td><input type="text" class="output-name" disabled /></td>
<th>Total Payment</th>
<td><input type="text" class="output-total" disabled /></td>

jQuery :

$(".input-data").on("change", function(){
<?php $id_user = "$(this).val()"; ?>

<?php $data = mysql_query("SELECT * FROM tb_payment WHERE id_user = '$id_user'") or die (mysql_error()); ?>
<?php while($row = mysql_fetch_object($data)): ?>
$(".output-id").val(<?php $row->id_user ?>);
$(".output-name").val(<?php $row->name ?>);
$(".output-total").val(<?php $row->total ?>);
<?php endwhile; ?>

But when i try to select the option, the values are wouldn't appear. Can someone help me?

Answer Source

What about creating new page name process.php contain:

require_once "connectDB.php";

header('Content-type: application/json; charset=utf-8');

$json = array();
$id =  trim($_POST['one']);
$query = "SELECT id, name, total FROM tb_payment WHERE id_user = ?";
$statement = $databaseConnection->prepare($query);
$statement->bind_param('s', $id);
$statement->bind_result($nId, $nName, $nTotal);
while ($statement->fetch()){
echo json_encode($json, true);


And the Jquery:

    $(".input-data").on("change", function(){
            var id = $(".input-data").val();
            var data = 'one=' + id;
                type: "POST",
                url: "process.php",
                data: data,
                dataType: 'json',
                success: function (data) {
                    if (data) {
                        for (var i = 0; i < data.length; i++) { //for each user in the json response
                        } // for

                    } // if
                } // success
            }); // ajax
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download