Как передать переменную в JavaScript для PHP с AJAX

Question

Я пытаюсь передать выбранный месяц из списка выбора в HTML с помощью AJAX.Но каждый раз, когда я выбираю месяц, он не появляется.Перед тем, как выбрать месяц, появляется «ничто» из-за условного условия if else, затем, когда я выбираю месяц, слово «ничего» исчезает, но переменная не извлекается.Вот мой код JavaScript:

$('#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);
        }
    });
}

Вот HTML и 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>

Как мне правильно передать переменную в JavaScript, чтобы сохранить эту переменную в php?

РЕДАКТИРОВАТЬ: Я понял, что написал неправильно url, и я только что отредактировал url в JavaScript.Он успешно передает переменную, но страница становится двойной.Здесь я получил скриншот.Перед выбором месяца (обратите внимание на «Ничего»)

После выбора месяца (обратите внимание на «Это Февраль»)

Answer 1

РЕДАКТИРОВАННЫЙ ОТВЕТ

Когда вы нажимаете на кнопку, вы отправляете форму, чтобы вы перенаправились на ту же страницу.

Попробуйте это:

$('#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);
    }
}

И заменить:

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

По:

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

Вам не нужно совершать Ajax-вызов на той же странице, чтобы изменить содержимое вашего div.Просто переключитесь с «Ничего» на «Это» + выбранный месяц.

Вот фрагмент кода, чтобы показать вам: просто нажмите на кнопку, и содержимое изменится:

$('#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>