根据来自数据库的选择字段的值自动填充表单字段

Question

如何根据选择字段中的值从我的数据库中自动填充其他输入字段并使其只读，或者如果该值未分配，则将其留空？

<?php
//include auth.php file on all secure pages
require("../db.php");
session_start();
if(!isset($_SESSION["username"])){
header("Location: login");
exit(); }
?>
<?php require_once('header.php')?>

<div class="container content">
    <h2>Add Shipment</h2>



<script type="text/javascript">


$(document).ready(function(){

    txt=$("#ShipmentCustomerid").val();

      if(txt=='0')
       {
           fun1='';



    $("#ShipmentShipperphone").removeAttr('readonly');

    $("#ShipmentShipperaddress").removeAttr('readonly');

     $("#ShipmentShippername").removeAttr('readonly');


    $("#ShipmentShipperemail").removeAttr('readonly');

       }

       else
       {
          gum1='';             

       $("#ShipmentShipperphone").attr('readonly',true);

           $("#ShipmentShipperaddress").attr('readonly',true);

        $("#ShipmentShippername").attr('readonly',true);
       $.get("Shipperphone/"+txt,{ },function(result){
           result = $.trim(result)
      $("#ShipmentShipperphone").val(result);


    });

       $.get("Shipperaddress/"+txt,{ },function(result){
           result = $.trim(result)
      $("#ShipmentShipperaddress").val(result);


    });


        $.get("newshippername/"+txt,{ },function(result){
           result = $.trim(result)
      $("#ShipmentShippername").val(result);


    });



     $.get("shipperemail/"+txt,{ },function(result){
           result = $.trim(result)
      $("#ShipmentShipperemail").val(result);


    });



       }


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

     txt=$("#ShipmentCustomerid").val();

       if(txt=='0')
       {
           fun='';

           $("#ShipmentShipperphone").removeAttr('readonly');

           $("#ShipmentShipperaddress").removeAttr('readonly');
           $("#ShipmentShippername").removeAttr('readonly');

           $("#ShipmentShipperphone").val(fun);

            $("#ShipmentShipperaddress").val(fun);

             $("#ShipmentShippername").val(fun);

             $("#ShipmentShipperemail").val(fun);

            $("#ShipmentShipperemail").removeAttr('readonly');

       }

       else
       {
          gum=''; 


       $("#ShipmentShipperphone").attr('readonly',true);

           $("#ShipmentShipperaddress").attr('readonly',true);

       $("#ShipmentShippername").attr('readonly',true);

       $("#ShipmentShipperemail").attr('readonly',true);

       $.get("Shipperphone/"+txt,{ },function(result){

      $("#ShipmentShipperphone").val(result);


    });

       $.get("Shipperaddress/"+txt,{ },function(result){

      $("#ShipmentShipperaddress").val(result);


    });

     $.get("Shipperphone/"+txt,{ },function(result){
           result = $.trim(result)
      $("#ShipmentShipperphone").val(result);


    });

  $.get("newshippername/"+txt,{ },function(result){
           result = $.trim(result)
      $("#ShipmentShippername").val(result);


    });
$.get("shipperemail/"+txt,{ },function(result){
           result = $.trim(result)
      $("#ShipmentShipperemail").val(result);


    });



       }


  });
});

</script>
<div id="test"></div>
<div class="col-md-4">


 <form action="add_shipment" id="ShipmentAddForm" method="post" accept-charset="utf-8">  
    <div class="form-group">
    <h4>Shipper info :</h4>
    </div>

     <div class="form-group"><label for="ShipmentCustomerid">Choose</label><select name="id" class="form-control" id="ShipmentCustomerid">
<option value="0">Unassigned</option>
<?php
$result = mysqli_query($con,"SELECT Id,customername,phone,address,email FROM customer");
                 while($row = mysqli_fetch_array($result)) {
        ?>
            <option value="<?=$row[0]?>"><?=$row[1]?></option>
        <?php }
    ?>
</select></div>   

     <div class="form-group required"><label for="ShipmentShippername">Shippername</label><input name=""  class="form-control" maxlength="35" type="text" id="ShipmentShippername" required="required"/></div>  
           <div class="form-group"><label for="ShipmentShipperphone">Phone</label><input name="" class="form-control" readonly="readonly" maxlength="30" type="text" id="ShipmentShipperphone"/></div>       



 <div class="form-group required"><label for="ShipmentShipperaddress">Address</label><textarea name="" id="ShipmentShipperaddress" class="form-control" readonly="readonly" cols="30" rows="6" required="required"></textarea></div>    



  <div class="form-group"><label for="ShipmentShipperemail">Email</label><input name="]" class="form-control" readonly="readonly" maxlength="55" type="text" id="ShipmentShipperemail"/>

  </div>          

这里是代码，并且将真正为如何使它变得更好做出更多贡献。

Answer 1

您应该使用 ajax post 或 get 来自动完成。

参考：http://phppot.com/jquery/jquery-ajax-autocomplete-country-example/

 // AJAX call for autocomplete 
 $(document).ready(function(){
  $("#search-box").keyup(function(){
    $.ajax({
    type: "POST",
    url: "readCountry.php",
    data:'keyword='+$(this).val(),
    beforeSend: function(){
        $("#search-box").css("background","#FFF url(LoaderIcon.gif) 
  no-repeat 165px");
    },
    success: function(data){
        $("#suggesstion-box").show();
        $("#suggesstion-box").html(data);
        $("#search-box").css("background","#FFF");
       }
       });
    });
});
//To select country name
function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}