如何通過在 PHP 中使用 MySql 從第一個下拉菜單中選擇來填充三個文本字段

Question

我在一個網站上工作，我必須在其中放置用戶詳細信息，其中包含用戶名、地址、電話和郵政編碼。

所有的細節都存儲在 MySql 中。

因此，在表單中，如果我從下拉菜單中單擊用戶名，那么其他三個文本字段將自動填充相應的數據。

例如，如果用戶名被選擇為 id 13，那么地址和其他字段可能有這樣的內容，[將地址插入字段，其中名稱=id13]

類似的東西，我不確定它是如何工作的。

注意：我想在知道第一個選項的情況下自動填充其他三個字段。 其他三個選項與第一個選項存儲在同一數據庫中

我的代碼到目前為止

<!-- START Presonal information -->
<fieldset class="col-md-6">
    <legend>Shipper Data :</legend>

    <!-- Name -->
    <div class="form-group">
        <label class="control-label" >SHIPPER<span class="required-field"></span></label>                               
        <select type="text" name="Shippername" id="Shippername" class="form-control">
            <option value="0">Select</option>
            <?php
                $sql=mysql_query("SELECT * FROM customer");
                while($row=mysql_fetch_array($sql)){
                    echo '<option value="'.$row['Shippername'].'">'.$row['Shippername'].'</option>';
                }
            ?>
        </select>      

        </div>
                                <div class="row" >
                                <div class="col-sm-6 form-group">
                                    <label  class="control-label">ADDRESS<span class="required-field"></span></label>
                                    <input type="text"  name="Shipperaddress" id="Shipperaddress"class="form-control"  autocomplete="off" required>
                                </div>

                                <div class="col-sm-3 form-group">
                                    <label  class="control-label">PHONE</label>
                                    <input type="text" class="form-control" name="Shipperphone" id="Shipperphone" autocomplete="off" required>
                                </div>

                                <div class="col-sm-3 form-group">
                                    <label class="control-label">PIN CODE</i></label>
                                    <input type="text" name="Shippercc" id="Shippercc"class="form-control"  maxlength="20" placeholder="" autocomplete="off" required>
                                </div>
                            </div>  

Answer 1

在評論中檢查 jfiddle

//JQuery

$('#Shippername').change(function() {
    selectedOption = $('option:selected', this);
    $("#Shipperaddress").val( selectedOption.data('address') );
    $("#Shipperphone").val( selectedOption.data('phone') );
    $("#Shippercc").val( selectedOption.data('zipcode') );
});

//php

<select name="Shippername" id="Shippername">
    <option value="0">Select</option>
    <?php 
        $sql=mysql_query("SELECT * FROM customer");
        while($row=mysql_fetch_array($sql)) {
    ?>
            <option value="<?php echo $row['Shippername'];?>" data-address="<?php echo $row['Shipperaddress'] ?>" data-phone="<?php echo $row['Shipperphone'] ?>" data-zipcode="<?php echo $row['Shippercc'] ?>"><?php echo $row['Shippername'];?></option>
    <?php   
        }
    ?>
</select>
<div class="row" >
    <div class="col-sm-6 form-group">
        <label  class="control-label">ADDRESS<span class="required-field"></span></label>
        <input type="text"  name="Shipperaddress" id="Shipperaddress"class="form-control"  autocomplete="off" required>
    </div>
    <div class="col-sm-3 form-group">
        <label  class="control-label">PHONE</label>
        <input type="text" class="form-control" name="Shipperphone" id="Shipperphone" autocomplete="off" required>
    </div>
    <div class="col-sm-3 form-group">
        <label class="control-label">PIN CODE</i></label>
        <input type="text" name="Shippercc" id="Shippercc"class="form-control"  maxlength="20" placeholder="" autocomplete="off" required>
    </div>
</div>

Answer 2

通常，您可能希望采用的方法來實現您的目標可能類似於以下半偽代碼。 請注意，這沒有經過測試，因此您可能需要看看會發生什么 - 數據庫調用不會像它們那樣工作，因此您需要對其進行調整，但希望它能讓您對如何處理這個問題有一個好主意：

<?php
    @session_start();

    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        /* 
            Process the ajax request here to return data from db
            The returned data is then used by your ajax callback to
            build / populate fields in your form.

            And yes, this should use PDO or prepared statements to avoid
            mailicious users trying to hijack your site ( sql injection )
        */

        $id=$_POST['id'];
        $sql='select * from `customer` where `id`="'.$id.'"';
        $results=$db->query( $sql );
        $json=json_encode( $results );

        /* the json data is used by "cbgetdata(r)" */
        echo $json;


        exit(); 
    }

    /* Include your files and do whatever else needs done */

?>

<html>
    <head>
        <title>Fred Flintstone didn't know how to write code</title>
        <script>
            function getdata(e){

                var http=new XMLHttpRequest();
                var oSel=document.getElementById('betty');
                var id=oSel.options[ oSel.options.selectedIndex ].value;

                var headers={
                    'Accept': "text/html, application/xml, application/json, text/javascript, "+"*"+"/"+"*"+"; charset=utf-8",
                    'Content-type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest'
                };

                http.onreadystatechange=function(){
                    if( http.readyState==4 && http.status==200 ) cbgetdata.call( this, http.response );
                };

                http.open( 'POST', document.location.href, true );
                for( header in headers ) http.setRequestHeader( header, headers[ header ] );
                http.send( 'id='+id );
            }
            function cbgetdata( r ){
                /* callback function that does the form field completion etc */ 
                var json=JSON.parse( r );
                alert( json );
            }
        </script>
    </head>
    <body>
        <form name='bert' id='bert'>
            <select id='betty' onchange='getdata(event)'>
                <optgroup label='select a user'>
                    <option value=1>Fred
                    <option value=2>Wilma
                    <option value=3>Barney
                </optgroup>
            </select>

            <input type='text' id='tf1' name='tf1' />
            <input type='text' id='tf2' name='tf2' />
        </form>
    </body>
</html>