input value from ajax not sent to controller

Question

I have a form to filter query result. It's just filter based on date. Somehow, my input value is not sending to controller, but when I console log it, it shows the value as I expected.

My view :

<form action="" method="post" id="cashback">
User Email :
<input type="text" name="email" id="email">
<br><br>
Booking Date :
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; display:inline">
    <span></span> <b class="caret"></b>
</div>
<input type="hidden" name="input_date_from" id="input_date_from" value="">
<input type="hidden" name="input_date_to" id="input_date_to" value=""><br><br>
<button type="button" class="btn btn-primary" onclick="promotion()">View</button>
<br><br>
</form>
<script>
function promotion() {

email = $('#email').val();
input_date_from = $('#input_date_from').val();
input_date_to = $('#input_date_to').val();

$.ajax
    ({
        url : "<?php echo site_url('admin/check_promotion')?>",
        type: "POST",
        dataType: "text",
        data:{email: email, input_date_to: input_date_to, input_date_from: input_date_from},
        success: function(data)
        {
            console.log(email);
            console.log(input_date_from);
            console.log(input_date_to);
            window.location.href = "<?php echo site_url('admin/check_promotion')?>";
        }
    });
}
</script>

My controller :

public function check_promotion()
{
    if(!$this->user_permission->check_permission())return;

        $data['startDate'] = $this->input->post('input_date_from');
        $data['endDate'] = $this->input->post('input_date_to');
        $email = $this->input->post('email');

        $this->db->select('a.booking_id as booking_id, a.from_email as from_email, a.booking_date as booking_date, a.status as status, b.vendor_airway_bill as awb, b.tariff as tariff');
        $this->db->from('booking as a');
        $this->db->join('shipment as b','a.booking_id = b.booking_id','left');
        $this->db->where('booking_date >=', date('Y-m-d',strtotime($data['startDate'])));
        $this->db->where('booking_date <=', date('Y-m-d',strtotime($data['endDate'])));
        $this->db->where('from_email', $email);
        $this->db->where('status = 1');
        $this->db->or_where('status = 2');
        $this->db->limit('300');
        $query = $this->db->get();
        $data['result'] = $query->result_array();

        $this->template->render('admin/promotion',$data,'admin');
}

It gives me all the rows ignoring input email, input_range_to, and input_range_from. FYI, I am using jQuery daterangepicker. What did I do wrong?

Answer 1

you should avoid the default behavior of the click event of the button

1. you should return false in javascript function promotion as follow:

   <script>
   function promotion() {
   
     email = $('#email').val();
     input_date_from = $('#input_date_from').val();
     input_date_to = $('#input_date_to').val();
   
     $.ajax
     ({
       url : "<?php echo site_url('admin/check_promotion')?>",
       type: "POST",
       dataType: "text",
       data:{email: email, input_date_to: input_date_to, input_date_from: input_date_from},
       success: function(data){
         console.log(email);
         console.log(input_date_from);
         console.log(input_date_to);
         window.location.href = "<?php echo site_url('admin/check_promotion')?>";
       }
     });
     return false;
   }
   </script>
   

2. you should add a return before promotion function call as follow:

   <button type="button" class="btn btn-primary" onclick="return promotion()">View</button>
   

OR: you can try another solution as follow:

<form action="" method="post" id="cashback">
User Email :
<input type="text" name="email" id="email">
<br><br>
Booking Date :
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; display:inline">
  <span></span> <b class="caret"></b>
</div>
<input type="hidden" name="input_date_from" id="input_date_from" value="">
<input type="hidden" name="input_date_to" id="input_date_to" value=""><br><br>
<button type="button" id="btn-submit" class="btn btn-primary">View</button>
<br><br>
</form>
<script>
$('#btn-submit').click(function(e){
  e.preventDefault();

  email = $('#email').val();
  input_date_from = $('#input_date_from').val();
  input_date_to = $('#input_date_to').val();

  $.ajax({
    url : "<?php echo site_url('admin/check_promotion')?>",
    type: "POST",
    dataType: "text",
    data:{email: email, input_date_to: input_date_to, input_date_from: input_date_from},
    success: function(data)
    {
      console.log(email);
      console.log(input_date_from);
      console.log(input_date_to);
      window.location.href = "<?php echo site_url('admin/check_promotion')?>";
    }
  });
});
</script>