HTML表格根据所选值获取特定字段的数据

Question

I have a html form (person.html) with 3 fields:

1. Name
2. Email
3. Contact

I also have a MySQL table Engineer with all details about the same fields.

I need that, when the user inserts/selects a name and press go button, other Fields (EmailID and Contact) will auto receive data from DB and complete the form.

My file person.html has the following code :-

<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 DATA

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

Answer 1

Here you go.

This is a modified version of your form, to get you started on the method and result. Just run this form and see how the replies come back and fill up the form then you can adapt it.

This is saved in a file called: 'ajax_getting_specific.php'. The ajax makes a request to itself.

<?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>