0

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.

3
Contributors
3
Replies
22
Views
2 Years
Discussion Span
Last Post by ribrahim
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.

Edited by Gideon_1: corrections

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.