HTML表格根據所選值獲取特定字段的數據

Question

我有一個HTML表單（person.html），其中包含3個字段：

1. 名稱
2. 電子郵件
3. 聯系

我還有一個MySQL表Engineer其中包含有關相同字段的所有詳細信息。

我需要的是，當用戶插入/選擇一個名稱並按執行按鈕時，其他字段（EmailID和聯系人）將自動從數據庫接收數據並填寫表格。

我的文件person.html具有以下代碼：-

<form name="form1" style="margin:0px">
   <input name="formtext1" type="text" width:200px;left:140px;top:120px;z-index:2">
   <input name="formbutton1" type="submit" value="GO" left:140px;top:140px;z-index:3">
   <input name="formtext2" type="text" width:200px;left:140px;top:180px;z-index:5">
   <input name="formtext3" type="text" width:200px;left:140px;top:240px;z-index:7">
</form>
<div id="text1" left:60px; top:120px; width:41px; height:20px; z-index:1">
  <div class="wpmd">
    <div>Name</div>
  </div>
</div>
<div id="text2" left:60px; top:180px; width:52px; height:27px; z-index:4">
   <div class="wpmd">
      <div>Email</div>
   </div>
</div>
<div id="text3" left:60px; top:240px; width:47px; height:18px; z-index:6">
   <div class="wpmd">
      <div>Contact</div>
   </div>
</div>

MySQL數據

Name     -   Email             -      Contact
XYZ      -   xyz@example.com   -      1234588888
ABC      -   abc@example.com   -      1234599999

Answer 1

干得好。

這是表單的修改版本，可幫助您開始使用方法和結果。 只需運行此表單，然后查看答復如何返回並填寫表單，然后就可以對其進行調整。

這被保存在一個名為“ ajax_getting_specific.php”的文件中。 Ajax向自身發出請求。

<?php
$formtext = isset($_POST['formtext'])? $_POST['formtext'] : null;
if (!empty($formtext) ){

       /* When you understand how it works, use this kind of sql to get
        * the data and show it back to the request. */

       /*
         $sql = "SELECT name,email,contact FROM datatable WHERE Name = '$formtext'";   
         $result = mysqli_query($db_conx, $sql);
         if (mysqli_num_rows($result) === 1){    
            $data = mysqli_fetch_assoc($result);
            echo $data['name'] . ":" . $data['Email'] .":". $data['Contact'];
         } else {
            echo "failed";  
         }
       */

    /* This is just temporarily sending a sample response.*/
    if($formtext !== null){
        die("$formtext:$formtext@example.com:123456789");
    } else {
        die("failed");
    }
} 

?>

<script type='text/javascript'>
function getAjaxRequest() {
    var username = document.getElementById('formtext1').value;

    /* request to itself */     
    var ajax = ajaxObj('POST', 'ajax_getting_specific.php'); 

    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            if(ajax.responseText != 'failed'){

                // This part is populating the fields based on what came back

                var fields = ajax.responseText.split(":");
                alert (fields[0] + " - " + fields[1] + " - " + fields[2]);
                document.getElementById('ajax-response').innerHTML =  ajax.responseText;
                document.getElementById('formtext2').value = fields[1];
                document.getElementById('formtext3').value = fields[2];

                document.getElementById('name-display').innerHTML = fields[0];
                document.getElementById('email-display').innerHTML = fields[1];
                document.getElementById('contact-display').innerHTML = fields[2];

            } else {
                document.getElementById('ajax-response').innerHTML =  "AJAX FAILED";
            }
        }
    }
    ajax.send('formtext=' + username);
}

function ajaxObj( meth, url ) {
    var x = new XMLHttpRequest();
    x.open( meth, url, true );
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    return x;
}

function ajaxReturn(x){
    if(x.readyState == 4 && x.status == 200){
        return true;    
    }
}

</script>

Fetching fields from table based on the first entry
<br>
<div id='ajax-response'>AJAX response will appear here</div>
<br><br>

 <input id="formtext1" name="formtext1" type="text" style="width:200px;left:140px;top:120px;z-index:2">
 <button name="formbutton1" 
    onclick="getAjaxRequest()" value="GO" style="left:140px;top:140px;z-index:3">GO</button>
<form name="form1" style="margin:0px">
 <input id="formtext2" name="formtext2" type="text" style="width:200px;left:140px;top:180px;z-index:5">
 <input id="formtext3" name="formtext3" type="text" style="width:200px;left:140px;top:240px;z-index:7">
 </form>
 <div id="text1">
    <div class="wpmd">
        <div>Name: <span id="name-display" style="z-index:1"></span></div>
    </div>
</div>
 <div id="text2">
 <div class="wpmd">
 <div>Email: <span id="email-display"></span></div>
 </div></div>
 <div id="text3">
 <div class="wpmd">
 <div>Contact: <span id="contact-display"></span></div>
 </div></div>