У меня есть одна страница с двумя формами: - первая форма (основная информация об услугах), эта форма включает в себя поле выбора, включающее основную группу услуг (родитель) - вторая форма содержит сведения об услугах, например, кто получил услуги нескольких линий и подуслуги (дочерние), связанные с основной группой услуг (родитель)
Через jquery Я могу выбрать основную группу услуг из раскрывающегося списка, при изменении, подуслуга раскрывающийся список будет управляться на основе функции ajax, что хорошо до сих пор.
моя проблема, когда я нажимаю добавить дополнительные строки, раскрывающийся список дочерней подсистемы не будет обновляться, пока я не добавлю больше строк и затем измените родительскую основную группу услуг.
введите описание изображения здесь моя проблема, которая
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Register New Service</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="../theme/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../theme/dist/css/adminlte.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<?php
require('./include/config.php');
//if($_SERVER['REQUEST_METHOD']=='POST'){
//require('./process/process-service-register.php');
//}
include('./include/navbar.php');
include('./include/sidebar.php');
?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Register New Service to Beneficiaries</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Starter Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Register New Service</h3>
</div>
</div>
<!--Date entry fields-->
<form role="form" id="ajaxForm" action="process/process-service-register.php" method="post" enctype="multipart/form-data" onsubmit="return check();">
<div class="card-body">
<div class="card card-info">
<div class="card-header"><h3 class="card-title">Service General Info</h3></div>
<div class="card-body">
<div id="status"> <?php $regSerId=""; if(isset($status)) echo $status; ?></div>
<p id="status"></p>
<input class="form-control" type="text" id="hiddenId" name="hiddenId" value="<?php echo mysqli_insert_id($dbcon);?>">
<div class="row">
<div class="col-md-4">
<label for="serDate">Date of Service</label>
<input id="serDate" name="serDate" class="form-control" type="date" required
value="<?php if(isset($_POST['serDate'])) echo $_POST['serDate'];?>">
</div>
<div class="col-md-4">
<label for="projectId">Project</label>
<select id="projectId" name="projectId" class="form-control select2">
<option value="Select" selected disabled>Select...</option>
<?php
$query_projectId="SELECT project_id, projectAbb FROM tblproject ORDER BY projectAbb ASC";
$result_projectId=mysqli_query($dbcon,$query_projectId);
while($rows=mysqli_fetch_assoc($result_projectId)){
$projectAbb=$rows['projectAbb'];
$project_id=$rows['project_id'];
echo "<option value=".$project_id.">".$projectAbb."</option>";
}
?>
</select>
</div>
<div class="col-md-4">
<label for="serviceType">Service Type</label>
<select id="serviceType" name="serviceType" class="form-control select2">
<option value="Select" selected disabled>Select...</option>
<?php
$_POST['serviceType']="";
$query_serType="SELECT serType_id, serName FROM tblservicetypes ORDER BY serType_id ASC";
$result_serType=mysqli_query($dbcon,$query_serType);
while($rows=mysqli_fetch_assoc($result_serType)){
$serType_id=$rows['serType_id'];
$serName=$rows['serName'];
echo '<option value="'.$serType_id.'"';
if($serType_id==$_POST['serviceType']) echo 'SELECTED';
echo '>'.$serName.'</option>';
//echo "<option value='$serType_id'>$serName</option>";
}
?>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<br><label for="details">Detalis</label>
<input id="details" name="details" type="text" class="form-control" required
placeholder="Enter details" value="<?php if(isset($_POST['details'])) echo $_POST['details'];?>">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="org_name">Organization</label>
<select class="form-control select2" id="org_name" name="org_name" required>
<option value="Select" selected disabled>Select...</option>
<?php
$query_orgName="SELECT org_id, org_name FROM tblorganizations ORDER BY org_name ASC";
$result_orgName=mysqli_query($dbcon,$query_orgName);
while($rows=mysqli_fetch_assoc($result_orgName)){
$orgName=$rows['org_name'];
$org_id=$rows['org_id'];
echo "<option value=".$org_id.">".$orgName."</option>";
}
?>
</select>
</div>
<div class="col-md-6">
<label for="regBy">User</label>
<select class="form-control select2" id="regBy" name="regBy" required>
<option value="Select" selected disabled>Select...</option>
<?php
$query_regBy="SELECT user_id, CONCAT(first_name,' ',last_name) AS username FROM users";
$result_regBy=mysqli_query($dbcon,$query_regBy);
while($rows=mysqli_fetch_assoc($result_regBy)){
$regBy=$rows['username'];
$user_id=$rows['user_id'];
echo "<option value=".$user_id.">".$regBy."</option>";
}
?>
</select>
</div>
</div>
<br><input type="submit" id="add_service" name="add_service" class="btn btn-primary" onclick="return fAddService()" value="Add Service" />
<a href="register-service.php" class="btn btn-primary">Add New Service</a>
</form>
</div>
</div>
<form role="form" method="POST" action="register-service.php" onsubmit="return check();">
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Service Details</h3></div>
<div class="card-body">
<div id="dynamic_form" class="row">
<table class="table table-bordered" id="dynamic_field" name="dynamic_field">
<thead>
<td>Service ID</td>
<td>Client Name</td>
<td>Service type</td>
<td>Service count</td>
<td>Details</td>
<td></td>
</thead>
<tbody id="dynamic_field">
<tr>
<td><input id="subSerID" name="subSerID[]" type="text" class="form-control" required
placeholder="Auto" readonly value="<?php echo $regSerId;?>"></td>
<td><input id="clientName" disabled name="clientName[]" type="text" class="form-control" required
placeholder="Enter client name" value="<?php if(isset($_POST['clientName'])) echo $_POST['clientName'];?>"></td>
<td><select id="subSerType" disabled name="subSerType" class="form-control">
<option value="Select" selected disabled>Select...</option>
</select></td>
<td><input id="serCount" disabled name="familyName[]" type="text" class="form-control" required
placeholder="Enter service count" value="<?php if(isset($_POST['serCount'])) echo $_POST['serCount'];?>"></td>
<td><input id="subSerDetails" disabled name="familyName[]" type="text" class="form-control" required
placeholder="Enter details" value="<?php if(isset($_POST['subSerDetails'])) echo $_POST['subSerDetails'];?>"></td>
<td><input type="button" id="add_more" name="add_more" class="btn btn-success" value="Add more"></td>
</tr>
</tbody>
</table>
</div>
<br><input type="submit" name="submitSubService" class="btn btn-primary" value="Submit sub services">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
<br>
</div>
<!-- /.content-wrapper -->
<!-- Page script -->
<script>
$(document).ready(function () {
//Initialize Select2 Elements
$('.org_name').select2;
});
<!--add more fields test -->
<!--End add more fields test -->
<!--add more fields-->
$(document).ready(function(){
const htmlForm ='<tr><td><input readonly name="subSerID[]" type="text" class="childsubSerID form-control" required placeholder="Auto" value=""></td><td><input name="clientName[]" disabled type="text" class="childclientName form-control" required placeholder="Enter client name" value=""></td><td><select id="childsubSerType" disabled name="childsubSerType[]" class="childsubSerType form-control"><option value="Select" selected disabled>Select...</option></select></td><td><input name="serCount[]" disabled type="text" class="childserCount form-control" required placeholder="Enter service count" value=""></td><td><input name="subSerDetails[]" disabled type="text" class="childsubSerDetails form-control" required placeholder="Enter details" value=""></td><td><button class="btn btn-danger btn_remove" value="X">X</td></tr>';
$(function(){
const maxRecords=30;
const $tb= $('#dynamic_field');
$('#add_more').click(function(){
if($tb.find("tr").length<maxRecords){
$tb.append(htmlForm);
$(".childclientName").attr("disabled", false);
$(".childsubSerType").attr("disabled", false);
$(".childserCount").attr("disabled", false);
$(".childsubSerDetails").attr("disabled", false);
}
$.ajax({
url:"./process/fetch_subservices.php",
method:"GET",
data:{serType_id:serviceType_id},
dataType:"text",
success:function(data)
{
$('.childsubSerType').html(data);
alert(data);
}
});
});
$(document).on('click','.btn_remove', function(){
this.closest("tr").remove();
});
//$tb.on('change','.childclientName', function(){
//const $parentRow=$(this).closest("tr");
//$parentRow.find('#childsubSerID').val($parentRow.find('#subSerID').val());
//});
});
/*
var maxRecords= 30;
var i=1;
var htmlForm='<tr id="row'+i+'"><td><input id="childsubSerID" disabled name="subSerID[]" type="text" class="form-control" required placeholder="Auto" value=""></td><td><input id="childclientName" disabled name="clientName[]" type="text" class="form-control" required placeholder="Enter client name" value=""></td><td><input id="childsubSerType" disabled name="subSerType[]" type="text" class="form-control" required placeholder="Enter grand name" value=""></td><td><input id="childserCount" disabled name="serCount[]" type="text" class="form-control" required placeholder="Enter service count" value=""></td><td><input id="childsubSerDetails" disabled name="subSerDetails[]" type="text" class="form-control" required placeholder="Enter details" value=""></td><td><button id="'+i+'" name="remove" class="btn btn-danger btn_remove" value="X">X</td></tr>';
$('#add_more').click(function(){
if(i<=maxRecords){
i++;
$('#dynamic_field').append(htmlForm);
}
});
$(document).on('click','.btn_remove', function(){
var button_id=$(this).attr("id");
$('#row'+button_id+'').remove();
i--;
})
*/
<!--Copy id Value-->
$("#dynamic_form").on('change','#subSerType', function(){
$("#subSerID").val( $('#hiddenId').val() );
});
//$("#dynamic_form").on('click','#childsubSerID', function(){
//$(this).val( $('#subSerID').val() );
// });
$("#dynamic_field").on('change','.childsubSerType', function(){
$('.childsubSerID').val( $('#subSerID').val() );
});
<!-- Clear data on back-->
});
</script>
<!-- Dependent Sub Service Type dropdown list-->
<script>
$(document).ready(function(){
$('#serviceType').change(function(){
var serviceType_id=$(this).val();
$.ajax({
url:"./process/fetch_subservices.php",
method:"POST",
data:{serType_id:serviceType_id},
dataType:"text",
success:function(data)
{
$('#subSerType').html(data);
$('.childsubSerType').html(data);
}
});
});
});
</script>
<!-- insert without refresh-->
<script>
$(document).ready(function(){
$("#ajaxForm").submit(function(event){
var postdata=$("#ajaxForm").serialize();
$.post("./process/process-service-register.php",postdata, function(response){
var successMsg='<div class="col-md-12"><div class="alert alert-success alert dismissible"><h5><i class="icon fas fa-check"></i>Recored Added!</h5><h3>New Service with ID: response mysqli_insert_id($dbcon)." - ".$serviceType, Added. </h3><p></div></div>';
$("#status").show().html(successMsg);
$("#add_service").attr("disabled", true);
$("#hiddenId").val(response);
$("#clientName").attr("disabled", false);
$("#subSerType").attr("disabled", false);
$("#serCount").attr("disabled", false);
$("#subSerDetails").attr("disabled", false);
});
return false;
})
});
</script>
<?php include('./include/settingsbar.php');
include('footer.php');
?>
</body>
</html>