oninput event is not working in Rails form - ruby

Question

I want to add oninput event in rails form using ajax call.I added it but its not working.I also want when input field will get the data the form will submit and result will come in the same page without reloading the page.I am explaining my code below.
homes/home.html.erb
<%= form_for :sdf ,:url => {:action => "scan_report" },remote: true do |f| %>
<% if params[:receipt_no] %>
<div class="input-group bmargindiv1 col-md-12"> <span class="input-group-addon text-left">Receipt No. Scan :</span>
<%= f.text_field :Receipt_No,:class => "form-control", :value => params[:receipt_no],oninput => "this.form.submit();" %>
</div>
<% else %>
<div class="input-group bmargindiv1 col-md-12"> <span class="input-group-addon text-left">Receipt No. Scan :</span>
<%= f.text_field :Receipt_No,:class => "form-control",placeholder:"Receipt No. scan" %>
</div>
<% end %>
<% end %>
The above input field will get value when user will click on view action of table which is given below.
reports/view_report.html.erb
<div class="block-content">
<div class="table-responsive">
<table class="table table-bordered">
<colgroup>
<col class="col-md-1 col-sm-1">
<col class="col-md-2 col-sm-2">
<col class="col-md-3 col-sm-3">
<col class="col-md-3 col-sm-3">
<col class="col-md-1 col-sm-1">
<col class="col-md-1 col-sm-1">
<col class="col-md-1 col-sm-1">
</colgroup>
<thead>
<tr>
<th class="text-center">Sl. No</th>
<th class="text-center">Receipt Number</th>
<th class="text-center">Date</th>
<th class="text-center">Deceased Name</th>
<th class="text-center">Deceased Adress</th>
<th class="text-center">Doner Name</th>
<th class="text-center">Doner Adress</th>
<th class="text-center">Doner Mobile No</th>
<th class="text-center">Doner's Relationship</th>
<th class="text-center">Donation Amount</th>
<th class="text-center">Date of death</th>
<th class="text-center">HCSY Status</th>
<th class="text-center">Deceased photo</th>
<th class="text-center">Doner photo</th>
<th class="text-center">Brahmin</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<% #sdf.each do |sdf| %>
<tr>
<td class="text-center"><%= sdf.Sdp_Id %></td>
<td class="text-center"><%= sdf.Receipt_No %></td>
<td class="text-center"><%= sdf.Created_On %></td>
<td class="text-center"><%= sdf.Deceased_Name %></td>
<td class="text-center"><%= sdf.Deceased_Address1 %></td>
<td class="text-center"><%= sdf.Doner_Name %></td>
<td class="text-center"><%= sdf.Doner_Address1 %></td>
<td class="text-center"><%= sdf.Doner_MobileNo %></td>
<td class="text-center"><%= sdf.Doner_Relationship_Other %></td>
<td class="text-center"><%= sdf.Donation_Amount %></td>
<td class="text-center"><%= sdf.Date_Of_Death %></td>
<td class="text-center"><%= sdf.HCSY_Status %></td>
<td class="text-center"><%= image_tag(sdf.Photo,:width => 50,:height => 50) %></td>
<td class="text-center"><%= image_tag(sdf.Doner_Photo,:width => 50,:height => 50) %></td>
<td class="text-center"><%= sdf.Brahmin %></td>
<td class="text-center">
<div class="btn-group">
<a href="/homes/home/?receipt_no=<%= sdf.Receipt_No %>" data-toggle="tooltip" title="" class="btn btn-xs btn-success" data-original-title="View">
<i class="fa fa-eye"></i>
</a>
</div>
</td>
</tr>
<% end %>
</tbody>
</table>
<%= will_paginate #sdf %>
</div>
</div>
My other files are given below.
controller/homes_controller.rb
class HomesController < ApplicationController
def home
#sdf=TSdf.new
respond_to do |format|
format.html
format.js
end
end
def scan_report
if #sdf=TSdf.find_by_Receipt_No(params[:sdf][:Receipt_No])
#hcsy=THcsy.find_by_Sdp_Id(#sdf.Sdp_Id)
#hcsy_deatils=THcsyDetails.find_by_HCSY_ID(#hcsy.id)
#woods=THcsyFundTypeMaster.find_by_Fund_Type_Code(1)
#burn=THcsyFundTypeMaster.find_by_Fund_Type_Code(2)
#good=THcsyFundTypeMaster.find_by_Fund_Type_Code(3)
#swd=THcsyFundTypeMaster.find_by_Fund_Type_Code(5)
#photo=THcsyFundTypeMaster.find_by_Fund_Type_Code(6)
flash[:notice]=" number matched"
else
splitted = params[:sdf][:Receipt_No].split('/')
receipt = splitted[0]
table_id = splitted[1]
#sdfs=TSdf.find_by_Receipt_No(receipt)
if #sdfs
#hcsys=THcsy.find_by_Sdp_Id(#sdfs.Sdp_Id)
#fund_details=THcsyFundTypeMaster.find_by_Fund_Type_Code(table_id)
else
flash[:notice]="Scan number not found"
end
end
end
end
scan_report.js.erb
$("#whole-div1").css("display", "block");
$("#whole-div").css("display", "block");
$("#whole-div3").css("display", "block");
$("#whole-div4").css("display", "block");
$("#whole-div5").css("display", "block");
$("#whole-div6").css("display", "block");
$("#whole-div8").css("display", "block");
$(".flash-message").html('<%= escape_javascript flash[:notice] %>');
$("#sdf-puri").html("<%= escape_javascript (render 'sdf_output_table' ) %>");
$("#sdf-puri").slideDown(350);
$("#hcsy-puri").html("<%= escape_javascript (render 'hcsy_output_table' ) %>");
$("#hcsy-puri").slideDown(350);
$("#good-puri").html("<%= escape_javascript (render 'goods' ) %>");
$("#good-puri").slideDown(350);
$("#swd-puri").html("<%= escape_javascript (render 'swd' ) %>");
$("#swd-puri").slideDown(350);
$("#burn-puri").html("<%= escape_javascript (render 'burning' ) %>");
$("#burn-puri").slideDown(350);
$("#wood-puri").html("<%= escape_javascript (render 'woods' ) %>");
$("#wood-puri").slideDown(350);
$("#photo-puri").html("<%= escape_javascript (render 'photo' ) %>");
$("#photo-puri").slideDown(350);
Please help me to add this type of feature and its very important that result should come the same page without reloading the page.