0

3 つのフィールドを持つ html フォーム (person.html) があります。

  1. 名前
  2. Eメール
  3. コンタクト

Engineer同じフィールドに関するすべての詳細を含む MySQL テーブルもあります。

ユーザーが名前を挿入/選択して [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 データ

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

1 に答える 1

0

どうぞ。

これは、メソッドと結果を開始するためのフォームの修正版です。このフォームを実行して、返信がどのように戻ってくるかを確認し、フォームに記入してから、それを適応させることができます.

これは「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>
于 2013-05-11T13:31:02.803 に答える