Radio buttons error, multiple choices allowed

Question

I'm building a form using bootstrap 4; I have to use radio buttons to ask the level of knowledge of a language and I have a div for each language with 6 inline radio button inside (one for each level). The issue is that all boxes are checkable at the same time.

I'm generating the HTML through a JS function (transpiled by JSweet) but i don't think it's related to the problem.

Also I'm using Firefox 68.0.1 but i don't think it's related since W3school example works as intended.

I have tried various guidelines (starting from W3school which puts <input> inside <label> </label>) but none of them are working. Radio Buttons

The one that I'm showing is the one that lets see the labels (the other ones just showed 6 really close radios).

<div class="container h-100 d-flex justify-content-around align-items-center">
   <form action="doSomething" method="POST">
      <div class="form-group">
         .
         .
         .
         Parts of the form actually working
         .
         .
         .
         <div class="container">
            <div name="language0" class="container">
               <div class="form-check-inline">
                  <label class="form-check-label" for="Italiano0"> Italiano  A1</label>
                  <input class="form-check-input" type="radio" name="Italiano0" id="Italiano0" value="Italiano0">
               </div>


               <div class="form-check-inline">
                  <label class="form-check-label" for="Italiano1">A2</label>
                  <input class="form-check-input" type="radio" name="Italiano1" id="Italiano1" value="Italiano1">
               </div>

            **This is repeated for each level from a1 to c2 and for each language**

            </div>
            <div name="language1" class="container>
               .
               .
               .
            </div>
         </div>
      </div>
   </form>
</div>

Radio button name should be the same. Check this : [https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_radio] — Murtaza Bharmal, Aug 09 '19 at 11:06

score 1 · Accepted Answer · edited Aug 09 '19 at 11:09

1

Try keeping the name for the input same. As shown below

<div class="form-check-inline">
  <label class="form-check-label" for="Italiano0"> Italiano  A1</label>
  <input class="form-check-input" type="radio" name="Italiano123" id="Italiano0" value="Italiano0">
</div>


<div class="form-check-inline">
  <label class="form-check-label" for="Italiano1">A2</label>
  <input class="form-check-input" type="radio" name="Italiano123" id="Italiano1" value="Italiano1">
</div>

edited Aug 09 '19 at 11:09

Murtaza Bharmal

472
4
16

answered Aug 09 '19 at 11:05

dj21496

96
7

This is working exactly as intended, i feel so dumb right now, i've been looking for this for 3 days. – Tox46 Aug 09 '19 at 11:10

Radio buttons error, multiple choices allowed

1 Answers1