I am using Yii2 basic. I have a html code as below.
<button type="button" class="btn btn-info" onclick="myFunction()">
<span class="glyphicon glyphicon-search"></span> Monthly Saving Data</button>
<div id="myDIV">
<div class="shadow">
<div class="container">
<div class="row">
<div class="col-sm-2">
<label for="year">Year</label>
<input type="text" class="form-control" id="year" placeholder="Enter Year">
</div>
<div class="col-sm-2">
<label for="month">Month</label>
<select class="form-control" id="month">
<option value="" selected disabled>Select Month</option>
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
</div>
<div class="col-sm-2">
<label for="group">Group</label>
<?php
$shgname = Groupdetails::findOne($model->GroupId);
echo "<select class='form-control' id='group' readonly='true'>
<option value=".$model->GroupId.">".$shgname->GroupName."</option></select>";
//echo "<input type='text' class='form-control' id='group' readonly ='true' //value=".$model->GroupId.">".$shgname->GroupName."</input>";
?>
</div>
<div class="col-sm-1">
<br>
<button type="button" class="btn btn-primary" id="search" ><span class="glyphicon glyphicon-search"></span> Search</button>
</div>
<div class="col-sm-1">
<br>
<button type="button" class="btn btn" id="reset">Reset</button>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-2">
<h4>Total Saving</h4>
</div>
<div class="col-sm-2">
<h4><label id="totalsaving"></h4>
</div>
<div class="col-sm-2">
<h4>Cash In Hand</h4>
</div>
<div class="col-sm-1">
<h4><label id="cashinhand"></h4>
</div>
<div class="col-sm-3">
<h4>Total Value of Loan Given</h4>
</div>
<div class="col-sm-2">
<h4><label id="totalvalueofloangiven"></h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h4>Loan Recovery</h4>
</div>
<div class="col-sm-2">
<h4><label id="loanrecovery"></h4>
</div>
<div class="col-sm-2">
<h4>Cash In Bank</h4>
</div>
<div class="col-sm-1">
<h4><label id="cashinbank"></h4>
</div>
<div class="col-sm-3">
<h4>Loan Repaid till Now</h4>
</div>
<div class="col-sm-2">
<h4><label id="loanrepaiduptilnow"></h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h4>Loan Interest</h4>
</div>
<div class="col-sm-2">
<h4><label id="loaninterest"></h4>
</div>
<div class="col-sm-2">
<h4></h4>
</div>
<div class="col-sm-1">
<h4></h4>
</div>
<div class="col-sm-3">
<h4>Loan Outstanding</h4>
</div>
<div class="col-sm-2">
<h4><label id="totalvalueofloanoutstanding"></h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h4>Fine</h4>
</div>
<div class="col-sm-2">
<h4><label id="fine"></h4>
</div>
<div class="col-sm-2">
<h4>Closing Balance</h4>
</div>
<div class="col-sm-2">
<h4><label id="closingbalance"></h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h4>Bank Interest</h4>
</div>
<div class="col-sm-2">
<h4><label id="bankinterest"></h4>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-2">
<h4>Expenses</h4>
</div>
<div class="col-sm-2">
<h4><label id="expenses"></h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h4>Loan Given</h4>
</div>
<div class="col-sm-2">
<h4><label id="loangiven"></h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h4>Bank Loan</h4>
</div>
<div class="col-sm-2">
<h4><label id="bankloan"></h4>
</div>
</div>
</div>
</div>
Below is the JS code.
$(document).ready(function () {
$('#search').on('click', function () {
var year1=$('#year').val();
var month1=$('#month').val();
var id=$('#group').val();
$.ajax({
url: "index.php?r=groupdetails/display&year="+year1+"&month="+month1+"&id="+id,
method: "GET",
dataType: "json",
success: function(data) {
$('#totalsaving').html(data[0].TotalSaving);
if(data[0].LoanRecovery!=0)
{
$('#loanrecovery').html("<span class='label label-default'>"+data[0].LoanRecovery);
}
else if(data[0].LoanRecovery==0)
{
$('#loanrecovery').html(data[0].LoanRecovery);
}
$('#loaninterest').html(data[0].LoanInterest);
$('#fine').html(data[0].Fine);
$('#bankinterest').html(data[0].BankInterest);
$('#expenses').html(data[0].Expenses);
if(data[0].LoanGiven!=0)
{
$('#loangiven').html("<span class='label label-primary'>"+data[0].LoanGiven);
}
else if(data[0].LoanGiven==0)
{
$('#loangiven').html(data[0].LoanGiven);
}
$('#bankloan').html(data[0].BankLoan);
$('#cashinhand').html(data[0].CashInHand);
$('#cashinbank').html(data[0].CashInBank);
$('#closingbalance').html("<span class='label label-success'>"+data[0].ClosingBalance);
if(data[0].TotalValueofLoanGiven!=0)
{
$('#totalvalueofloangiven').html("<span class='label label-primary'>"+data[0].TotalValueofLoanGiven);
}
else if(data[0].TotalValueofLoanGiven==0)
{
$('#totalvalueofloangiven').html(data[0].TotalValueofLoanGiven);
}
if(data[0].LoanRepaidUptilNow!=0)
{
$('#loanrepaiduptilnow').html("<span class='label label-default'>"+data[0].LoanRepaidUptilNow);
}
else if(data[0].LoanRepaidUptilNow==0)
{
$('#loanrepaiduptilnow').html(data[0].LoanRepaidUptilNow);
}
if(data[0].TotalValueOfLoanOutstanding!=0)
{
$('#totalvalueofloanoutstanding').html("<span class='label label-danger'>"+data[0].TotalValueOfLoanOutstanding);
}
else if(data[0].TotalValueOfLoanOutstanding==0)
{
$('#totalvalueofloanoutstanding').html(data[0].TotalValueOfLoanOutstanding);
}
}});
});
});
Here the problem is first time when the user does not enter year, month and click on search button, then undefined is displayed for some fields. When I enter Year as 2017 and month as August then the data for this year and this month is displayed as there is record for this data in database. Now when the user enters year as 2017 and month as December for which there is no data in database, then still data from august month is displayed for some fields and undefined for some fields. How should I resolve it.