Radio Button's not changing form in Javascript

Question

We have a form on our site (ex. T-Shirt) that changes based on which radio button you select. I wrote a JS function that pairs the mobile dropdown and desktop radio buttons. While visually everything works, the add to cart functionality only works on desktop and not on mobile.

When I ran the forms through a diffchecker, what I noticed was the only lines that changed were the price displayed and the value of the <input type="hidden" name="variation_id" class="variation_id">.

Currently the dropdown adds the attr of checked to the corresponding radio button, which works for display purposes, but I'm learned the form doesn't actually care whether or not the radio button is checked.

I'm not sure what the form is looking for. I've tried passing a click() to the radio input and its also label. I even tried manually changing the .variation_id from say 652 to 653. But nothing changed. The form didn't process.

Are there attributes that JS looks for in a radio button that you can't see in the markup?

Here's a form with one option selected:

<div class="av-woo-purchase-button  avia-builder-el-16  el_after_av_hr  avia-builder-el-last "><p class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>25.00</span></p>
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="651" data-product_variations="[{&quot;attributes&quot;:{&quot;attribute_size&quot;:&quot;Extra Large&quot;},&quot;availability_html&quot;:&quot;<p class=\&quot;stock in-stock\&quot;>In stock<\/p>\n&quot;,&quot;backorders_allowed&quot;:false,&quot;dimensions&quot;:&quot;N\/A&quot;,&quot;dimensions_html&quot;:&quot;N\/A&quot;,&quot;display_price&quot;:25,&quot;display_regular_price&quot;:25,&quot;image&quot;:{&quot;title&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;caption&quot;:&quot;&quot;,&quot;url&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;alt&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png&quot;,&quot;srcset&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w&quot;,&quot;sizes&quot;:&quot;(max-width: 450px) 100vw, 450px&quot;,&quot;full_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;full_src_w&quot;:960,&quot;full_src_h&quot;:920,&quot;thumb_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png&quot;,&quot;thumb_src_w&quot;:120,&quot;thumb_src_h&quot;:120,&quot;src_w&quot;:450,&quot;src_h&quot;:431},&quot;image_id&quot;:&quot;5823&quot;,&quot;is_downloadable&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_purchasable&quot;:true,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;is_virtual&quot;:false,&quot;max_qty&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;price_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;variation_id&quot;:652,&quot;variation_is_active&quot;:true,&quot;variation_is_visible&quot;:true,&quot;weight&quot;:&quot;.3 lbs&quot;,&quot;weight_html&quot;:&quot;.3 lbs&quot;,&quot;step&quot;:1,&quot;input_value&quot;:1},{&quot;attributes&quot;:{&quot;attribute_size&quot;:&quot;Large&quot;},&quot;availability_html&quot;:&quot;<p class=\&quot;stock in-stock\&quot;>In stock<\/p>\n&quot;,&quot;backorders_allowed&quot;:false,&quot;dimensions&quot;:&quot;N\/A&quot;,&quot;dimensions_html&quot;:&quot;N\/A&quot;,&quot;display_price&quot;:25,&quot;display_regular_price&quot;:25,&quot;image&quot;:{&quot;title&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;caption&quot;:&quot;&quot;,&quot;url&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;alt&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png&quot;,&quot;srcset&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w&quot;,&quot;sizes&quot;:&quot;(max-width: 450px) 100vw, 450px&quot;,&quot;full_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;full_src_w&quot;:960,&quot;full_src_h&quot;:920,&quot;thumb_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png&quot;,&quot;thumb_src_w&quot;:120,&quot;thumb_src_h&quot;:120,&quot;src_w&quot;:450,&quot;src_h&quot;:431},&quot;image_id&quot;:&quot;5823&quot;,&quot;is_downloadable&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_purchasable&quot;:true,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;is_virtual&quot;:false,&quot;max_qty&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;price_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;variation_id&quot;:653,&quot;variation_is_active&quot;:true,&quot;variation_is_visible&quot;:true,&quot;weight&quot;:&quot;.3 lbs&quot;,&quot;weight_html&quot;:&quot;.3 lbs&quot;,&quot;step&quot;:1,&quot;input_value&quot;:1}]" current-image="5823">
 
   <table class="variations" cellspacing="0">
   <tbody>
         <tr>
      <td class="label"><label for="size">Size</label></td>
            <td class="value">
       <div class="desktop-only" id="radio"><div><input type="radio" name="attribute_size" value="Small" id="size_v_Small" disabled="disabled"><label for="size_v_Small">Small</label><input type="hidden" name="radio_variation_id" value="655"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=655&amp;attribute_size=Small"></div><div><input type="radio" name="attribute_size" value="Medium" id="size_v_Medium" disabled="disabled"><label for="size_v_Medium">Medium</label><input type="hidden" name="radio_variation_id" value="654"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=654&amp;attribute_size=Medium"></div><div><input type="radio" name="attribute_size" value="Large" id="size_v_Large" checked="checked"><label for="size_v_Large">Large</label><input type="hidden" name="radio_variation_id" value="653"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=653&amp;attribute_size=Large"></div><div><input type="radio" name="attribute_size" value="Extra Large" id="size_v_Extra Large"><label for="size_v_Extra Large">Extra Large</label><input type="hidden" name="radio_variation_id" value="652"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=652&amp;attribute_size=Extra+Large"></div></div><a class="reset_variations" href="#">Clear</a>      </td>
     </tr>
       </tbody>
  <div class="mobile-only" id="drop"><select id="size"><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select></div></table>

  
  <div class="single_variation_wrap">
   <div class="woocommerce-variation single_variation" style="">
 <div class="woocommerce-variation-description">
  
 </div>

 <div class="woocommerce-variation-price">
  
 </div>

 <div class="woocommerce-variation-availability">
  <p class="stock in-stock">In stock</p>

 </div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
 
    <div class="quantity_select" style="float: left;">
        <select name="quantity" class="qty" title="Qantity">
                            <option selected="selected" value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                    </select>
    </div> <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
 <input type="hidden" name="add-to-cart" value="651">
 <input type="hidden" name="product_id" value="651">
 <input type="hidden" name="variation_id" class="variation_id" value="653">
</div>
  </div>

   
 </form>

</div>

Here's the same form with another option selected:

<div class="av-woo-purchase-button  avia-builder-el-16  el_after_av_hr  avia-builder-el-last "><p class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>25.00</span></p>
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="651" data-product_variations="[{&quot;attributes&quot;:{&quot;attribute_size&quot;:&quot;Extra Large&quot;},&quot;availability_html&quot;:&quot;<p class=\&quot;stock in-stock\&quot;>In stock<\/p>\n&quot;,&quot;backorders_allowed&quot;:false,&quot;dimensions&quot;:&quot;N\/A&quot;,&quot;dimensions_html&quot;:&quot;N\/A&quot;,&quot;display_price&quot;:25,&quot;display_regular_price&quot;:25,&quot;image&quot;:{&quot;title&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;caption&quot;:&quot;&quot;,&quot;url&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;alt&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png&quot;,&quot;srcset&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w&quot;,&quot;sizes&quot;:&quot;(max-width: 450px) 100vw, 450px&quot;,&quot;full_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;full_src_w&quot;:960,&quot;full_src_h&quot;:920,&quot;thumb_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png&quot;,&quot;thumb_src_w&quot;:120,&quot;thumb_src_h&quot;:120,&quot;src_w&quot;:450,&quot;src_h&quot;:431},&quot;image_id&quot;:&quot;5823&quot;,&quot;is_downloadable&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_purchasable&quot;:true,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;is_virtual&quot;:false,&quot;max_qty&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;price_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;variation_id&quot;:652,&quot;variation_is_active&quot;:true,&quot;variation_is_visible&quot;:true,&quot;weight&quot;:&quot;.3 lbs&quot;,&quot;weight_html&quot;:&quot;.3 lbs&quot;,&quot;step&quot;:1,&quot;input_value&quot;:1},{&quot;attributes&quot;:{&quot;attribute_size&quot;:&quot;Large&quot;},&quot;availability_html&quot;:&quot;<p class=\&quot;stock in-stock\&quot;>In stock<\/p>\n&quot;,&quot;backorders_allowed&quot;:false,&quot;dimensions&quot;:&quot;N\/A&quot;,&quot;dimensions_html&quot;:&quot;N\/A&quot;,&quot;display_price&quot;:25,&quot;display_regular_price&quot;:25,&quot;image&quot;:{&quot;title&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;caption&quot;:&quot;&quot;,&quot;url&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;alt&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png&quot;,&quot;srcset&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w&quot;,&quot;sizes&quot;:&quot;(max-width: 450px) 100vw, 450px&quot;,&quot;full_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;full_src_w&quot;:960,&quot;full_src_h&quot;:920,&quot;thumb_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png&quot;,&quot;thumb_src_w&quot;:120,&quot;thumb_src_h&quot;:120,&quot;src_w&quot;:450,&quot;src_h&quot;:431},&quot;image_id&quot;:&quot;5823&quot;,&quot;is_downloadable&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_purchasable&quot;:true,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;is_virtual&quot;:false,&quot;max_qty&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;price_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;variation_id&quot;:653,&quot;variation_is_active&quot;:true,&quot;variation_is_visible&quot;:true,&quot;weight&quot;:&quot;.3 lbs&quot;,&quot;weight_html&quot;:&quot;.3 lbs&quot;,&quot;step&quot;:1,&quot;input_value&quot;:1}]" current-image="5823">
 
   <table class="variations" cellspacing="0">
   <tbody>
         <tr>
      <td class="label"><label for="size">Size</label></td>
            <td class="value">
       <div class="desktop-only" id="radio"><div><input type="radio" name="attribute_size" value="Small" id="size_v_Small" disabled="disabled"><label for="size_v_Small">Small</label><input type="hidden" name="radio_variation_id" value="655"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=655&amp;attribute_size=Small"></div><div><input type="radio" name="attribute_size" value="Medium" id="size_v_Medium" disabled="disabled"><label for="size_v_Medium">Medium</label><input type="hidden" name="radio_variation_id" value="654"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=654&amp;attribute_size=Medium"></div><div><input type="radio" name="attribute_size" value="Large" id="size_v_Large" checked="checked"><label for="size_v_Large">Large</label><input type="hidden" name="radio_variation_id" value="653"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=653&amp;attribute_size=Large"></div><div><input type="radio" name="attribute_size" value="Extra Large" id="size_v_Extra Large"><label for="size_v_Extra Large">Extra Large</label><input type="hidden" name="radio_variation_id" value="652"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=652&amp;attribute_size=Extra+Large"></div></div><a class="reset_variations" href="#" style="visibility: visible; display: inline;">Clear</a>      </td>
     </tr>
       </tbody>
  <div class="mobile-only" id="drop"><select id="size"><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select></div></table>

  
  <div class="single_variation_wrap">
   <div class="woocommerce-variation single_variation" style="">
 <div class="woocommerce-variation-description">
  
 </div>

 <div class="woocommerce-variation-price">
  
 </div>

 <div class="woocommerce-variation-availability">
  <p class="stock in-stock">In stock</p>

 </div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
 
    <div class="quantity_select" style="float: left;">
        <select name="quantity" class="qty" title="Qantity">
                            <option selected="selected" value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                    </select>
    </div> <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
 <input type="hidden" name="add-to-cart" value="651">
 <input type="hidden" name="product_id" value="651">
 <input type="hidden" name="variation_id" class="variation_id" value="652">
</div>
  </div>

   
 </form>

</div>

Answer 1

Because clicking on the radio input whose .val() matches the selected option's .text(), I just passed a .click() from the option to its matching radio button.