Question 337449 in Html Question posted in
Some basic documentation can be found here.

Html – Use radio buttons with same input ids

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?

Tags:

2

Answers


  1. 0

    No, you cannot have multiple elements with the same id in the DOM, no exceptions. It doesn’t look like you need the id for anything other than the label, so I’d suggest wrapping your checkbox and text inside the label element, eliminating a need for an id.

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

    Rule number one : IDs have to be unique on a page.
    If you have to repeat this kind of code, I suggest you to name the ids according to a rule you can define like this :

        <form id="form_0">
        <input type="text" id="form_0_one">
        <label for="form_0_one"></label>
        <input type="text" id="form_0_two">
        <label for="form_0_two"></label>
    </form>
    <form id="form_1">
        <input type="text" id="form_1_one">
        <label for="form_1_one"></label>
        <input type="text" id="form_1_two">
        <label for="form_1_two"></label>
    </form>

    which could be written in some loops like that (example in php)

    foreach($forms as $id => $form){
    echo '<form id="#'.$id.'">';
    echo '<input type="text" id="form_'.$id.'_one">';
    echo '<label for="form_'.$id.'_one"></label>';
    echo '<input type="text" id="form_'.$id.'_two">';
    echo '<label for="form_'.$id.'_two"></label>';
    echo '</form>';
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search