Javascript Change Url button on selected option

I’m having trouble with javascript because I don’t have much knowledge.

So, I want when the option is selected this can be change the link on the button

/*!
 * Pricing Table Select Price Change
 */

;(function($){
    if (!$) {
      return;
    }
    $(document).ready(function(){
      var $parent = $('.parent-select-price');
      if (!$parent.length) {
        return;
      }
      var $select = $parent.find('select.select-price[data-target]');
      if (!$select.length) {
        return;
      }
      $select.each(function() {
        $(this).parent($parent).fadeIn();
        var $target = $(this).attr('data-target');
        if (!$target) {
          return;
        }
        try {
          $target = $('[data-price='+$target+']');
        } catch(ea) {
          return;
        }
        if (!$target || !$target.length) {
          return;
        }
        var $selected = $(this).find('option:selected');
        if ($selected.length) {
          var $value = $selected.val();
          $target.html($value);
        }
        
        $(this).on('change', function(e) {
          e.stopPropagation();
          $selected = $(this).find('option:selected');
          var $value = $selected.val();
          $target.html($value);
          
        });
      });
    });
})(window.jQuery);

<div class="form-group parent-select-price">
  <select class="form-control select-price" data-target="plan1">
    <option value="126" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=monthly&promocode=">Monthly (Discount 10%)</option>
    <option value="126" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=quarterly&promocode=">Quarterly (Discount 10%)</option>
    <option value="112" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=semiannually&promocode=">Semi-Annually (Discount 20%)</option>
  <option value="105" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=annually&promocode=">Annually (Discount 25%)</option>
<option value="98" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=biennially&promocode=">Biennially (Discount 30%)</option>
<option value="70" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=triennially&promocode=" selected>Triennially (Discount 50%)</option>
</select>
</div>

<a id="link_button-31-28884" class="ct-link-button" href="https://example.com/cart.php?a=add&pid=160&billingcycle=triennially&promocode=" target="_blank">Buy Now</a>

So how about when we select Quarterly then the url on the button will change to quarterly data-url?

Answer

/*!
 * Pricing Table Select Price Change
 */

;(function($){
    if (!$) {
      return;
    }
    $(document).ready(function(){
      var $parent = $('.parent-select-price');
      if (!$parent.length) {
        return;
      }
      var $select = $parent.find('select.select-price[data-target]');
      if (!$select.length) {
        return;
      }
      $select.each(function() {
        $(this).parent($parent).fadeIn();
        var $target = $(this).attr('data-target');
        if (!$target) {
          return;
        }
        $target = $('[data-price='+$target+']');
        if ($target.length==0) {
          return;
        }
        var $selected = $(this).find('option:selected');
        if ($selected.length) {
          $target.html($selected.val());
        }
        
        $(this).on('change', function(e) {
          e.stopPropagation();
          $selected = $(this).find('option:selected');
          $target.html($selected.val());
          $('#link_button-31-28884').attr('href',$selected.data('url'));
        });
      });
    });

})(window.jQuery);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  Price: <span data-price="plan1"></span>
  <div class="form-group parent-select-price">
  <select class="form-control select-price" data-target="plan1">
    <option value="126" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=monthly&promocode=">Monthly (Discount 10%)</option>
    <option value="126" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=quarterly&promocode=">Quarterly (Discount 10%)</option>
    <option value="112" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=semiannually&promocode=">Semi-Annually (Discount 20%)</option>
  <option value="105" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=annually&promocode=">Annually (Discount 25%)</option>
<option value="98" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=biennially&promocode=">Biennially (Discount 30%)</option>
<option value="70" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=triennially&promocode=" selected>Triennially (Discount 50%)</option>
</select>
</div>

<a id="link_button-31-28884" class="ct-link-button" href="https://example.com/cart.php?a=add&pid=160&billingcycle=triennially&promocode=" target="_blank">Buy Now</a>
  
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

Advertisement

Answer