How to display data based on user data using ajax in Yii2

Hi,
I am using Yii2 basic application template. I have a view where there is code as below.

<p>
<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">
		<br>
			<div class="container">
             <form class="form-horizontal">
			   <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>Opening Balance <input type="text" class="form-control" id="openingbalance" readonly="true"></h4>
	</div>
	<div class="col-sm-2">
	<h4>Total Saving<input type="text" class="form-control" id="totalsaving" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-2">
	<h4>Loan Recovery<input type="text" class="form-control" id="loanrecovery" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-2">
	<h4>Loan Interest<input type="text" class="form-control" id="loaninterest" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-2">
	<h4>Fine<input type="text" class="form-control" id="fine" readonly="true"><span class="label label-default"></span></h4>
	</div>
	</div>
	<div class="row">
	<div class="col-sm-2">
	<h4>Bank Interest<input type="text" class="form-control" id="bankinterest" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-2">
	<h4>Expenses<input type="text" class="form-control" id="expenses" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-2">
	<h4>Loan Given<input type="text" class="form-control" id="loangiven" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-2">
	<h4>Bank Loan<input type="text" class="form-control" id="bankloan" readonly="true"><span class="label label-default"></span></h4>
	</div>
	</div>
	<div class="row">
	<div class="col-sm-2">
	<h4>Cash In Hand<input type="text" class="form-control" id="cashinhand" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-2">
	<h4>Cash In Bank<input type="text" class="form-control" id="cashinbank" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-2">
	<h4>Closing Balance<input type="text" class="form-control" id="closingbalance" readonly="true"><span class="label label-default"></span></h4>
	</div>
	</div>
	<br><br>
	<div class="row">
	<div class="col-sm-3">
	<h4>Total Value of Loan Given<input type="text" class="form-control" id="totalvalueofloangiven" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-3">
	<h4>Loan Repaid Uptil Now<input type="text" class="form-control" id="loanrepaiduptilnow" readonly="true"><span class="label label-default"></span></h4>
	</div>
	<div class="col-sm-4">
	<h4>Total Value of Loan Outstanding<input type="text" class="form-control" id="totalvalueofloanoutstanding" readonly="true"><span class="label label-default"></span></h4>
	</div>



	</form>
				</br>
				</div>
		</div>
		</p>

and there is js file in web/js/ which is as below

$(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) {

			
			
			  $('#openingbalance').val(data[0].OpeningBalance);
			     $('#totalsaving').val(data[0].TotalSaving);
			$('#loanrecovery').val(data[0].LoanRecovery);
			$('#loaninterest').val(data[0].LoanInterest);
			$('#fine').val(data[0].Fine);

			$('#bankinterest').val(data[0].BankInterest);
			$('#expenses').val(data[0].Expenses);
			$('#loangiven').val(data[0].LoanGiven);

			$('#bankloan').val(data[0].BankLoan);
			$('#cashinhand').val(data[0].CashInHand);
			$('#cashinbank').val(data[0].CashInBank);
			$('#closingbalance').val(data[0].ClosingBalance);
			
			$('#totalvalueofloangiven').val(data[0].TotalValueofLoanGiven);
			$('#loanrepaiduptilnow').val(data[0].LoanRepaidUptilNow);
			$('#totalvalueofloanoutstanding').val(data[0].TotalValueOfLoanOutstanding);
			
			



		}});

		    });

		$('#reset').on('click', function () {
            $('#year').val("");
			$('#month').val("");
			$('#openingbalance').val("");
			$('#totalsaving').val("");
			$('#loanrecovery').val("");
			$('#loaninterest').val("");
			$('#fine').val("");
			$('#bankinterest').val("");
			$('#expenses').val("");
			$('#loangiven').val("");
			$('#bankloan').val("");
						$('#cashinhand').val("");
						$('#cashinbank').val("");
						$('#closingbalance').val("");
						$('#totalvalueofloangiven').val("");
						$('#loanrepaiduptilnow').val("");
						$('#totalvalueofloanoutstanding').val("");
			
			
			
        });
        
   
});

In view file, I have included

<link href="js/monthlysaving1.js">

But on button click it does not display the data on the textboxes. What should I do?

Hi @SoftwareAccount;

Check console navigator on tab network and view response data sended from server