如何使用两个下拉菜单在文本框中打印值

Question

In my app have two dropdown and one text box. Second drop down dependent on first drop down value. and I want text box value depend upon second drop down selected value.

form

<tr>
<td><label>BANK</label></td>
<td>
<select class="form-control" name="bankid" id="vbankid">
<option value="0"></option>
<?php
$result = mysqli_query($conn,"SELECT bankid,bankname FROM bankinfo");
while ($rowc = mysqli_fetch_array($result)) {
echo "<option value=" . $rowc[0] . ">" . $rowc[1];
}
?>
</select>
</td>
</tr>
<tr>
<td><label>ACCOUNT</label></td>
<td>
<select class="form-control" name="acno" id="saccountid">
</select>
</td>
</tr>
<tr>
<td><label>NAME</label></td>
<td><input class="form-control" name="txtname" id="sname"></td>
</tr>

javascript

<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../../bower_components/metisMenu/dist/metisMenu.min.js"></script>

<!-- DataTables JavaScript -->
<script src="../../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

 <!-- Custom Theme JavaScript -->
<script src="../../dist/js/sb-admin-2.js"></script> 
<script>

$(document).ready(function() {
    $('#dataTables-example').DataTable({
            responsive: true
    });


  $("#vbankid").change(function() {

    $(this).after('<div id="loader"><img src="../../images/loading.gif" alt="loading Topics" /></div>');

    $.get("loadaccount.php?vbankid=" + $(this).val(), function(data) {
        $("#saccountid").html(data);
        $('#loader').slideUp(200, function() {
            $(this).remove();
        });
    });


 });

  $("#saccountid").change(function() {
    var bankid = $("#vbankid").val();

    $(this).after('<div id="loader"><img src="../../images/loading.gif" alt="loading Topics" /></div>');

    $.get("loadname.php?vbankid=" + bankid + "&vaccountid=" + $(this).val(), function(data) {
        $("#sname").html(data);
        $('#loader').slideUp(200, function() {
            $(this).remove();
        });
    });


 });


});
</script>

loadname.php

<?php

$accountid = $_GET['vaccountid'];

$bankid = $_GET['vbankid'];

$result=mysqli_query($conn,"SELECT name FROM accountinfo WHERE accountid='$accountid' and bankid='$bankid'");

while($roww=mysqli_fetch_array($result))

{

 echo $roww[0];

}

?>

I searched some question but nothing is work.I don't understand where is the problem.second drop down value load perfectly but text box not working.please help me

Answer 1

In addition to the typo of missing the = in "&vaccountid" + $(this).val() , you are also using the wrong jQuery method for setting the value of a text input field. Instead of using .html() , you need to use .val() .

Replace $("#sname").html(data); with $("#sname").val(data);

As mentioned in my first comment, you really, really should be using prepared statements for your queries.