CODEWITHSUNDEEP
ajaxcodeignitercodeigniter-3
Agreesh V S
Agreesh V S

Reputation: 31

How to get value from radio button dynamically

i am creating a form for searching a client, using either id or email both are set to be unique. Application made on Codeignitor.

  1. I have created a form with two radio buttons, one for search with ID and another for search with mail+dob.
  2. Depending on the radio button selected, corresponding input fields shown.
  3. In controller, it choose the model function based on the radio button value.

This is I coded, i need to pass the value of radio button to Controller.php file

Form(only included the radio button)

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

I expected to get the radio button value correctlyenter image description here enter image description here

Upvotes: 1

Views: 1010

Answers (4)

bhagavati antala
bhagavati antala

Reputation: 175

If you want to get currently checked radio button value Try below line which will return current radio button value

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

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28563

One thing I noticed is that you have 'mail' as a value in the DOB option. Another is that there seems to be 3 options and yet you only have 2 radios?

I adjusted the mail value to dob and created dummy divs to test the code. It seems to work.

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

As far as passing the value to the controller goes, ideally the inputs should be in a form. When you submit the form, the selected value can be passed to the php. 

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

Upvotes: 1

Danish Ali
Danish Ali

Reputation: 2352

Try this

<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>

Upvotes: 1

M.Hemant
M.Hemant

Reputation: 2355

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) {

    }
   });
}

Upvotes: 1

Related Questions