Use radio buttons with same input ids

ghz 7months ago ⋅ 92 views

I wrote a code with radio buttons acting as accordion tabs. For my forum, I need to be able to post the exact same code multiple times on the same page. I know this is possible by simply editing the ID of the input line. This is unfortunately not very user-friendly for those in my forum who just want to fill in the codes as they are not used to HTML.

I was wondering if there is a way to restrict the radio buttons to the form or to a specified container so that each new container functions independently even with the same IDs on the page as in the previous container.

<form>
  <div>
    <input type="radio" name="Block" id="one" checked="checked" value="one" />
    <label for="one">1</label>
    <article>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
    </article>
  </div>
  <div>
    <input type="radio" name="Block" id="two" value="two" />
    <label for="two">2</label>
    <article>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
    </article>
  </div>
</form>

I removed the CSS part for now. If you duplicate the code now and run it you'll see that only the upper form works properly.

I translated this code to BB-Code but it only works in the last post of the forum page without changing the IDs (obviously).

So, in short: Can one define an area (container/form/etc.) within which the radio buttons work so that they don't interfere with the same code on the same page? Or is there any other way to make this possible without having my users change the ids?

Answers

Yes, you can achieve this by using unique IDs for each set of radio buttons within the form or container. One way to generate unique IDs automatically is by using JavaScript. Here's an example of how you can modify your code to generate unique IDs dynamically:

<form>
  <div class="accordion-container">
    <input type="radio" name="Block" id="one" checked="checked" value="one" />
    <label for="one">1</label>
    <article>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
    </article>
  </div>
  <div class="accordion-container">
    <input type="radio" name="Block" id="two" value="two" />
    <label for="two">2</label>
    <article>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
    </article>
  </div>
</form>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Get all elements with class "accordion-container"
    var accordionContainers = document.querySelectorAll('.accordion-container');

    // Loop through each container
    accordionContainers.forEach(function(container, index) {
      // Generate unique IDs for input and label elements
      var inputId = 'input_' + index;
      var labelFor = 'input_' + index;

      // Set IDs for input and label elements
      container.querySelector('input').id = inputId;
      container.querySelector('label').setAttribute('for', labelFor);
    });
  });
</script>

In this example:

  • Each <div> with the class accordion-container contains a set of radio buttons and its corresponding content.
  • The JavaScript code dynamically generates unique IDs for the input and label elements within each container.
  • The IDs are generated based on the index of the container, ensuring that each set of radio buttons has unique IDs.

This way, you can use the same HTML code multiple times on the same page, and the radio buttons within each container will function independently without interfering with each other.

#forms