How to auto fill a form with data from database based on drop menu selection

Question

I'm working on a MySQL update form and struggle to make a drop down selectbox that will autofill the rest of the form with data from mysql. Basically its a table that consist of users and their credentials. When updating a second table with this form i want to be able to select the username from a drop menu and let that selection autofill the rest of the credentials before moving on to the rest of the form.

Here is some of the code for setting up the select and input:

<?php 
//DB Connect
...
// Get array of users   
$select_users = "SELECT * FROM users";

if (!mysql_query($select_users)) {
die('Error: ' . mysql_error());
} //all good so far

$select_users_result = mysql_query($select_users);
?>

<select id="selectbox" name="navn" onchange="populateData(this.value)">
   <option>USER</option>
<?php   

$klubb = array();
$klasse = array();
while ($row = mysql_fetch_array($select_users_result, MYSQL_ASSOC)) {

 echo "<option value='" . $row['navn'] . "'>". $row['navn'] ."</option>";

//echoing these vars will output all rows for the column specified...
$klubb[] = $row['klubb'];   
$klasse[] = $row['klasse']; 

}

mysql_close();

?>  
</select>

<tr>
    <td>Klubb: </td>
    <td><input id="klubb" type="text" name="klubb" class="cred_input" />

    </td>
</tr>
<tr>
    <td>Klasse: </td>
    <td><input id="klasse" type="text" name="klasse" class="cred_input" /> </td>
</tr>

And then some javascript

<script>

function populateData()
        {
            //alert('in populateData');
            y = document.getElementById("selectbox");
         document.getElementById("klasse").value =  [y.selectedIndex];
        document.getElementById("klubb").value = [y.selectedIndex];

        }   
</script>

The result here is a number in the <td>klubb and <td>klasse based on my selection in the drop menu.

How can i connect the arrays with that index number in the javascript so that it will show the actual data from the array ?

I've been seeking an answers for a few days now but can't find anything that answers my question.

Thanks for any help!

Answer 1

Well you can use AJAX for that.

For a tutorial on how to use AJAX and PHP script with Mysql This can help you.

First you need to create a PHP script that will gather the data you need for filling up the forms.

Setup the AJAX to be triggered everytime you choose something in your Drop Down List and pass its value on the PHP script you created.

On your AJAX script configure it to call the PHP script you created for retrieving the data (a value will be thrown in this script based on your drop down list).

Once you receive a response from your AJAX call just use a simple Javascript to fill up the forms based on the data your received.

Another tip is to use JQuery since it is easier for you to setup your AJAX request.

Answer 2

Use AJAX here.

In the populateData() function, use ajax to send the request to retrieve the user credentials & through Javascript, populate your textboxes with the retrieved values.

Answer 3

You could echo the two php arrays as javascript objects, and then access those in your populate function (this is the quick solution). But a better way is to ajax in the actual data

<script>
  var klasse = <?=json_encode($klasse)?>
  var klubb = <?=json_encode($klubb)?>
</script>

Answer 4

Well you can use Ajax. Make this as your form.

<?php 
//DB Connect
...
// Get array of users   
$select_users = "SELECT * FROM users";

if (!mysql_query($select_users)) {
die('Error: ' . mysql_error());
} //all good so far

$select_users_result = mysql_query($select_users);
?>

<select id="selectbox" name="navn" onchange="populateData(this.value)">
   <option>USER</option>
<?php   

$klubb = array();
$klasse = array();
while ($row = mysql_fetch_array($select_users_result, MYSQL_ASSOC)) {

 echo "<option value='" . $row['navn'] . "'>". $row['navn'] ."</option>";

//echoing these vars will output all rows for the column specified...
$klubb[] = $row['klubb'];   
$klasse[] = $row['klasse']; 

}

mysql_close();

?>  
</select>

<div id="some_container">
</div>

Your AJAX request :-

<script type="text/javascript">
$('select').on('change', function() {
  var selectedVal = this.value; // or $(this).val()
   $(document).ready(function() {
      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "file.php?selectedVal="+selectedVal,             
        dataType: "html",   //expect html to be returned                
        success: function(response){   
            $("#some_container").html(response);            
        }
    });
});
});
</script>

file.php

<?php
echo '
<tr>
    <td>Klubb: </td>
    <td><input id="klubb" type="text" name="klubb" class="cred_input" value="$phpValueHere"/>

    </td>
</tr>
<tr>
    <td>Klasse: </td>
    <td><input id="klasse" type="text" name="klasse" class="cred_input" value="$phpValueHere> </td>
</tr>';
?>

In your file.php, get the value of selectedVal via $_GET['selectedVal'] and then extract data from table, after extracting echo the data in those input boxes.