How to display records based on selected year from dropdown dynamically without any submit button

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);
      }
});
});