ページを更新せずにフォームフィールドを自動入力する方法

メンバーのID、名前、紹介者ID、紹介者名など、複数のテキスト入力フィールドを持つHTML/PHPフォームがあります。イントロデューサIDフィールドに入力することでイントロデューサ名の唯一の入力フィールドです。つまり、イントロデューサIDフィールドに100000を入力すると、データベースからイントロデューサ名が自動的に入力され、必要なフィールドに更新されずにEnterキーが押されます。フォームコード-`ページを更新せずにフォームフィールドを自動入力する方法

<?php 
$title = 'Add new member'; 
include_once 'header.php'; 
include_once 'footer.php';?> 
<html> 
    <body> 
     <section id="main" class="column"> 

     <h4 class="alert_info">Welcome to the management page of the company</h4><div class="wrapper"> 
     <div id="main" style="padding:2px 0 0 0;"> 
     <article class="module width_full"> 
      <header><h3>Stats</h3></header> 
      <div class="module_content"> 
     <!-- Form --> 
       <form action="addmembers.php" method="post" class="register"> 
      <h1 style="margin-left: 250px;">New Member Registration</h1> 
      <fieldset class="row1"> 
       <legend>Account Details 
       </legend> 
       <p> 
       <label> 
        Introducer Id: *</label> 
        <input type="text" name="3" id="introducerid" placeholder="Please enter Introducer Id" required onKeyDown="limitText(this,6);"onKeyUp="limitText(this,6);"/> 

           <label> 
        Introducer Name: *</label> 
        <input type="text" name="42" id="Introducerame" placeholder="Please enter Introducer Name" required autofocus> 

       </p> 

         </fieldset> 
         <fieldset class="row2"> 
          <legend>Personal Details 
       </legend> 
           <p> 
       <label> 
        <span>Name: *</span></label> 
        <input type="text" name="5" id="name" placeholder="Please enter member's name" required autofocus class="long"> 

      </p> 

         <p> 
       <label> 
        <span>Father/Husband Name: *</span></label> 
        <input type="text" name="6" id="father_husband_name" placeholder="Please enter father or husband name" required autofocus class="long"> 

         </p> 
      <p> 
       <label> 
        <span>Correspondence Address: *</span></label> 
        <input type="text" name="7" id="per_address" placeholder="Please enter correspondence address" required autofocus class="long"> 

         </p> 
      <p> 
       <label> 
        <span>City: *</span></label> 
        <input type="text" name="8" id="city" placeholder="Please enter city name" required class="long"> 
         </p> 
      <p> 
       <label> 
        <span>Residential Address: *</span></label> 
        <input type="text" name="9" id="resi_address" placeholder="Please enter current address" required autofocus class="long"> 

      </p> 
         <p> 
       <label> 
        <span>Phone: *</span></label> 
             <input type="text" name="22" id="phone" placeholder="Please enter contact number" required class="long" onKeyDown="limitText(this,10);"onKeyUp="limitText(this,10);"/> 

         </p> 
         <p> 
       <label> 
        <span>Gender: *</span></label> 
          <input type="radio" name="23" value="Male" class="gender"><label class="gender">Male</label> 
          <input type="radio" name="23" value="Female" class="gender"><label class="gender">Female</label> 

         </p> 
         <p> 
       <label> 
        <span>Nominee: *</span></label> 
        <input type="text" name="55" id="nominee" placeholder="Please enter nominee name" required autofocus class="long"> 

      </p> 
         <p> 
       <label> 
        <span>Age: *</span></label> 
          <input type="number" name="56" id="nominee" placeholder="&nbsp;&nbsp;yy" required autofocus style="width: 55px;" onKeyDown="limitText(this,2);"onKeyUp="limitText(this,2);"/> 

      </p> 
         <p> 
       <label> 
        <span>Relation: *</span></label> 
        <input type="text" name="57" id="nominee" placeholder="Nominee's relation" required autofocus class="long"> 

      </p> 
         </fieldset> 
         <fieldset class="row3"> 
          <legend>Further Information 
       </legend> 
          <p> 


       <label> 
        PAN card: </label> 
             <input type="text" name="bc" id="PAN" placeholder="Please enter member's PAN card no."onKeyDown="limitText(this,10);"onKeyUp="limitText(this,10);"/> 

      </p> 
           <p> 
       <label> 
        <span>Email: *</span></label> 
            <input type="email" name="24" id="email" placeholder="i.e. [email protected]" class="long"> 

           </p> 
      <p> 
       <label> 
        <span>Date of birth: *</span></label> 
             <input type="date" name="25" id="birthdate" required autofocus> 

         </p> 
         <p> 
       <label> 
        <span>Martial Status: *</span></label> 
          <input type="radio" name="26" value="Married" class="gender"><label class="gender">Married </label> 
          <input type="radio" name="26" value="Unmarried" class="gender"><label class="gender">Unmarried</label> 

         </p> 
         <p> 
       <label> 
        <span>Occupation: *</span></label> 
        <input type="text" name="27" id="occupation" placeholder="Please enter occupation detail" required class="long"> 

         </p> 
         <p> 
       <label> 
        <span>Education: *</span></label> 
        <select name="28" id="education" class="select"> 
              <option value="0">Select one</option> 
              <option value="Highschool">Highschool</option> 
              <option value="Intermediat">Intermediat</option> 
              <option value="Graduation">Graduation</option> 
              <option value="Under Graduate">Under Graduate</option> 
              <option value="Post Graduation">Post Graduation</option> 
              <option value="Under Post Graduate">Under Post Graduate</option> 
              <option value="Other">Other</option> 
           </select> 
         </p> 
         <p> 
       <label> 
        <span>Nationality: *</span></label> 
        <select name="29" id="education" class="select"> 
              <option value="not selected">Select one</option> 
              <option value="Indian">Indian</option> 
              <option value="Non-Indian">Non-Indian</option> 
           </select> 
           </select> 

         </p> 
         <p> 
       <label> 
        <span>Verification Document: *</span></label> 
             <select name="30" id="idproof" class="select"> 
              <option value="no">Select one from below options</option> 
              <option value="Voter Id">Voter Id</option> 
              <option value="Ration Card">Ration Card</option> 
              <option value="Driving License">Driving License</option> 
              <option value="UID card">UID card</option> 
              <option value="PAN card">PAN card</option> 
           </select> 

         </p> 
         <p> 
       <label> 
        <span>Religion: *</span></label> 
             <input type="text" name="32" id="religion" placeholder="Please enter religion" required> 

         </p> 
         </fieldset> 
      <fieldset class="row1" style="margin-top: 30px;"> 
          <legend>Bank Details 
       </legend> 
         <p> 
       <label> 
        <span>Bank Name: *</span></label> 
        <input type="text" name="33" id="bank_name" placeholder="Please enter Bank name" required autofocus> 


       <label> 
        <span>Branch: *</span></label> 
        <input type="text" name="34" id="branch" placeholder="Please enter branch name" required autofocus> 

         </p> 
         <p> 
       <label> 
        <span>IFSC code: *</span></label> 
        <input type="text" name="35" id="IFSC" placeholder="Please enter IFSC code here" required autofocus> 


       <label> 
        <span>Account Number: *</span></label> 
             <input type="text" name="36" id="account_no" placeholder="Please enter member's account number" required autofocus> 

         </p></fieldset> 

         <input type="submit" value=" Submit " name="submit"/> 

     </form> 
     <!-- /Form --> 

     </div> 
       </div> 
<?php 
if(isset($_POST["submit"])){ 
$servername = "localhost"; 
$username = "vicky"; 
$password = "vicky"; 
$dbname = "nrj"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
die("Connection failed: " . $conn->connect_error); 
} 

$sql = "INSERT INTO members (introducrid, Introducername, PAN, name, father_husband_name, per_address, city, resi_address, phone, gender, nominee, age, relation, email, birthdate, martial_status, occupation, education, nationalty, idproof, religion, bank_name, branch, IFSC, account_no) 
VALUES ('".$_POST["3"]."','".$_POST["42"]."','".$_POST["bc"]."','".$_POST["5"]."','".$_POST["6"]."','".$_POST["7"]."','".$_POST["8"]."','".$_POST["9"]."','".$_POST["22"]."','".$_POST["23"]."','".$_POST["55"]."','".$_POST["56"]."','".$_POST["57"]."','".$_POST["24"]."','".$_POST["25"]."','".$_POST["26"]."','".$_POST["27"]."','".$_POST["28"]."','".$_POST["29"]."','".$_POST["30"]."','".$_POST["32"]."','".$_POST["33"]."','".$_POST["34"]."','".$_POST["35"]."','".$_POST["36"]."')"; 

if ($conn->query($sql) === TRUE) { 
echo "<script type= 'text/javascript'>alert('New record created successfully');</script>"; 
} else { 
echo "<script type= 'text/javascript'>alert('Error: " . $sql . "<br>" . $conn->error."');</script>"; 
} 

$conn->close(); 
} 
?> 
</div> 
       <div class="spacer"></div> 



     </section> 
<script language="javascript" type="text/javascript"> 
function limitText(limitField, limitNum) { 
    if (limitField.value.length > limitNum) { 
     limitField.value = limitField.value.substring(0, limitNum); 
    } 
} 
</script> 

</body> 

</html>

出典

2016-07-09 Peeyush

あなたのコードが「うまくいかない」方法を詳しく説明できますか？あなたは何を期待していましたか、実際何が起こったのですか？例外/エラーがある場合は、それが発生した行と例外/エラーの詳細を投稿してください。これらの詳細を入力または編集してください。 –

試したことはありますか？ SOはコーディングサービスではないことを覚えておいてください！そして、そのようなことのためのチュートリアルを見つけるあなたの友人はGoogleです！ – Jeff

サーバーからデータを取得し、更新せずにWebページを編集する場合は、AJAX（XHRとも呼ばれます）について学びます。それはあなたが探している機能を持っていますが、簡単な例やチュートリアルから始める必要があります。 – BeetleJuice

私はAJAXでそれを行う方法を紹介します。 1° - Jqueryをダウンロードしてプロジェクトで使用してください。 2° - ダウンロードjqueryのは、ファイルの末尾にこのコードを書いた後： `

<script> 
$("#introducerid").change(function(){ 
    $.get("your_ajax_file.php?value="+$(this).val(),function(data){eval(data);}); 
}); 
</script>`

3° - ファイルyour_ajax_file.phpを作成し、その上でこれを書く：

$value = $_GET["value"]; 
//here you makes your query 
$query = mysqli_query(your_connection(),"select * from your_table where your_column_name = ".$value); 
$array = @mysqli_fetch_array($query); 
if($array != ''){ 
    $introducerName = $array["introducerName"]; 
echo "$('#Introducerame').val('".$introducerName."')"; 
}

出典

2016-07-09 16:51:28

私の質問への返信のためのThanx。 http://i.stack.imgur.com/Y737m.jpg私の問題の理解を深めるために画像を確認してください – Peeyush

あなたができることを確認。

まず、自動フェッチコードをトリガーするユーザーイベントを決定する必要があります。あなたには、選択肢の数を持っている：

ぼかし（） - ユーザーが特定のフィールド（のような#introduceridまたは特定のIDまたはクラスと他のフィールド）
から離れてクリックしたときkeyup（） - 特定のフィールド内でのキーストローク
click（） - ユーザーが任意の要素をクリックします（通常はボタンですが、別の入力フィールド、ラジオボタン、任意の<div>、チェックボックスなども可能です）。

次に、検索する値を取得します（例：そして

以下に述べるように、構築AJAXを使用する：

JS/jQueryの：

$('#introducer').blur(function(){ 
    var iid = $(this).val(); 
    $.ajax({ 
     type: 'post', 
     url: 'another_php_file.php', 
     data: 'iid = ' + iid 
    }) 
    .done(function(recd){ 
     //alert('Received: ' + recd); //uncomment to see what PHP side sent back 
     $('#introducer_name').val(recd); //recd contains string Barry Soetoro, injects that into #introducer_name 
    }); //END AJAX code block 

}); //END blur fn

another_php_file.php

<?php 
    $iid = $_POST['iid']; //NOTE: You should always sanitize your inputs -- google it 

    $out = //perform your mysql query// e.g. returns Barry Soetoro 

    echo $out; //echos the string Barry Soetoro

を

注

1）This post contains some simple AJAX examples

2）$.post()、$.get()と$.load()は$.ajax()の短縮形です。このプロセスに精通するまで、完全な$.ajax()フォームを使用することをお勧めします。 $.ajax()の構造は、この単純なプロセスを単純なものにしています。

3）上記の例では、jQueryを使用しています。そのためには、jQueryライブラリをインクルードする必要があります。最も簡単な方法は、通常はすぐに</body>タグ以上、またはあなたの<head></head>タグには、ドキュメント内のどこかにスクリプトタグの下に含めることです：...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

4）今のjQueryの1.xxのでスティック

5）あなたのID名を推測しなければならなかった。必要に応じて変更します。

出典

2016-07-10 00:22:31 gibberish

返信用Thanx sir.pleaseここに私のフォームの画像をチェックhttp://i.stack.imgur.com/Y737m .jpgデータベースからデータを取得したいので、これを行うための完全なPHPコードを提供してください。このメソッドは、introducer_idとintroducer_nameフィールドにのみkey.Introducerの名前を入力することによって使用したいと思います。 – Peeyush

Google Chromeの場合：** [導入者ID]フィールドで**を右クリックし、[要素の検査]を選択します。左側のパネルにHTMLが表示され、その入力フィールドのIDが表示されます。 '' - これで、「紹介者ID」フィールドのIDが取得されました。 'Introducer Name'フィールドにも同じことをします。さて、これらのID値をjs/jQueryコードで使用してください。 PHPコードを自分で作成してください。 ***良いアイデア：スタンドアロンのPHPファイルを作成します。これは新しいファイルで、テストのためだけに使用します。データベースで照会するID値をハードコーディングし、照会の結果を画面に表示します。あなたがその作業をしたら、それをAJAXファイルに変換してください*** – gibberish

何も起こっていません。紹介者IDの入力IDは（紹介者ID）、紹介者名は（紹介者名） – Peeyush

Please check the the image for better understanding

は、私は、フォームフィールドのintroducerID.The残りは手動入力用のブランク保つとして命名された彼/彼女のIDキーを入力することにより、自動的に一つだけのフィールドイントロ名を記入します。

出典

2016-07-10 02:46:58 Peeyush

ページを更新せずにフォームフィールドを自動入力する方法

答えて

関連する問題