Adding multiple radio button groups using jquery

Question

There are a couple of radio buttons initially but the user can add it any no. of time. The addition of new radio btns groups are done by jquery below. But the problem is when any of the radio btn is clicked, all the other radio btns checked are unchecked. I need to send the array of "radio_type[]" name attribute to the server. How can I do it?

Html:

<div>
    <div class="registerVoucherForm">
        <div class="formDetails">
            <label>
                <input value="pay-radio" type="radio" name="radio_type[]" checked="">
                Pay
            </label>
            <label>
                <input value="receipt-radio" type="radio" name="radio_type[]">
                Receipt
            </label>
        </div>
    </div>
    <div class="addMoreFields"></div>
</div>

<a href="" class="add-new">Add New Component</a>

Jquery:

var globalIndex = 1;
$(".add-new").on("click", function (e) {
    var forms = $(".formDetails").html();
    var radioBtn = '<div class="formDetails addedMoreRadios_' + globalIndex + '"><hr>';
    radioBtn += forms;
    
    $(".addMoreFields").append(radioBtn);
        
    globalIndex++;
});

P.S I tried to change the name attribute of each newly added radio btn groups but it is not working. I am not able to change the name attribute of each newly added radio btns group.

Thanks in advance.

Problem is that the new radio buttons you create has the same name as the default aka radio_type[] — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Aug 30, 2021 at 12:53
"the problem is when any of the radio btn is clicked, all the other radio btns checked are unchecked" That is what radio buttons do. Use checkboxes instead..? — Peter Pointer
– Peter Pointer, Commented Aug 30, 2021 at 12:58
I tried to change the name attribute of each newly added radio btns - you should include this code as, so far, all the suggested answers are [just] how to do this. "Not working" should also be clarified - does the name= change but doesn't post to your backend? Be explicit with what's not working. — fdomn-m
– fdomn-m, Commented Aug 30, 2021 at 13:25

Nitheesh · Accepted Answer · 2021-08-30 13:35:00Z

1

Setting the name field for each radio group unique will solve this issue. The radio selection is done based on the value for name. If multiple radio group have the same name field, changing one will make change to all the radio inputs with that same name.

If this is acceptible, you can select all radio button in a single go using

$('input[name^="radio_type[]"]')

This will give you all the radios with their name starting with radio_type[]

Logic.

Select the node with className formDetails. I have used first to pick the first node, since the new nodes is also going to have the same class name.
Find the inputs under this div using clonedItem.find('input')
Update the name of these inputs.
Append this cloned node to our targeted div.
To select all the radios with name staring with radio_type[] you can make use of this jQuery selector $('input[name^="radio_type[]"]')

Working fiddle

var globalIndex = 1;
$(".add-new").on("click", function (e) {
  var clonedItem = $(".formDetails").first().clone();
  const inputs = clonedItem.find('input');
  inputs.each((index, node) => {
    node.name += globalIndex;
  })
  clonedItem.addClass('addedMoreRadios_' + globalIndex);
  $(".addMoreFields").append(clonedItem);
  globalIndex++;
});

function listAllRadios() {
  const radios = $('input[name^="radio_type[]"]');
  console.log(radios);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
  <div class="registerVoucherForm">
    <div class="formDetails">
      <label>
        <input value="pay-radio" type="radio" name="radio_type[]" checked="">
        Pay
      </label>
      <label>
        <input value="receipt-radio" type="radio" name="radio_type[]">
        Receipt
      </label>
    </div>
  </div>
  <div class="addMoreFields"></div>
</div>

<a class="add-new">Add New Component</a>
<button type="button" onclick="listAllRadios()">List All Radios</button>

edited Aug 30, 2021 at 13:35

answered Aug 30, 2021 at 13:13

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

fdomn-m Over a year ago

Problem is, OP won't be able to post his "array" of "radio_type" using name=radio_type[]1

Nitheesh Over a year ago

@freedomn-m The ultimate reason for the problem is that all the radio button have the same name. This needs to be changed for the radio buttons to behave independently. If this is resolved, the user can send the list of all radio buttons which has name radio_type[] in them using $('input[name^="radio_type[]"]'). have updated my answer with that.

fdomn-m Over a year ago

I read the question differently. "I need to send the array of "radio_type[]" name attribute to the server" is the issue - OP needs to find a different way to send these as they can't have the same name (to generate the "array of radio_type[]"). Hopefully your answer will help them get there.

Nitheesh Over a year ago

But, as you know, technically its not possible for multiple radio buttons with same name behave independently. So we have to update the logic for listing out the inputs. @freedomn-m

fdomn-m Over a year ago

Yes, that's the underlying issue.

Thallius · Accepted Answer · 2021-08-30 12:56:28Z

0

I suggest to add a magic token to the html template like

<div>
<div class="registerVoucherForm">
    <div class="formDetails">
        <label>
            <input value="pay-radio" type="radio" name="@@@RADIONAME@@@" checked="">
            Pay
        </label>
        <label>
            <input value="receipt-radio" type="radio" name="@@@RADIONAME@@@">
            Receipt
        </label>
    </div>
</div>
<div class="addMoreFields"></div>

Then you can replace the token by a counting number like

var forms = $(".formDetails").html();
forms = forms.replaceAll('@@@RADIONAME@@@', 'radio_'+globalIndex);

answered Aug 30, 2021 at 12:56

Thallius

2,6132 gold badges19 silver badges41 bronze badges

Collectives™ on Stack Overflow

Adding multiple radio button groups using jquery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related