Question

我有一个包含3个字段的html表单（person.html）：

姓名
电子邮件
联络

我还有一个MySQL表Engineer，其中包含有关相同字段的所有详细信息。

我需要这样，当用户插入/选择名称并按下go按钮时，其他字段（EmailID和联系人）将自动从DB接收数据并填写表格。

我的文件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 DATA

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>

Html表单根据选定的值获取特定字段的数据

1 个答案: