我们如何在不刷新页面的情况下自动填充表单字段答案

【问题标题】：how we can autofill the form fields without refreshing page我们如何在不刷新页面的情况下自动填充表单字段
【发布时间】：2016-07-09 14:07:09
【问题描述】：

我有一个有效的 HTML/PHP 表单，它有多个文本输入字段：成员 ID、姓名、介绍人 ID 和介绍人姓名。我想知道如何在我的表单中自动填写介绍人姓名的唯一输入字段通过输入介绍人 ID 字段，即如果我在介绍人 ID 字段中输入 100000，它会自动将介绍人姓名从数据库填充到要求字段，而无需刷新并按 Enter 键。这是我的 html 和 php 表单代码-`

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

【问题讨论】：

您能否详细说明您的代码“不起作用”的原因？你期待什么，实际发生了什么？如果您遇到异常/错误，请发布它发生的行和异常/错误详细信息。请edit这些详细信息，否则我们可能无法提供帮助。
你有什么尝试过的吗？请记住，SO 不是编码服务！谷歌是你寻找类似教程的朋友！
如果您想从服务器获取数据并在不刷新的情况下编辑网页，请了解 AJAX（也称为 XHR）。它具有您正在寻找的功能，但您需要从简单的示例或教程开始。
@Jeff-我搜索并阅读了很多教程，但没有发现任何对我有帮助的东西。

标签： javascript php jquery ajax mysqli

【解决方案1】：

我将向您展示如何使用 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."')";
}

【讨论】：

感谢您回答我的问题。 i.stack.imgur.com/Y737m.jpg请查看图片以更好地理解我的问题

【解决方案2】：

Please check the the image for better understanding

我只想自动填写一个字段介绍人姓名，方法是输入他/她的 ID 键，名为介绍人ID。其余表单字段保留为空白以供手动输入。

【讨论】：

【解决方案3】：

当然可以。

首先，您需要确定触发自动获取代码的用户事件。您有多种选择，包括：

blur() - 当用户点击离开特定字段时（例如#introducerid 或任何其他具有特定 ID 或类的字段）
keyup() - 在特定字段中逐个击键
click() - 用户点击任何元素（通常是一个按钮，但也可以是另一个输入字段、单选按钮、任何<div>、复选框等

接下来，您将获得要查找的值，例如

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

然后使用 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

另一个_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 名称。根据需要修改。

【讨论】：

感谢先生的回复。请在此处查看我的表单图像i.stack.imgur.com/Y737m.jpg 我想从数据库中获取数据，所以请提供完整的 php 代码来执行此操作。我只想将此方法用于介绍人 ID 和介绍人名称字段，输入密钥。介绍人名称基于介绍人 ID 密钥，如图所示。
在 Google Chrome 中：右键单击介绍人 ID 字段，选择 Inspect Element。左侧面板将显示 HTML，您可以看到该输入字段的 ID <input id="????"> - 现在您有了介绍人 ID 字段的 ID。对Introducer Name 字段执行相同的操作。现在，在 js/jQuery 代码中使用这些 ID 值。自己编写 PHP 代码。好主意：创建一个独立的 PHP 文件——一个新文件，仅用于测试。硬编码要在数据库中查询的 ID 值，并将查询结果echo 显示到屏幕上。完成后，将其转换为 AJAX 文件
先生什么都没发生。介绍人 ID 的输入 ID 是 (introducerid)，介绍人姓名是 (introducerame)
我尽力解释它。现在是您仔细研究示例代码并将其应用于您的具体情况的时候了。 Bonne chance mon ami