Question 243607 in Mysql Question posted in
The official MySQL documentation can be found here.

How to populate data in text boxes on selection of an item using AJAX ,PHP and MYSQL

I have a form where i need to get data in a text box when user selects a place. If the user chooses a place then the following name and amount will come in the following textbox. I have done the following but it is not working. Can anyone please help me with this?

I have tried the following:

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);
                        
    }

Ajax

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;
        }
    })  
}
Tags:

2

Answers


  1. 0 
    <?php
//your Database Connection//
require_once "database_conn.php";
//Option for page view //
$opt = (isset($_REQUEST['opt']))?$_REQUEST['opt']:"form";
if($opt=="form" or $opt=="")
{
?>

    <script src="jquery.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);
}
?>
    Login or Signup to reply.
  2. 0

    First of all, I assume that you have populated the select block with valid data in the following line:

     <option value="">--Option from db--</option>

    such as

    <option value="Place1">Place1</option>
<option value="Place2">Place2</option>

    In that case, you need to slightly amend your HTML code so that it explicitly calls the PHP script (by specifying the url), so add the line in the ajax block:

     url: "xxxx.php",

    Assuming that the PHP script’s name is testSO3Sept2023.php, then the HTML will be:

    <script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>

<div>
    <label for="" class="">Place</label>
    <select  name="place" id="place"  onchange="javascript:myplace();">
        <option value="">Please select</option>
        <option value="Place1">Place1</option>
        <option value="Place2">Place2</option>

    </select>       
</div>

<div>
    <label for="" class="">Name</label>
    <input type="text"  name="myname" id="myname" value="" >  
</div>

<div>
    <label for="" class="">Amount</label>
    <input type="text"  name="myamnt" id="myamnt" value="" >  
</div>

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

</script>

    You may view the result by this sandbox

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search