我想为我的社会应用程序创建一个计费系统，在这个系统中，我希望根据表格中的值来动态生成少量字段。意思是半数表格中我想要的数据很少生成另一个字段。
例如：当我选择用户名时，我会有用户类型，flatno，停车位值，现在我想要特别收费，如果用户类型是所有者/租户。
我的代码是：
<form class="form-horizontal" role="form" method="post" id="genbill">
<div class="form-group">
<label class="col-lg-3 control-label">Person Name:</label>
<div class="col-lg-8">
<select id="user_nm" name ="user_nm" class=" form-control"></select>
<input type="hidden" name="email" id="email" class="form-control" value="">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">User Type:</label>
<div class="col-lg-8">
<input type="text" name="role" id="role" class="form-control" value="">
<!-- <select id="flatno" name ="flatno" class=" form-control"></select> -->
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Flat No.:</label>
<div class="col-lg-8">
<input type="text" name="flatno" id="flatno" class="form-control" value="">
<!-- <select id="flatno" name ="flatno" class=" form-control"></select> -->
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">PAN No.:</label>
<div class="col-lg-8">
<input type="text" name="pan" id="pan" class="form-control" value="">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Parking Slot.:</label>
<div class="col-lg-8">
<input type="text" name="parking" id="parking" class="form-control" value="">
</div>
</div>
<div id="chargeField">
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Bill Due Date:</label>
<div class="col-lg-8" >
<select name="Duegroup" id="billdate"></select>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Bill Period:</label>
<div class="col-lg-8">
<select name="billgroup" id="daterange">
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Total:</label>
<div class="col-lg-8">
<input type="text" class="form-control" onfocus="findTotal()" name="total" id="total" value="" >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input class="btn btn-primary" value="Save" type="submit" name="Add">
<span></span>
<input class="btn btn-default" value="Cancel" type="reset">
</div>
</div>
</form>
填写usernm chnages的输入
$('#user_nm').on('change', function() {
//alert( this.value );
//var user_nm = document.getElementById('user_nm').value;
var user_nm = this.value;
var flat = document.getElementById('flatno');
var email = document.getElementById('email');
var pan = document.getElementById('pan');
var role = document.getElementById('role');
var park = document.getElementById('parking');
//alert('nm'+user_nm);
$.ajax({
type: "post",
url: "getFlatno.php",
dataType: "json",
data: { email: user_nm },
success: function(data) {
if (data.result == 1) {
flat.value = data.flat;
email.value = data.email;
pan.value = data.pan;
role.value = data.role;
park.value = data.parking;
} else {
alert('failure');
}
}
});
})
retrive charge field
$( "#parking" ).focusout(function() {
// alert( "Handler for .focus() called." );
var email = document.getElementById('email').value;
var role = document.getElementById('role').value;
var park = document.getElementById('parking').value;
alert(email);
alert(role);
alert(park);
$.ajax({
type: "post",
url: "getChargeAsperRole.php",
dataType: "json",
data:{
email:email,
role:role,
park:park
},
success: function(data) {
var html = "";
alert('success');
$.each(data, function(i, item) {
html = html + '<div class="form-group"><label class="col-lg-3 control-label">' + item.charge_title + ':</label><div class="col-lg-8"><input type="checkbox" name="charge_Arr[]" value= "' + item.charge_amt + '" class="checkValue" /><input class="form-control" id="field' + item.num + '" type="text" name="field' + item.num + '" value="' + item.charge_amt + '" readonly><input type="hidden" name="fieldid[]" id="fieldid' + item.num + '" class="form-control" value="' + item.Id + '"></div></div>';
});
$("#chargeField").html(html);
}
});
});
获取费用代码：
if($_SERVER['REQUEST_METHOD']=='POST'){
$email = $_POST['email'];
$role = $_POST['role'];
$parking = $_POST['park'] ;
echo $parking;
if($role!='' && $parking!='' && $parking!=0){
$sql = "SELECT c.charge_id,c.u_id,u.ID,u.role,b.charge_id,b.charge_title FROM `users` u ,`billing_charges` b ,`charge_applied` c where c.charge_id=b.charge_id and u.ID = c.u_id and u.role='$role' and parking_slot='$parking'";
echo "one==".$sql;
}elseif($role!='' && $parking=='' && $parking!=0){
$sql = "SELECT c.charge_id,c.u_id,u.ID,u.role,b.charge_id,b.charge_title FROM `users` u ,`billing_charges` b ,`charge_applied` c where c.charge_id=b.charge_id and u.ID = c.u_id and u.role='$role'";
echo "two==".$sql;
}elseif($role!='' && $parking=='' && $parking!=0){
$sql = "SELECT c.charge_id,c.u_id,u.ID,u.role,b.charge_id,b.charge_title FROM `users` u ,`billing_charges` b ,`charge_applied` c where c.charge_id=b.charge_id and u.ID = c.u_id and parking_slot='$parking'";
echo "thiree==".$sql;
}elseif($parking!='0'){
$sql = "SELECT c.charge_id,c.u_id,u.ID,u.role,b.charge_id,b.charge_title FROM `users` u ,`billing_charges` b ,`charge_applied` c where c.charge_id=b.charge_id and u.ID = c.u_id";
echo "four==".$sql;
}else{
echo "nkagg";
}
// $sql = "SELECT c.charge_id,c.u_id,u.ID,u.role,b.charge_id,b.charge_title FROM `users` u ,`billing_charges` b ,`charge_applied` c where c.charge_id=b.charge_id and u.ID = c.u_id";
$sql = "select * FROM `billing_charges`";
//echo $sql;
$arrVal = array();
$sqltran = mysqli_query($con,$sql )or die(mysqli_error($con));
$i=1;
while ($rowList = mysqli_fetch_array($sqltran)) {
$name = array(
'num' => $i,
'Id' => $rowList['charge_id'],
'charge_title'=> $rowList['charge_title'],
'charge_type'=> $rowList['charge_type'],
'charge_amt'=> $rowList['charge_amt'],
);
array_push($arrVal, $name);
$i++;
}
echo json_encode($arrVal);
mysqli_close($con);
}
答案 0 :(得分：0)
如果您需要根据输入A内容的更改来更改输入B上的内容，可以使用onchange Event
更改输入A以包含对javascript函数的调用，如下所示：
<input id="a" onchange="myFunction()">
在脚本部分实现myFunction（）来完成您的预期工作
<script>
function myFunction() {
var x = document.getElementById("a").value;
if(x=="Hello")
document.getElementById("b").value = "World";
}
</script>