How to push values to input type hidden when clicked on radio button using jQuery?

Question

I am getting values from one variable in array format so by using for loop it will iterate and when click on input type radio button each value with comma separated push to hidden field

I tried this but nothing gets inserted. How can I push those values to the hidden field?

 var id = ["1", "2"]; // getting this value from another varaible in array format for (var i = 0; i < id.length; i++) { $("input[name=radion_btn" + id[i] + "]").change(function() { $(".selected_val").push(id[i]); //values like 1,2 want to push in hidden field when click on radio button }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="hidden" name="selected_val[]" value="" class="selected_val" /> <input type="radio" name="radion_btn1" value="" /> <input type="radio" name="radion_btn2" value="" /> 

Answer 1

As per your code. for(var i = 0; i < id.length; i++) { run two times and whenever your event occur. At that time i value come 2 and id[2] comes undefined. Below code should work.

 var id = ["1", "2"]; // getting this value from another varaible in array format arrayData = []; for (var i = 0; i < id.length; i++) { $("input[name=radion_btn" + id[i] + "]").change(function() { console.log($(this).val()); arrayData.push($(this).val()); //values like 1,2 want to push in hidden field when click on radio button $('.selected_val').val(arrayData.join()); }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="value" name="selected_val[]" value="" class="selected_val" /> <input type="radio" name="radion_btn1" value="1" /> <input type="radio" name="radion_btn2" value="2" /> 

Answer 2

You can simulate a push by adding the hidden input's value before the new value

var id = ["1", "2"]; // getting this value from another varaible in array format

for (var i = 0; i < id.length; i++) {
  $(".selected_val").val("");
  $("input[name=radion_btn" + id[i] + "]").change(function() {
    $(".selected_val").val((i == 0 ? "" : ",") + $(".selected_val").val() + id[i]);
  });
}

Answer 3

Here's an example of one approach that might help. See comments in snippet below.

 let obj = {}; // create an empty object to store the clicked values $(".radio").change(function() { // when a radio button is clicked obj[this.id] = $(this).val(); // store it in the object $(".selected_val").val(JSON.stringify(obj)); // and add the object to hidden field as string console.log($(".selected_val").val()); // spit it out to the console }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="hidden" name="selected_val[]" value="" class="selected_val" /> <input type="radio" class="radio" name="radion_btn1" id="1" value="1" />1 <input type="radio" class="radio" name="radion_btn2" id="2" value="2" />2 <input type="radio" class="radio" name="radion_btn3" id="3" value="3" />3 

You'll notice I added a common class for all radio buttons. This is what I'm attaching the event handler to. I also added the IDs to the radio button elements as well.

This may or may not work best for your scenario, but hopefully gets you started in the right direction.

Update

If you'd rather store the values in an array, just change it to an array:

let arr = [];
$(".radio").change(function() {
    arr.push($(this).val());
    $(".selected_val").val(JSON.stringify(arr));
}

Of course, that won't associate the ID with the value like with an object.