如何使用 AJAX、PHP 和 MYSQL 在选择项目时在文本框中填充数据

Question

我有一个表单，当用户选择一个位置时，我需要在文本框中获取数据。如果用户选择一个地点，则以下名称和金额将出现在以下文本框中。我已完成以下操作，但它不起作用。谁能帮我解决这个问题吗？

我尝试过以下方法：

HTML

<div>
    <label for="" class="">Place</label>
    <select  name="place" id="place"  onchange="myplace();">
        <option value="">--Option from db--</option>
    </select>       
</div>

<div>
    <label for="" class="">Name</label>
    <input type="text"  name="myname" id="myname" value="<?php //if there is data in databas then it is shown here...otherwise the value will change according to the above selection?>" >  
</div>

<div>
    <label for="" class="">Amount</label>
    <input type="text"  name="myamnt" id="myamnt" value="<?php //if there is data in databas then it is shown here...otherwise the value will change according to the above selection?>" >  
</div>

MySQL：

if(!empty($_POST["myinitplace"]))
{
        
$sql = "SELECT * FROM all_data , my_place  WHERE all_data.place=my_place.place and all_data.place = ?";
$stmt = $conn->prepare($sql); 
$stmt->bind_param("s", $_POST["myinitplace"]);
$stmt->execute();
$result = $stmt->get_result(); 
while($rows = $result->fetch_assoc())   
{   
 $data['name']=$rows['name'] ;
 $data['myacc']=$rows['amount'] ;
                
}
echo json_encode($data);
                        
    }

阿贾克斯

function myplace() 
{
        
    var a = document.getElementById("place").value;
    //alert(a);
    $.ajax({
        type : "POST",
        data : {
            myinitplace : a 
        },
        dataType :  "JSON",
        success : function(data){
         document.getElementById("myname").value = data.name;
         document.getElementById("myamnt").value = data.myacc;
        }
    })  
}

Answer 1

<?php
require_once "database_conn.php";
$opt = (isset($_REQUEST['opt']))?$_REQUEST['opt']:"form";
if($opt=="form" or $opt=="")
{
?>
    <script src="jq.js" type="text/javascript"></script>
    <script>
    function myplace() 
    {
            
        var a = document.getElementById("place").value;
        $('.ajax').html('Getting Data Fom database');
        $.post('http://localhost/test/test2.php?opt=code',{'place':a},function(d){
            $('.ajax').html(d);
            jsdata =JSON.parse(d);
            dataname = jsdata.name;
            dataamount = jsdata.amount;
            $('#myname').val(dataname);
            $('#myamnt').val(dataamount);
        });
        
    }
    </script>
            
    <div>
        <label for="" class="">Place</label>
        <select  name="place" id="place"  onchange="myplace();">
            <option value="">--Option from db--</option>
            <?php
                $getplaces_query="select * from my_place order by place";
                $getplaces_query_connect=mysqli_query($con,$getplaces_query) or die(mysqli_error($con));
                while($places_data = mysqli_fetch_array($getplaces_query_connect))
                {
                    ?><option value="<?=$places_data['place'];?>"><?=$places_data['place'];?></option><?php
                }
            ?>
        </select>       
    </div>
    <h4 class="ajax"></h4>
    <div>
        <label for="" class="">Name</label>
        <input type="text"  name="myname" id="myname" value="<?php //if there is data in databas then it is shown here...otherwise the value will change according to the above selection?>" >  
    </div>
    
    <div>
        <label for="" class="">Amount</label>
        <input type="text"  name="myamnt" id="myamnt" value="<?php //if there is data in databas then it is shown here...otherwise the value will change according to the above selection?>" >  
    </div>  
<?php
}
?>
<?php
if($opt=="code")
{
    $place = (isset($_POST['place']))?$_POST['place']:"";
    $getplaces_query="select place,name,amount from all_data where place = '".$place."'";
    $getplaces_query_connect=mysqli_query($con,$getplaces_query) or die(mysqli_error($con));
    $final_data=array();
    $places_data = mysqli_fetch_array($getplaces_query_connect);
    echo json_encode($places_data);
}
?>