I have a problem with js issue in laravel. Here is my code.
Controller:
CollectionController :
public function create(Request $request)
{
$collections = new Collections() ;
$collections->collectionNo = dechex(uniqid());
$collections->campus = $request->campus ;
$collections->groups = $request->group ;
$collections->class = $request->class ;
$collections->section = $request->section ;
$collections->studentId = $request->studentId ;
$collections->studentName = $request->studentName ;
$collections->studentRoll = $request->studentRoll ;
$collections->feesCode = $request->feesCode ;
$collections->feesAmount = $request->feesAmount ;
$collections->noOfMonth = $request->no_of_month ;
$collections->paidAmount = $request->paidAmount ;
$collections->discountAmount = $request->lessAmount ;
$collections->totalFeesAmount = $request->totalFeesAmount ;
$collections->dueAmount = $request->dueAmount ;
if($request->paidAmount > $request->totalFeesAmount){
$collections->returnAmount = $request->paidAMount - $request->totalFeesAmount ;
}else{
$collections->returnAmount = 0 ;
}
$collections->remarks = $request->remarks ;
if($request->addCollection){
$collections->save();
echo 'Fee collected successfully';
}else{
$data['collections'] = Collections::all();
$data['campuses'] = CommonController::getCampus() ;
$data['classes'] = CommonController::getClass() ;
$data['sections'] = CommonController::getSection() ;
$data['groups'] = CommonController::getGroup() ;
$data['fees'] = CommonController::getFee() ;
$data['transport'] = CommonController::getTransport() ;
return view('collections/addCollection')->with($data);
}
}
View:
@extends('layouts.app')
@section('content')
<div class="card">
<form id="searchById" class="form">
<div class="col-sm-12">
<div class="col-sm-6">
<label>Student ID</label>
<input id="studentId" class="form-control" name="id" value=""/>
</div>
</div>
<div id="collectionStudentInfo" class="col-sm-12">
<div class="col-sm-3">
<label>Campus</label>
<input id="collectionCampus" class="form-control" name="campus" value="" placeholder="Campus"/>
</div>
<div class="col-sm-3">
<label>Class</label>
<input id="collectionClass" class="form-control" name="class" value="" placeholder="Class"/>
</div>
<div class="col-sm-3">
<label>Group</label>
<input id="collectionGroup" class="form-control" name="group" value="" placeholder="Group"/>
</div>
<div class="col-sm-3">
<label>Section</label>
<input id="collectionSection" class="form-control" name="section" value="" placeholder="Section"/>
</div>
<div class="col-sm-4">
<label>Student Name</label>
<input id="collectionStudentName" class="form-control" name="name" value="" placeholder="Name"/>
</div>
<div class="col-sm-4">
<label>Roll No.</label>
<input id="collectionStudentRoll" class="form-control" name="roll" value="" placeholder="Roll No"/>
</div>
<div class="col-sm-4">
<label>SMS No.</label>
<input id="collectionStudentContact" class="form-control" name="contact" value="" placeholder="SMS No."/>
</div>
</form>
{{-- end --}}
<div class="card-header">Add Fee Collection</div>
<div class="card-body">
<form class="addledger form-horizontal" method="post" action="{{ url('/collection/create')}}">
@php
if(Session::has('message')){
$msg = "Fee Collection record Successfully" ;
echo '<p class="alert alert-success">'.$msg.'</p>' ;
}
elseif (Session::has('error')) {
$error = "Something Went Wrong. Operation unsuccessful" ;
echo '<p class="alert alert-danger">'.Session::has('error').'</p>' ;
}
@endphp
{{ csrf_field() }}
<div class="col-sm-12">
<div class="col-sm-6">
<label>Student ID</label>
<input id="studentId" class="form-control" name="id" value="" autocomplete="off"/>
</div>
</div>
<div id="collectionStudentInfo" class="col-sm-12">
<div class="col-sm-3">
<label>Campus</label>
<input id="collectionCampus" class="form-control" name="campus" value="" placeholder="Campus"/>
</div>
<div class="col-sm-3">
<label>Class</label>
<input id="collectionClass" class="form-control" name="class" value="" placeholder="Class"/>
</div>
<div class="col-sm-3">
<label>Group</label>
<input id="collectionGroup" class="form-control" name="group" value="" placeholder="Group"/>
</div>
<div class="col-sm-3">
<label>Section</label>
<input id="collectionSection" class="form-control" name="section" value="" placeholder="Section"/>
</div>
<div class="col-sm-4">
<label>Student Name</label>
<input id="collectionStudentName" class="form-control" name="name" value="" placeholder="Name"/>
</div>
<div class="col-sm-4">
<label>Roll No.</label>
<input id="collectionStudentRoll" class="form-control" name="roll" value="" placeholder="Roll No"/>
</div>
<div class="col-sm-4">
<label>SMS No.</label>
<input id="collectionStudentContact" class="form-control" name="contact" value="" placeholder="SMS No."/>
</div>
</div>
<div class="form-group col-sm-12 col-md-12">
<div class="col-sm-12 col-md-6">
<label>Fee List</label>
<table class="table table-responsive table-bordered">
<thead>
<tr>
<th>Sel</th>
<th>Sl</th>
<th>Fees Name</th>
<th>Amount</th>
</tr>
</thead>
<tbody class="feeByStudent feetable">
</tbody>
</table>
</div>
<div class="col-sm-12 col-md-4">
<input type="text" id="feesAmount" name="feesAmount" placeholder="Enter Fee Amount" class="form-control">
</div>
</div>
<div class="form-group col-sm-12 col-md-12">
<div class="col-sm-12 col-md-2">
<input type="text" id="feesMonthNo" name="no_of_month" placeholder="Enter Fee Month No." class="form-control" value="">
</div>
<div class="col-sm-12 col-md-3">
<input type="text" id="totalFeeAmount" name="totalFeesAmount" placeholder="Enter Fee Amount" class="form-control">
</div>
<div class="col-sm-12 col-md-2">
<input type="text" id="lessAmount" name="lessAmount" placeholder="Enter Less/Discount Amount" class="form-control">
</div>
<div class="col-sm-12 col-md-3">
<input type="text" id="paidAmount" name="paidAmount" placeholder="Enter Fee Paid Amount" class="form-control">
</div>
<div class="col-sm-12 col-md-2">
<input type="text" id="dueAmount" name="dueAmount" placeholder="Enter Due Fee Amount" class="form-control">
</div>
</div>
<div class="form-group col-sm-12 col-md-12">
<div class="col-sm-12 col-md-12">
<input type="text" id="remarks" name="remarks" placeholder="Enter Remarks" class="form-control">
</div>
</div>
<div class="form-group col-sm-12 col-md-12">
<div class="col-md-4">
<button type="submit" id="text1" class="btn btn-success" name="addCollection" value="Add">
<i class="fa fa-plus-circle"></i> Collect Fee
</button>
</div>
</div>
</form>
</div>
<div class="card-footer"></div>
</div>
<script>
$('#studentId').on('keyup',function () {
let id = $("#studentId").val() ;
console.log('ID is : ' + id) ;
$("#collectionStudentInfo").css("display", "block") ;
$.ajax({
url: '/getStudentById',
type: 'get',
dataType:'json',
contentType: 'json',
data: {studentId:id},
contentType: 'application/json; charset=utf-8',
success: function (html) {
$('#collectionStudentName').val(html.student[0].name);
$('#collectionStudentRoll').val(html.student[0].roll);
$('#collectionCampus').val(html.student[0].campus);
$('#collectionClass').val(html.student[0].class);
$('#collectionGroup').val(html.student[0].group);
$('#collectionSection').val(html.student[0].section);
$('#collectionStudentContact').val(html.student[0].contactNo);
let feetable = '';
for(i in html.fee){
feetable += '<tr>';
feetable += '<td class="feesCode"><input type="checkbox" id="feesCode" data-feesCode="'+html.fee[i].fees_code+'" name="feesCode[]" value="'+html.fee[i].feeAmount+'"/></td>' ;
feetable += '<td>'+html.fee[i].fees_code+'</td>' ;
feetable += '<td>'+html.fee[i].feesName+'</td>' ;
feetable += '<td>'+html.fee[i].feeAmount+'</td>';
feetable += '</tr>' ;
}
$('.feetable').html(feetable);
},
fail : function fail(){
console.log('Operation fail');
}
});
});
$(".schoolfee").click(function(e) {
let myArray = 0 ;
$(":checkbox:checked").each(function() {
myArray = parseInt(myArray) + parseInt(this.value);
});
$('#feesAmount').val(myArray);
});
$("input[type=button][name='feesCode[]']").on('click',function () {
let id = 0 ;
id = $("input[type=checkbox][name='feesCode[]']").val() ;
console.log(id);
$.ajax({
url: '/getFeeById',
type: 'get',
dataType:'json',
contentType: 'json',
data: {feeId:id},
contentType: 'application/json; charset=utf-8',
success: function (html) {
console.log(html);
$('#feesAmount').val(html[0].amount);
$('#dueAmount').val(html[0].dueAmount);
},
fail : function fail(){
console.log('Operation fail');
}
});
</script>
@endsection
When I input student ID in input box, the fee table appears by using jquery keyup event. But the problem is that no jquery worked when I clicked on the table. In my code js part $("input[type=button][name='feesCode[]']").on('click',function () does not work. Why this problem occurred and how can I fix it?
Here is the screenshot of the fee table
In the picture when I click on the checkbox, no event is triggered.
Here is the console.log screenshot
