Как получить значение из переключателя динамически

Question

Я создаю форму для поиска клиента, используя либо идентификатор, либо адрес электронной почты, которые оба являются уникальными.Приложение сделано на Codeignitor .

1. Я создал форму с двумя переключателями, один для поиска с идентификатором и другой дляпоиск с почтой + dob.
2. В зависимости от выбранной радиокнопки отображаются соответствующие поля ввода.
3. В контроллере выбирается функция модели на основе значения радиокнопки.

Это я закодировал, мне нужно передать значение радиокнопки в Controller.php файл

Форма (только радиокнопка включена)

$(document).ready(function() {
  $("#usingdob").hide();
  $("#usingmail").hide();
  $("input:radio").click(function() {
    if ($(this).val() == "id") {
      $("#usingId").show();
      $("#usingdob").hide();
      $("#usingmail").hide();



    } else {
      $("#usingId").hide();
      $("#usingdob").show();
      $("#usingmail").show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <label class="radio-inline">
<input  type="radio" name="optradio" value="id" checked>Using ID </label></div>
<div class="col-md-4">
  <label class="radio-inline">
<input  type="radio" name="optradio" value="mail">Using DOB</label>
</div>

Я ожидал, что значение переключателя будет правильно введите описание изображения здесь

Answer 1

Если вы хотите проверить текущее значение переключателя, попробуйте ниже строки, которая будет возвращать текущее значение переключателя

var radioValue = $("input[name='gender']:checked").val();
if(radioValue)
{
alert("Your are a - " + radioValue); 
}

Answer 2

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

<script type="text/javascript">

$( document ).ready(function() {
$("#usingdob, #usingmail").hide();

$('input[name="radio"]').click(function() {

    if($(this).val() == "id") {
      $("#usingId").show();
      $("#usingdob, #usingmail").hide();
    } else {
      $("#usingId").hide();
      $("#usingdob, #usingmail").show();
    }
  });
});

</script>

Answer 3

Одна вещь, которую я заметил, это то, что у вас есть «mail» в качестве значения в опции DOB. Другой - кажется, что есть 3 варианта, и все же у вас есть только 2 радио?

Я изменил значение mail для dob и создал фиктивные div для проверки кода. Вроде работает.

$(document).ready(function() {
  $("#usingdob").hide();
  $("#usingmail").hide();
  $("input:radio").click(function() {
    console.log($(this).val());
    if ($(this).val() == "id") {
      $("#usingId").show();
      $("#usingdob").hide();
      $("#usingmail").hide();
    } else {
      $("#usingId").hide();
      $("#usingdob").show();
      $("#usingmail").show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <label class="radio-inline">
<input  type="radio" name="optradio" value="id" checked>Using ID </label></div>
<div class="col-md-4">
  <label class="radio-inline">
<input  type="radio" name="optradio" value="dob">Using DOB</label>
</div>

<div id="usingId">
  Using Id div
</div>

<div id="usingdob">
  Using dob div
</div>

<div id="usingmail">
  Using mail div
</div>

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

<?php
if (isset($_POST['submit'])) {
    if(isset($_POST['optradio']))
    {
       Radio selection is :".$_POST['optradio'];  // Radio selection 
    }
?>

Answer 4

JS:

$('input[name="optradio"]').click(function(){
    var optradio = $(this).val();
    //or
    var optradio = $("input[name='optradio']:checked").val();
    if(optradio == 'id'){
      //do your hide/show stuff
    }else{
      //do your hide/show stuff
    }
});
//on search button press call this function
function passToController(){
   var optradio = $("input[name='optradio']:checked").val();
   $.ajax({
    beforeSend: function () {
    },
    complete: function () {
    },
    type: "POST",
    url: "<?php echo site_url('controller/cmethod'); ?>",
    data: ({optradio : optradio}),
    success: function (data) {

    }
   });
}