在同一页面中使用Java脚本/ ajax将值从html选择字段传递给mysql查询，而无需刷新页面

Question

I have the following select field, values are populating from mysql table. The dropdown contains around 8-10 values.

<select id ="name" name="name" class="form" required>
    <option value="" disabled selected>Name</option>
    <?php
    $sql = "select name  from accounts where id = '{$_SESSION['SESS_MEMBER_ID']}'";
    $result = mysqli_query($GLOBALS["___mysqli_ston"], $sql) or die(((is_object($GLOBALS["___mysqli_ston"])) ? mysqli_error($GLOBALS["___mysqli_ston"]) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));
    if (mysqli_num_rows($result) > 0)
        while ($row = mysqli_fetch_array($result)) {
            $name = ($row['name']);
            echo '<option value=".$name.">' . $name . '</option>';
        }
    ?>
</select>

How can I pass the selected value from the above dropdown list to the below sql query(to where condition)? And also I need to populate the output of the below query to the below two input fields. Both the above select field and below input fields are in same page.

<?php
$sql = "select income,expense from accounts where name = ''  and id = '{$_SESSION['SESS_MEMBER_ID']}'";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $sql) or die(((is_object($GLOBALS["___mysqli_ston"])) ? mysqli_error($GLOBALS["___mysqli_ston"]) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));
if (mysqli_num_rows($result) > 0)
    while ($row = mysqli_fetch_array($result)) {
        $inc = $row['income'];
        $exp = $row['expense'];
        ?>
<div class="col-md-3">                                                                                                                                                        
            <input value="<?php echo $inc ?>" class="form" readonly/>
        </div>

        <div class="col-md-3 ">                                                                                                                                                        
            <input value="<?php echo $exp ?>" class="form" readonly/>
</div>

Thanks in advance for suggessions and advice.

Answer 1

Using Jquery you can do an on change function:

$('#name').change(function (e) {
    var parameter = $(this).val();

    Pass Parameter to your query and return values
    $('#input1ID').val($row['income']);
    $('#input2ID').val($row['expense']);
})

Sorry I don't know PHP or how to start the function, but this will pass a value to the query everytime you change the dropdown. This will not refresh the page.