我有一个有效的HTML / PHP表单，其中有多个文本输入字段：成员的id，名称，介绍人ID和介绍人名称。我想知道如何在表单中自动填充介绍人姓名的唯一输入字段通过输入介绍者id字段，即如果我在介绍者id字段中输入100000，则自动将介绍人名称从数据库填充到require字段而不刷新并按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=" 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>
答案 0 :(得分：0)
我将向您展示如何使用AJAX。 1° - 下载Jquery并在您的项目中使用它。 2° - 下载后的Jquery在你的文件末尾写下这段代码：`
function onSubmit() {
var requestType = g_form.getValue('request_type');
if (requestType == 'mifi') {
console.log("calling validateTravelEndDate()");
// **CHANGED CODE: instead of g_form.submit(), this will return true
if(validateTravelEndDate()){
return true;
}
else{
return false;
}
} else
return true;
}
//Helper function which calls a AJAX script include called "ClientDateTimeUtils" which gives the response in a callback where i am deciding whether to submit the form or not based on the status of days result.
function validateTravelEndDate() {
var startDate = g_form.getValue('travel_start'); //First Date/Time field
var endDate = g_form.getValue('travel_end'); //Second Date/Time field
var dttype = 'day'; //this can be day, hour, minute, second. By default it will return seconds.
console.log("startDate :" + startDate + "endDate :" + endDate);
var ajax = new GlideAjax('ClientDateTimeUtils'); // This is the script include which can be used for date validation.
ajax.addParam('sysparm_name', 'getDateTimeDiff');
ajax.addParam('sysparm_fdt', startDate);
ajax.addParam('sysparm_sdt', endDate);
ajax.addParam('sysparm_difftype', dttype);
console.log("before " + g_form.getValue('travel_end'));
// **CHANGED CODE: validateTravelEndDate returns the callback value
return ajax.getXML(checkDateDiff);
}
// callback function where deciding to go ahead or not with form submission.
function checkDateDiff(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
console.log("difference in days:" + answer);
if (answer <= 0) {
alert("Travel End date must be after Travel Start date.");
g_form.setValue('travel_end', '');
g_form.showFieldMsg('travel_end', 'Please provide a future date', 'error');
return false;
}
else {
// **CHANGED CODE: checkDateDiff will return true
return true;
}
}
3° - 创建文件your_ajax_file.php并在其上写下：
<script>
$("#introducerid").change(function(){
$.get("your_ajax_file.php?value="+$(this).val(),function(data){eval(data);});
});
</script>`
答案 1 :(得分：0)
当然可以。
首先，您需要确定哪些用户事件触发了自动提取代码。您有很多选择，包括：
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
<强> 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）我不得不猜测你的身份证号码。根据需要进行修改。
答案 2 :(得分：0)
Please check the the image for better understanding
我想通过输入名为introducerID的他/她的id键自动填写一个字段介绍人名称。其余的表单字段保留为手动输入。
