On click on add button add another radio button with input box value

Question

Hi guys i have form where i want to show multiple radio buttons.so by default i am showing one radio button with text and gave option as Addother button ..so user can add multiple radio buttons onclick on add option button as per their requirement..

So here is what i have tried.

Answer Section:

            <div class="custom-control custom-radio" id="add_other">
              <div id="container0">
                <input type="radio" class="custom-control-input" id="defaultUnchecked" name="defaultExampleRadios">
                <input type="search" name="" value="">
              </div>
            </div>
            <div class="custom-control custom-radio" >
              <input type="radio" class="custom-control-input" id="defaultUnchecked" name="defaultExampleRadios">
              <input type="search" name="" value="">
              <button class="remove" onclick="removeDiv(this);">X</button>
            </div>
            <div class="custom-control custom-radio">
             <input type="radio" class="custom-control-input" id="defaultUnchecked" name="defaultExampleRadios">
             <input type="search" name="" value="">
             <button class="remove" onclick="removeDiv(this);">X</button>
           </div>
           <div class="custom-control custom-radio">
             <input type="radio" class="custom-control-input" id="defaultUnchecked" name="defaultExampleRadios">
             <input type="search" name="" value="">
             <button class="remove" onclick="removeDiv(this);">X</button>
           </div>
           <div class="custom-control copy-radio" onclick="addoptions()">
              <label class="add_option" id="add_othe1r">Add More</label>
            </div>


        </div>

Script code:

var index = 3;

  function addoptions() {
    $('#add_other').append(`<div id="container${index}" >` + '<input type="radio" class="custom-control-input" name="defaultExampleRadios"/ >'  + `<input type="search" name="text"/>` +  "</div>");
    index ++;
  }
function removeDiv(btn){
    ((btn.parentNode).parentNode).removeChild(btn.parentNode);
  }

topdev87 · Accepted Answer · 2020-11-12 10:44:29Z

you need to set 3 new containers inside id of "add_other" container.

function addoptions() {
  $('#add_other').append('<div>' + '<input type="radio" class="custom-control-input" name="defaultExampleRadios">' + '<input type="search" name="" value="">' + '<button class="remove" onclick="removeDiv(this);">X</button>' + "</div>");
}

function removeDiv(btn) {
  ((btn.parentNode).parentNode).removeChild(btn.parentNode);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="custom-control custom-radio" id="add_other">
  <div id="container0">
    <input type="radio" class="custom-control-input" name="defaultExampleRadios">
    <input type="search" name="" value="">
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input"  name="defaultExampleRadios">
    <input type="search" name="" value="">
    <button class="remove" onclick="removeDiv(this);">X</button>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="defaultExampleRadios">
    <input type="search" name="" value="">
    <button class="remove" onclick="removeDiv(this);">X</button>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="defaultExampleRadios">
    <input type="search" name="" value="">
    <button class="remove" onclick="removeDiv(this);">X</button>
  </div>

</div>
<div class="custom-control copy-radio" onclick="addoptions()">
  <label class="add_option" id="add_othe1r">Add More</label>
</div>

its working..how can i apply that same removediv function for add more radio buttons also

topdev87 · Accepted Answer · 2020-11-12 07:50:51Z

0

You set the id add_other to the Add Option button container. You need to remove that and reset the id to the first div container

var index = 1;

function addoptions() {
  $('#add_other').append(`<div id="container${index}" >` + '<input type="radio" class="custom-control-input" name="defaultExampleRadios"/>' + `<input type="search" name="text" onsearch="deleteRadio(${index})"/>` + "</div>");
  index ++;
}

function deleteRadio(ind) {
  $(`#container${ind}`).remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="hidden_radio_buttons" class="radio_buttons" style="margin:10px;">
  <!-- Default unchecked -->
  <div class="custom-control custom-radio" id="add_other">
    <div id="container0">
      <input type="radio" class="custom-control-input" id="defaultUnchecked" name="defaultExampleRadios">
      <input type="search" name="" value="" placeholder="option 1" onsearch="deleteRadio(0)">
    </div>
  </div>

  <!-- Default unchecked -->
  <div class="custom-control copy-radio" onclick="addoptions()">
    <input type="radio" class="custom-control-input" name="defaultExampleRadios">
    <label class="add_option" id="add_othe1r">Add Option</label>
  </div>
</div>

edited Nov 12, 2020 at 7:50

answered Nov 12, 2020 at 7:09

topdev87

8,7913 gold badges11 silver badges33 bronze badges

1 Comment

Samuel Liew Over a year ago

Comments are not for extended discussion; this conversation has been moved to chat.

Collectives™ on Stack Overflow

On click on add button add another radio button with input box value

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related