Question 295174 in Shopify Question posted in
The Shopify help center can be found here.

Shopify – How can I say for each Input in a Form you can select one item with border color

I use a shopify app and want to customize some things that I cant do in the app.

So I have 4 Forms and in the forms are 4-7 input radio buttons

every form is structured like this:

Form 1
<div class="globo-form-control layout-2-column">
  <div class="globo-form-input">
    <ul class="flex-wrap">

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

    </ul>
  </div>
</div>

Form 2
the same

How can I make that for each Form he can only select one ?

I tried this but this dont work and then he remove all

        const rd = document.querySelectorAll('.radio-label');

        rd.forEach(e => {
            e.addEventListener('click', el => {
                rd.forEach(e2 => {
                    e2.classList.remove('selected-radio');
                })
              e.classList.add('selected-radio');
            });
        });
Tags:

2

Answers


  1. 0

    If you just want the radio buttons for each form to be grouped, simply add a name attribute to the <input> field, e.g., <input class="radio-input" type="radio" name="form1" />. Radio buttons with the same name attribute will be grouped together and only one of these grouped buttons can be selected.

    Login or Signup to reply.
  2. 0

    To ensure that only one radio button can be selected per form, you’ll need to target each set of radio buttons individually within their respective forms. Here’s an example of how you might modify your code:

    // Get all the forms on the page
const forms = document.querySelectorAll('.globo-form-control');

// Function to handle radio button selection
function handleRadioSelection(label) {
  const radioLabels = label.closest('.globo-form-control').querySelectorAll('.radio-label');

  radioLabels.forEach(otherLabel => {
    if (otherLabel !== label) {
      otherLabel.classList.remove('selected-radio');
      otherLabel.previousElementSibling.checked = false; // Uncheck the associated radio input
    }
  });

  // Toggle selection for the clicked radio button label
  label.classList.toggle('selected-radio');
  label.previousElementSibling.checked = label.classList.contains('selected-radio'); // Check/uncheck the associated radio input
}

// Iterate through each form
forms.forEach(form => {
  const radioLabels = form.querySelectorAll('.radio-label');

  // Add event listener to each radio label within the form
  radioLabels.forEach(label => {
    label.addEventListener('click', () => {
      handleRadioSelection(label);
    });

    // Add event listener to associated radio input for change event
    label.previousElementSibling.addEventListener('change', () => {
      handleRadioSelection(label);
    });
  });
});
    <div class="globo-form-control layout-2-column">
  <div class="globo-form-input">
    <ul class="flex-wrap">

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

    </ul>
  </div>
</div>

<div class="globo-form-control layout-2-column">
  <div class="globo-form-input">
    <ul class="flex-wrap">

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

    </ul>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search