Solution 1 :

Add a form element to wrap your input elements in. Forms can access all the inputs that are inside of it and see their names and their values. So in this case it is important that you use the value attribute on your input elements. Start by doing the above and make your code look like the example below.

Also, be careful with id‘s. They need to be unique, so they can only appear once in every document. Right now the label and their input elements have the same id.

<form id="step-form">

  <div class="one">
    ...
  </div>

</form>

Like @Shilly suggested, use the FormData API. This API is designed to get all the values from a form, think input, textarea and select elements and puts all of that data into a single object. This way you can create as many form-elements as you want, add them to the form and store their values in a single object.

The data in that object will be read as key-value pairs, which in this case are the name and value attribute values. For example: ['1-level', '2'], here we see the input with the name '1-level' and the value '2'.

I would not recommend using other input elements to show your results or summary. This could be confusing for the user as it suggests input. Instead print your results in plain text or create a list.

I do not know the jQuery equivalent of many of these API’s or methods, so I’ve used Vanilla JavaScript to create a demo which, hopefully, demonstrates what you try to accomplish.

If you have any question, I’ve been unclear, or have not helped you in any way. Please let me know.

const form = document.getElementById('step-form');
const summary = document.getElementById('step-summary');
const clear = document.getElementById('step-clear');

// Remove all children of the summary list.
function clearSummary() {
  while(summary.firstElementChild) {
    summary.firstElementChild.remove();
  }
}

// Clear list on click.
clear.addEventListener('click', event => {
  clearSummary();
});

form.addEventListener('submit', event => {
  // Clear list first.
  clearSummary();
  
  // Create a fragment to store the list items in.
  // Get the data from the form.
  const fragment = new DocumentFragment();
  const formData = new FormData(event.target);

  // Turn each entry into a list item which display
  // the name of the input and its value.
  // Add each list item to the fragment.
  for (const [ name, value ] of formData) {
    const listItem = document.createElement('li');
    listItem.textContent = `${name}: ${value}`;
    fragment.appendChild(listItem);
  }

  // Add all list items to the summary.
  summary.appendChild(fragment);
  event.preventDefault();
});
<form id="step-form">

  <div class="one">
    <input type="radio" id="1-1" name="1-level" value="1">
    <label for="1-1">1</label>
    <input type="radio" id="1-2" name="1-level" value="2">
    <label for="1-2">2</label>
  </div>
  
  <div class="two">
    <input type="radio" id="2-1" name="2-level" value="1">
    <label for="2-1">1</label>
    <input type="radio" id="2-2" name="2-level" value="2">
    <label for="2-2">2</label>
  </div>
  
  <div class="three">
    <input type="radio" id="3-1" name="3-level" value="1">
    <label for="3-1">1</label>
    <input type="radio" id="3-2" name="3-level" value="2">
    <label for="3-2">2</label>
  </div>

  <ul id="step-summary"></ul>
  
  <button type="submit">Review form</button>
  <button type="button" id="step-clear">Clear summary</button>

</form>

Problem :

Is this a good solution to check multiple radio buttons with 1 label? I have a form with multiple steps. The last step shows a summary about the previous steps and I need to get all data from there. Is there a better option? How can I get the text from the input fields and insert it to the summary? JavaScript?

$('label').click(function() {
  id = this.id.split('-');

  if (id[0] === '1') {
    id[0] = '2';
  } else {
    id[0] = '1';
  }

  $('#' + id[0] + '-' + id[1]).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
  <input type="radio" id="1-1" name="1-level">
  <label for="1-1" id="1-1">1</label>
  <input type="radio" id="1-2" name="1-level">
  <label for="1-2" id="1-2">2</label>
</div>
<div class="two">
  <input type="radio" id="2-1" name="2-level">
  <label for="2-1" id="2-1">1</label>
  <input type="radio" id="2-2" name="2-level">
  <label for="2-2" id="2-2">2</label>
</div>

Comments

Comment posted by Shilly

What’s the point of it? Why not use one radio button to represent both 1-1 and 1-2, since selecting one will also select the other, making the two radios basically the same radio. And since you do not use the

Comment posted by xif80599

@Shilly I have, as I said, a multi step form and I need a summary at the end (last step). So I have to show which value was selected (class two is the “summary” in my example and is not visible at the start).

Comment posted by Shilly

Ah I see, you’re ‘copying’ the checked radios to other radios. I would personally prefer the summary not being input elements, but just a pretty print of the FormData after adding the values to the inputs. But that makes this just an opinion based question.

Comment posted by xif80599

@Shilly I had the same idea.. but it should be possible to edit the inputs. Do you think my solution is good or not?

Comment posted by Ashley

What text, from which input fields? Do you mean the labels of the previous radios? Why do you need to be able to edit the form data from the summary rather than just be redirected to that part of the form to adjust?

By

Leave a Reply

Your email address will not be published. Required fields are marked *