如何使用ajax将javascript中的变量传递给php

Question

I'm trying to pass the selected month from select list in html with ajax. But every time I select a month, it didn't appear. Before I select a month there's a "nothing" because of if else conditional, then when I select a month the "nothing" word dissapear but no variable fetched. Here's my javascript code:

$('#button-search-ohr').on('click', function() {
    var month = $('#monthChoose').val();

    if(month == 0) {
        alert('Month must be choosen!');
    }

    $.ajax({
        async   : true,
        type    : 'POST',
        url     : '<?php echo base_url();?>sms/lapkinerjastat', 
        data    : {month:month},
        success : function(data) {
            $('#month').html(data);
        }
    });
}

Here's the html and php

<h5 class="pilih-bulan">Month Choose
     <select id="monthChoose" name="month">
          <option value="0">Pilih bulan</option>
          <option value="Januari">Januari</option>
          <option value="Februari">Februari</option>
          <option value="Maret">Maret</option>
          <option value="April">April</option>
          <option value="Mei">Mei</option>
          <option value="Juni">Juni</option>
          <option value="Juli">Juli</option>
          <option value="Agustus">Agustus</option>
          <option value="September">September</option>
          <option value="Oktober">Oktober</option>
          <option value="November">November</option>
          <option value="Desember">Desember</option>
     </select>
     <button id="button-search-ohr" type="submit">Search</button>
</h5>    

<div id="month">
     <?php 
     if(isset($_POST['month'])) {
          $month = $_POST['month'];
          echo 'This is '.$month;
     }else {
          $month = null;
          echo 'Nothing';
     }?>
</div>

How do I do the proper way to passing variable in javascript to store that variable in php?

EDIT : I realized I wrote the wrong url and I've just edited the url in javascript. It successfully pass the variable but the page become double. Here I got the screenshot. Before select month (pay attention at "Nothing")

After select month (pay attention at "This is Februari")

Answer 1

EDITED ANSWER

When you click on your button you submit the form so you are redirected on same page.

Try this :

$('#button-search-ohr').on('click', function(e) { // Add the "e" in your function
    // You stop the submit
    e.preventDefault();
    e.stopPropagation();

    var month = $('#monthChoose').val();

    if(month == 0) {
        $('#month').html('Nothing');
         alert('Month must be choosen!');
    } else {
        $('#month').html('This is ' + month);
    }
}

And replace :

<div id="month">
     <?php 
     if(isset($_POST['month'])) {
          $month = $_POST['month'];
          echo 'This is '.$month;
     }else {
          $month = null;
          echo 'Nothing';
     }?>
</div>

By :

<div id="month">
    Nothing
</div>

You don't need to make an Ajax call to the same page to change the content of your div. Just switch from "Nothing" to the "This is " + the selected month.

Here is a snippet to show you : just click on your button and the content change :

 $('#button-search-ohr').on('click', function(e) { // Add the "e" in your function // You stop the submit e.preventDefault(); e.stopPropagation(); var month = $('#monthChoose').val(); if(month == 0) { $('#month').html('Nothing'); alert('Month must be choosen!'); } else { $('#month').html('This is ' + month); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h5 class="pilih-bulan">Month Choose <select id="monthChoose" name="month"> <option value="0">Pilih bulan</option> <option value="Januari">Januari</option> <option value="Februari">Februari</option> <option value="Maret">Maret</option> <option value="April">April</option> <option value="Mei">Mei</option> <option value="Juni">Juni</option> <option value="Juli">Juli</option> <option value="Agustus">Agustus</option> <option value="September">September</option> <option value="Oktober">Oktober</option> <option value="November">November</option> <option value="Desember">Desember</option> </select> <button id="button-search-ohr" type="submit">Search</button> </h5> <div id='month'> Nothing </div>