0

I have a working HTML/PHP form which has multiple text input fields: member's id, name, introducer id, and introducer name.I want to know how we can auto-fill the only input field of introducer name in my form by entering in introducer id field i.e. if I enter 100000 in introducer id field its auto populate the introducer name from database to the require field without refreshing and pressing enter key.Here is my html and php form code-`

<?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. yourname@xyz.com" 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>

Peeyush
  • 7
  • 4
  • Can you elaborate on how your code "doesn't work"? What were you expecting, and what actually happened? If you got an exception/error, post the line it occurred on and the exception/error details. Please [edit] these details in or we may not be able to help. – Claudia Jul 09 '16 at 14:14
  • Is there anything you've tried? Please remember that SO is not a coding service! And google is your friend to find tutorials for things like that! – Jeff Jul 09 '16 at 14:21
  • If you want to fetch data from the server and edit the webpage without a refresh, learn about AJAX (also called XHR). It has the capabilities you're looking for, but you'll need to start with simple examples or a tutorial. – BeetleJuice Jul 09 '16 at 15:07
  • @Jeff-I searched and read lots of tutorials but I didn't find anything helpful for me. – Peeyush Jul 10 '16 at 02:15

3 Answers3

0

I will show you how to do that with AJAX. 1° - download Jquery and use it in your project. 2° - after downloaded Jquery write this code on the end of your file :`

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

3° - create the file your_ajax_file.php and write this on it:

$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."')";
}
Vinicius Maia
  • 1
  • 1
  • Thanx for reply to my question. http://i.stack.imgur.com/Y737m.jpg please check the image for better understanding of my problem – Peeyush Jul 10 '16 at 02:49
0

Sure you can.

First, you need to decide what user event triggers the auto-fetch code. You have a number of choices, including:

  • blur() - when user clicks away from a specific field (such as #introducerid or any other field with a specific ID or class)

  • keyup() - keystroke-by-keystroke within a specific field

  • click() - user clicking on any element (usually a button, but can also be another input field, a radio button, any <div>, checkbox, etc

Next, you get the value you wish to look up, for e.g.

var iid = $('#introducerid').val();

Then use an AJAX construct, as set out below:

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

Notes:

1) This post contains some simple AJAX examples

2) $.post(), $.get() and $.load() are shorthand forms of $.ajax(). It is recommended to use the full $.ajax() form until you are more familiar with the process. The structure of $.ajax() keeps this simple process simple.

3) The above example uses jQuery. For it to work, you must include the jQuery library. Simplest way is to include below script tag somewhere in your document, usually immediately above the </body> tag, or in your <head></head> tag:

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

4) Stick with jQuery 1.xx for now...

5) I had to guess at your ID names. Modify as required.

Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • Thanx for reply sir.please check my form's image here http://i.stack.imgur.com/Y737m.jpg I want to fetch data from database so please provide me complete php code for do this.I want to use this method only for introducer_id and introducer_name field by entering key.Introducer name is based on introducer id key as shown in image. – Peeyush Jul 10 '16 at 03:09
  • In Google Chrome: **right-click** on the Introducer ID field, choose `Inspect Element`. The left panel will show the HTML and you can see the ID of that input field `` - now you have the ID for the Introducer ID field. Do the same thing for `Introducer Name` field. Now, use those ID values in the js/jQuery code. Work out the PHP code for yourself. ***Good idea: Create a stand-alone PHP file -- a new file, just for testing. Hard-code an ID value to query in the database, and `echo` the results of the query to the screen. When you have that working, turn it into the AJAX file*** – cssyphus Jul 10 '16 at 03:33
  • sir didn't happens anything. input id for introducer ID is (introducerid) and for introducer name is (introducerame) – Peeyush Jul 10 '16 at 04:34
  • I tried to explain it as best I could. It is time for you to study the example code closely and apply it to your specific situation. *Bonne chance mon ami* – cssyphus Jul 10 '16 at 18:02
0

Please check the the image for better understanding

I want to fill automatically only one field introducer name by entering his/her id key which is named as introducerID.The rest of form fields keep blank for manual entry.

Peeyush
  • 7
  • 4