How can i pass radio button values based on the selected one?

Question

I have the following radio button in my view. How can I pass the value of the selected radio button and values in an array index less than the selected radio button?.

 foreach (var record in Model.Months.Select(x=>$"{x.Substring(4,2)}/{x.Substring(0,4)}").OrderByDescending(x=>x))
    {
         <div class="radio col-12">
            <div class="row">
              <div class="col-5" style="">
                @Html.RadioButton("MonthsAvailable", record, true, new { id = record, @class = "m-r" })<label>@record</label>
               </div>
             </div>
          </div>
    }

HTML Generated Code

<div class="row">
   <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="202008" checked="checked">
      <div class="check-icon-radio"><i></i></div>
      082020
   </label>
</div>
<div class="row">
   <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="092020">
      <div class="check-icon-radio"><i></i></div>
      092020
   </label>
</div>

My Model

 public class MonthsAvailable
   {
    public List<string> Months{ get; set; }       
   }

My Action Receives

public async Task<IActionResult> MonthsAvailable(List<string> monthsAvailable)
 {
 ...
 }

My radio button looks like as follows

I am trying to accomplish

When I select 062020 pass only 062020 to the controller, 
When I select 072020 pass 062020 and 072020, 
when I select 082020 pass 062020, 072020 and  082020
when I select 092020 pass 062020, 072020, 082020 and 092020 and etc

Hi @Swati Thank you. how can i do that, How can i get the values? — kuka muk, Jan 09 '21 at 04:01
Currently how you submit your data to controller on click of some button ? — Swati, Jan 09 '21 at 04:15
can you show your html generated of above code ? also are you ok with submitting value via ajax ? — Swati, Jan 09 '21 at 04:23
Yes, I am ok with submitting value via ajax. let me update my code — kuka muk, Jan 09 '21 at 04:25

score 3 · Accepted Answer · answered Jan 09 '21 at 04:56

You can give some outer div to all your .row div . Then , whenever submit button is clicked first get checked radio button value using this we will get the index() number of the div where radio is checked. Lastly , use for-loop to get the value from other radio buttons and push them in array and pass same using ajax.

Demo code :

$("#save").on("click", function() {
  var checked_value = []; //declare this
  var value = $("input[name=MonthsAvailable]:checked").val() //get value of checked checkboxs
  var lengths = $("input[value=" + value + "]").closest(".row").index() //get index
  console.log($("input[value=" + value + "]").closest(".row").index())
  //loop
  for (var i = 0; i <= lengths; i++) {
    checked_value.push($(".outer .row:eq(" + i + ") input:radio").val()) //push value inside array

  }
  console.log(JSON.stringify(checked_value))
  //ajax call
  $.ajax({
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    url: 'yoururl',
    data: JSON.stringify(checked_value),
    success: function(data) {
      console.log("done")
    }
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--only add this outer div-->
<div class="outer">
  <div class="row">
    <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="202008" checked="checked">
      <div class="check-icon-radio"><i></i></div>
      202008
   </label>
  </div>
  <div class="row">
    <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="092020">
      <div class="check-icon-radio"><i></i></div>
      092020
   </label>
  </div>
  <div class="row">
    <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="2020018" checked="checked">
      <div class="check-icon-radio"><i></i></div>
      2020018
   </label>
  </div>
  <div class="row">
    <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="0920202">
      <div class="check-icon-radio"><i></i></div>
      0920202
   </label>
  </div>
</div>
<button type="button" id="save">Save</button>

one thing in the my MVC action parameter i have as `public async Task MonthsAvailable(List monthsAvailable)` doesnt receive anything, if you have any idea? — kuka muk, Jan 09 '21 at 05:26
I have limited knowledge in c# . But, now you passing simply array so change `List` to `string[]` or [this](https://stackoverflow.com/a/40299928/10606400) should help :) — Swati, Jan 09 '21 at 05:29

How can i pass radio button values based on the selected one?

1 Answers1