CODEWITHSUNDEEP
htmlcssformsradio-buttonlabel
xif80599
xif80599

Reputation: 49

Use radio button name twice

I have a multi step form with 3 different "pages". 1 and 2 are for regular user input and page 3 is a summary from 1 and 2. Page 1 has some radio buttons. I'd like to show these in page 3 again (they should be editable). I don't want to use to different names, because they show exact the same... how can I achieve this? Here is the code for better understanding.

input {
  display: none;
}

label {
  width: 25px;
  height: 25px;
  display: inline-block;
  color: #fff;
  background-color: #000;
  text-align: center;
  line-height: 25px;
}

input:checked + label {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-1">
  <input type="radio" id="1" name="a" value="1" checked>
  <label for="1">1</label>
  <input type="radio" id="2" name="a" value="2">
  <label for="2">2</label>
</div>
<div class="page-2">
  <!-- ... -->
</div>
<div class="page-3">
  <input type="radio" id="1" name="a" value="1">
  <label for="1">1</label>
  <input type="radio" id="2" name="a" value="2">
  <label for="2">2</label>
</div>

Upvotes: 1

Views: 200

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105863

you cannot use twice the same id. Also to avoid styling issues , you should not use a number as a first letter for an attribute value (from old specification ) see : What are valid values for the id attribute in HTML?.

here is an example allowing a single input to be used by more than 1 label . Labels will need to be inside a sibbling of the input in order to style them.

possible working example with div sibblings of inputs:

input {
  display: none;
}

label {
  width: 25px;
  height: 25px;
  display: inline-block;
  color: #fff;
  background-color: #000;
  text-align: center;
  line-height: 25px;
}

input#a1:checked ~ div label[for="a1"],
input#a2:checked ~ div label[for="a2"]{
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <input type="radio" id="a1" name="a" value="1" checked>
  <input type="radio" id="a2" name="a" value="2">
<div class="page-1">
  <label for="a1">1</label>
  <label for="a2">2</label>
</div>

<div class="page-2">
  <!-- ... -->
</div>

<div class="page-3">
  <label for="a1">1</label>
  <label for="a2">2</label>
</div>

Upvotes: 2

Md Abdul Awal
Md Abdul Awal

Reputation: 522

use different id='' everytime.

  <div class="page-3">
      <input type="radio" id="3" name="a" value="1">
      <label for="1">1</label>
      <input type="radio" id="4" name="a" value="2">
      <label for="2">2</label>
    </div>

Upvotes: 0

Related Questions