Для публикации результатов щелчка переключателя используйте Ajax

Question

Я пытаюсь создать сценарий, который отправляет результат щелчка переключателя с помощью Ajax.

Пока у меня есть:

<label>
    <input type="radio" name="DisableAd" value="0" id="RadioGroup1_0" />
    Radio
</label><br/>
<label>
    <input type="radio" name="DisableAd" value="0" id="RadioGroup1_1" />
    Radio
</label>

и:

$(document).ready(function() {
  $('.DisableAd').click(function() {
    event.preventDefault();

    var parameters = {
      'disAd': $('input[name="DisableAd"]').val(),
    };
    if (parameters == 0) {
      parameters = 0;
    } else {
      parameters = 1;
    }

    console.log('Posting: ', parameters);

    $.ajax({
      url: 'disableAd.php',
      data: parameters,
      type: 'post',
      dataType: 'json',
      success: function(data) {
        //  ... do something with the data...
        console.log('Ad disabled', data);
      }
    });
  });
});

Приведенный выше код не работает, но я не вижу, в чем дело.

Большое спасибо за ваше время.

Answer 1

Вы использовали селектор класса $ ('. DisableAd'). Click (function () ....

Но вы не объявили атрибут класса в элементе ввода типа переключателя.

Объявите класс в элементе входного типа следующим образом:

<input type="radio" class="DisableAd" name="DisableAd" value="0" id="RadioGroup1_0" /> Radio</label><br/> <label> <input type="radio" class="DisableAd" name="DisableAd" value="0" id="RadioGroup1_1" /> Radio</label>

Это будет работать! :)

Answer 2

Вы используете селектор ".DisableAd" для вашего обработчика кликов, но у вас нет класса с таким именем.Вместо этого используйте $('[name="DisableAd"]').

Я также изменил значения радиосвязи, чтобы вы могли видеть отраженные изменения с помощью присваивания свойства parameters объект disAd - которое я изменил на $(this).val() Надеюсь, это поможет

$(document).ready(function() {
  $('[name="DisableAd"]').click(function() {
    //event.preventDefault();

    var parameters = {
      'disAd': $(this).val(), // changed this as well so you can retrieve selected radio value
    };
    
    if (parameters.disAd == 0) {
      parameters = 0;
    } else {
      parameters = 1;
    }

    console.log('Posting: ', parameters);

    $.ajax({
      url: 'disableAd.php',
      data: parameters,
      type: 'post',
      dataType: 'json',
      success: function(data) {
        //  ... do something with the data...
        console.log('Ad disabled', data);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="DisableAd" value="0" id="RadioGroup1_0" />
Radio</label><br/>
<label>
<input type="radio" name="DisableAd" value="1" id="RadioGroup1_1" />
Radio</label>