Sync Two Radio Forms JavaScript

user_16003326 0
Viewed 51

I stumbled onto an online store and found that I had to select the size variant twice instead of it automatically syncing between the add to cart form and size chart. Learning how to code and thought it'd be fun to take a crack at solving this with just javascript.

Scenario: Shop has size variants (1st set of radio buttons) for a shirt. This shop also has a size chart that filters out chart data based on size variants (2nd set of radio buttons). To make things more convenient for the shopper, it'd be nice if the size variants synced so there would be less actions to take.

Practical Ex: Let's assume both radio buttons have "S" checked at default. John clicks on "M" on the 1st set of radio buttons. He scrolls down to the size chart section and "M" is already selected for him, he views the size data for "M". He realizes he may not fit "M" and then selects "L". "L" looks promising, so he scrolls back up and "L" is already selected for him, he proceeds to click "add to cart".

https://jsfiddle.net/1pto60hw/1/

(function() {  
document.getElementById('update-variant').addEventListener('click', function(event) {

const mainselect = document.querySelector('input[name="Size"]:checked').value;
const chartselect = document.querySelector('input[name="Size2"]:checked').value;

  if (chartselect != mainselect) { 
 // not sure what to do here
    if (document.querySelector('input[name="Size2"]').value == mainselect) {
      
        }     
  }  
  
})

})();
<h1>
Size Inputs 1
</h1>
<variant-radio id="update-variant">
<fieldset>
<input type="radio" id='1' name="Size" value="XS" form="1">
                          <label for="1">
                            XS
                          </label>
                          
<input type="radio" id="2" name="Size" value="S" form="1">
                         <label for="2">
                            S
                          </label>
                          
<input type="radio" id="3" name="Size" value="M" form="1">
                          <label for="3">
                            M
                          </label>
                         </fieldset>
  
</variant-radio>

<h1>
Size Inputs 2
</h1>
<variant-radio id="update-variant-2">
<fieldset>
<input type="radio" id="4" name="Size2" value="XS" form="2">
                          <label for="4">
                            XS
                          </label>
                          
<input type="radio" id="5" name="Size2" value="S" form="2">
                         <label for="5">
                            S
                          </label>
                          
<input type="radio" id="6" name="Size2" value="M" form="2">
                          <label for="6">
                            M
                          </label>
                         </fieldset>
  
</variant-radio>

html javascript
2 Answers

Instead of that if statement, try this:

document.querySelectorAll('input[name="Size2"]').forEach(element => {
   if(element.value == mainselect) element.checked = true;
   else element.checked = false;
 });

Here we're using "querySelectorAll" as we're trying to grab multiple nodes instead of just one. Then we'll use "forEach" to iterate through all the "Size2" nodes, and if the values match, we check it; otherwise, we uncheck it. You would then apply similar logic if you were trying to make it go the other direction.

user_185172250

I added some classes to simplify it.

Basically, I use the value of the modified radio to find every radio with the same value (using classes) and check them

(function() {
  document.querySelectorAll('.js-size').forEach(elem => elem.addEventListener('change', (event) => {
    document.querySelectorAll('.js-size-' + event.target.value).forEach((input) => {
      input.checked = true;
    });
  }));
})();
<h1>
  Size Inputs 1
</h1>
<variant-radio id="update-variant">
  <fieldset>
    <input type="radio" id='1' name="Size" value="XS" form="1" class="js-size js-size-XS">
    <label for="1">
      XS
    </label>

    <input type="radio" id="2" name="Size" value="S" form="1" class="js-size js-size-S">
    <label for="2">
      S
    </label>

    <input type="radio" id="3" name="Size" value="M" form="1" class="js-size js-size-M">
    <label for="3">
      M
    </label>
  </fieldset>
</variant-radio>

<h1>
  Size Inputs 2
</h1>
<variant-radio id="update-variant-2">
  <fieldset>
    <input type="radio" id="4" name="Size2" value="XS" form="2" class="js-size js-size-XS">
    <label for="4">
      XS
    </label>

    <input type="radio" id="5" name="Size2" value="S" form="2" class="js-size js-size-S">
    <label for="5">
      S
    </label>

    <input type="radio" id="6" name="Size2" value="M" form="2" class="js-size js-size-M">
    <label for="6">
      M
    </label>
  </fieldset>
</variant-radio>

user_59756780
Related