Autofill textbox values from mysql query result onChange of dropdown?

[ribrahim]

Hello,

I hope that I can get an answer for this question.

I have a MYSQL table for charges which contains the following fields: ChargesID, ChargesTitle, OfficialFees and ProfessionalFees. What I need is to make a dropdown list which contain ChargesTitle and upon selection to autofill the OfficialFees and ProfessionalFees. I found the following jquery script and is working fine with a static data only. Any idea to change or update the script to work with php and dynamic data from MYSQL.

<select id="Charges">
    <option value="">Please Select</option>
    <option value="1" data-officialcharges="100" data-professionalcharges="30" >Option 1</option>
    <option value="2" data-officialcharges="200" data-professionalcharges="40" >Option 2</option>
    <option value="3" data-officialcharges="300" data-professionalcharges="60" >Option 3</option>
    <option value="4" data-officialcharges="500" data-professionalcharges="30" >Option 4</option>
    <option value="5" data-officialcharges="600" data-professionalcharges="20" >Option 5</option>
</select>

<div>
    <label>Official Fees</label> <input type="text" name="Cofficialcharges" />
    <label>Professional Fees</label> <input type="text" name="Cprofessionalcharges" />
</div>

    <script type="text/javascript" src="../js/jquery-2.0.2.js"></script>
    <script type="text/javascript">

$('#Charges').change(function() {
    selectedOption = $('option:selected', this);
    $('input[name=Cofficialcharges]').val( selectedOption.data('officialcharges') );
    $('input[name=Cprofessionalcharges]').val( selectedOption.data('professionalcharges') );
});

  </script>

Thank you.

[tobyITguy]

You can use ajax.

Click Here
Click Here

[Gideon_1]

Yh I agree with todyITguy, learning it will be of great help but if you are in need seriously you can use these ajax codes;

        <script type="text/javascript">
            function load () {
                var xmlhttp = new XMLHttpRequest ();

                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById('ajax').innerHTML = xmlhttp.responseText;
                    }
                }

                xmlhttp.open ('GET', 'your_php_file.php', true);
                xmlhttp.send ();
            }
        </script>

Here, you can change the php file url to a get method by getting the values of the input fields you will use for the query. Here you will use something like

`'your_php_file.php?value1='.document.getElementById('input_field1_id').value.'&value2='.document.getElementById('input_field2_id').value`

So the onchange event will send the input fields asynchronously to the php file which will perform the query and send it back to the current page.

So don't forget to create an empty div with the id ajax or anything but i prefer using ajax.

so on the php file you get the values with the $_GET superglobal

so

    $value1 = $_GET['value1'];
    $value2 = $_GET['value2'];

and then you do your query. Everything you echo out or display will be displayed in the ajax div on the current page.

[ribrahim]

Many Thanks for todyITguy and Gideon_1.