如何在没有任何提交按钮的情况下动态显示基于下拉菜单中所选年份的记录

Question

I am working on PHP code-igniter.

My view code goes like below:

<form method="post" action="">  
    <div class="col-md-4 col-sm-4 ">
        <div class="form-group">                            
            <label class="h5" for="Mode"><b>See year wise commitments</b></label>
            <select class="form-control" name="Year" id="Year"  onchange="this.form.submit()">
                <option value="">Select Year</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
            </select>
        </div>
    </div>
</form>

Just by selecting any year from dropdown, I have to pass the selected year to my controller and inturn to model and get the query results based on the selected year.

In my controller I am receiving the posted value like:

$selectedYear = $this->input->post('Year');

And before selecting any dropdown value the records in my view has to be of Current year.

My ajax code is

$( "#year" ).change(function() {
    year = $(this).val();
    $.ajax({
          url : "controllerfilename/controllername",
          data : {"year": year},
          type : "post",
          success: function(data){
             console.log(data);
          }
   });

});

Answer 1

You can make an ajax call to your controller on change function of dropdown

    $( "#year" ).change(function() {
        year = $(this).val();
        $.ajax({
              url : "controller url",
              data : {"year": year},
              type : "post",
              success: function(data){
                 console.log(data);
              }
       });
   });

Answer 2

You defined id as id="Year" but in the ajax you call it like $( "#year" ).change(function() { . Means In ajax its year and in view its Year (uppercase).

Try this code:

$("#Year").change(function() {
year = $(this).val();
$.ajax({
      url : "<?php echo base_url('controllerfilename/controllername') ?>",
      data : {"year": year},
      type : "post",
      success: function(data){
         console.log(data);
      }
});
});