After select dropdownlist value retrieve data from database and show in textbox in php

Question

I am trying that to get the price of a product after select product from dropdown list in respected textbox. So please help me.!

So when product select from dropdown its price should be display in resp textbox. so how to display that price in textbox.......... my code is below:-

<?php include_once("head.php"); ?>

<link rel="stylesheet" type="text/css" href="css/default.css"/>
<script type="text/javascript" src="js/script.js"></script>
<script>
    function showUser(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "getCustomer.php?q=" + str, true);
        xmlhttp.send();
    }

    function showProduct(str) {
        if (str == "") {
            document.getElementById("txtProduct").innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtProduct").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "getProduct.php?q=" + str, true);
        xmlhttp.send();
    }

    function demo(rValue) {
        debugger;
        $rValue = "";
        $query = ("SELECT city FROM customer where id=" + rValue);
        $result = mysql_query($query);
        if ($row = mysql_fetch_array($result)) {
            $rValue = $row['city'];
        }
        return $rValue;
    }
</script>
<!--BEGIN MASKED INPUTS-->
<form action="process.php" class="register" method="POST">
    <div class="tab-content">
        <div class="tab-pane active" id="glyphicon">
            <div class="box">
                <header>
                    <div class="icons">
                        <i class="fa fa-share"></i>
                    </div>
                    <h4 style="padding-left:200px;"> Bill Generation Form </h4>
                </header>
            </div>
        </div>
    </div>
    <fieldset class="row1">
        <legend>Customer Information</legend>
        <p>
            <label>Customer Name * </label>

            <?php
            include_once("db.php");
            $data = mysql_query("select * from customer");
            while ($row = mysql_fetch_array($data)) {
                $id = $row['id'];
                $options .= "<option value=$id>" . $row['name'] . "</option>";
            }
            $menu = "<select name='cust_name' id='cust_name' class='selct_list'         onchange=showUser(this.value);demo(this.value)>" . $options . "</select>";
            echo $menu;
            ?>
        </p>

    <br>

    <div id="txtHint"><b>Person info will be listed here.</b></div>
    <br><br>
    <br>

    <div class="clear"></div>
    </fieldset>
    <legend>Products Details</legend>
    <table id="dataTable" class="form" border="1">
        <tbody>
        <tr><p>
            <td><input type="checkbox" required="required" name="chk[]" checked="checked"/></td>
            <td><label>Product Name</label>

                <?php
                include_once("db.php");
                $datas = mysql_query("select * from inventory");
                $options .= "<option value=''> select product </option>";
                while ($rows = mysql_fetch_array($datas)) {
                    $ids = $rows['id'];
                    $options .= "<option value= $ids>" . $rows['item'] . "</option>";
                }
                $menus = "<select name='BX_NAME[]' id='BX_NAME[]' class='selct_list' onchange=showProduct(this.value)>" . $options . "</select>";
                echo $menus;

                ?> 
            </td>
            <td>
                <label for="BX_age">Qty</label>
                <input type="text" required="required" class="small" name="BX_age[]" value="<?php ?>"></td>

            <td><label for="BX_gender">Tax %</label>
                <input type="text" id="BX_gender" required="required" class="small" name="BX_gender[]"></td>

            <td><label for="BX_birth">Unite Price</label>
                <input type="text" id="BX_birth" required="required" name="BX_birth[]"></td>
            </p>
        </tr>
        </tbody>
    </table>
    <div class="clear"></div>
    <br>

    <p>
        <input type="button" value="Add New Row" onClick="addRow('dataTable')" class="btn btn-success btn-sm btn-line"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="Remove Selected Row" onClick="deleteRow('dataTable')"
               class="btn btn-warning btn-sm btn-line"/>

    <p>(All acions apply only to entries with check marked check boxes only.)</p>
    </p>

    <legend>Invoice Preference</legend>
    <p><label for="BX_gender">Select Invoice Preference</label>
        <select id="invoice" name="invoice" required="required">
            <option>....</option>
            <option>Invoice</option>
            <option>Quate</option>
            <option>Receipt</option>
        </select> </legend>

    <br>

    <div id="txtHint"><b>Person info will be listed here.</b></div>
    <br><br>

    <br>
    <input class="submit" type="submit" value="Confirm &raquo;"/>

    <div class="clear"></div>
    <div class="clear"></div>
</form>

Answer 1

First of all, you have to give the value attribute to the <option> tag, then you have to call a javascript function onchange event of dropdown. 2) At that javascript function, put the code dropdown options value, which is selected, and then use javascript code document.getElementById('your field id wher you want to show your value').value = your dropdownvalue;

Answer 2

I didn't read your code but i think what you are asking for is:

    if ($("#SELECT").val() === "ProductX") {
    $("#TEXTINPUT").val(PRICE);
}

Of course wrap it into an change Function like $('#SELECT').change(function() { }

I recomend using JQuery else just use the js commands

Cheers