How to get the value in Textbox from database depends on dropdown list without submit button

Question

I want to get the text box value from database depends upon the dropdownlist values without using submit button .Now I have three dropdown list on my code.how can i write the javascript for three dropdown

<div align="center">
<table>
<thead>
<th>Product</th>
<th>Quantity</th>
<th>Rate</th>
<th>Amount</th>
</thead>
<tbody>
    <tr id="addrow">
    <td>
    <?php
    $selectproduct=mysql_query("select productname from items");
    $itemname=mysql_fetch_array($selectproduct);
    ?>
    <select name="item[]" id="item">

    <?php
    $i=0;
    while($itemname=mysql_fetch_array($selectproduct))
    {
    ?>
      <option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
      <?php
     $i++;
    }
    ?>
    </td>
    <?php

 //    $amount=mysql_query("select Amount from items where Productname='$productname' ");
   //  $totalamount=mysql_fetch_array($amount);
    ?>


    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
    <tr >
    <td>
    <?php
    $selectproduct=mysql_query("select productname from items");
    $itemname=mysql_fetch_array($selectproduct);
    ?>
    <select name="item[]" id="item">

    <?php
    $i=0;
    while($itemname=mysql_fetch_array($selectproduct))
    {
    ?>
      <option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
      <?php
     $i++;
    }
    ?>
    </td>

    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
    <tr>
    <td>
    <?php
    $selectproduct=mysql_query("select productname from items");
    $itemname=mysql_fetch_array($selectproduct);
    ?>
    <select name="item[]" id="item">

    <?php
    $i=0;
    while($itemname=mysql_fetch_array($selectproduct))
    {
    ?>
      <option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
      <?php
     $i++;
    }
    ?>
    </td>

   <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
</table>
<div id="grand">
Total Amount:<input type="text" name="gran" id="gran">
</div>
    </tr>
    <tr >
    <td colspan="4">
    <center><input type="submit" name="submit"></center>
    </td>
    </tr>
</tbody>
</table>
</div>
</form>
</body>
<script type="text/javascript">
    $(document).ready(function() {
    $(".price").keyup(function() {
        var grandTotal = 0;
        $("input[name='qty[]']").each(function (index) {
            var qty = $("input[name='qty[]']").eq(index).val();
            var price = $("input[name='price[]']").eq(index).val();
            var output = parseInt(qty) * parseInt(price);

            if (!isNaN(output)) {
                $("input[name='output[]']").eq(index).val(output);
                grandTotal = parseInt(grandTotal) + parseInt(output);    
                $('#gran').val(grandTotal);
            }
        });
    });
}); 
</script>

Answer 1

I recommand you to use jQuery for start. It is easier to manipulate the DOM. Follow a tutorial and then, attach a callback on the change event on your dropdown menus, then in the callback get the values for your menu in an ajax call, then generate the html (the option tags) and update your select.

The Ajax call and the html update can be done with jQuery, but you can do it by yourself in pure Javascript as well.

Answer 2

You'll need to use AJAX calls from JS. AJAX has to send and receive data from php script. Simple AJAX tutorial: https://www.w3schools.com/js/js_ajax_php.asp