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
JavaScript
x
47
47
1
/*!2
* Pricing Table Select Price Change3
*/4
5
;(function($){6
if (!$) {7
return;8
}9
$(document).ready(function(){10
var $parent = $('.parent-select-price');11
if (!$parent.length) {12
return;13
}14
var $select = $parent.find('select.select-price[data-target]');15
if (!$select.length) {16
return;17
}18
$select.each(function() {19
$(this).parent($parent).fadeIn();20
var $target = $(this).attr('data-target');21
if (!$target) {22
return;23
}24
try {25
$target = $('[data-price='+$target+']');26
} catch(ea) {27
return;28
}29
if (!$target || !$target.length) {30
return;31
}32
var $selected = $(this).find('option:selected');33
if ($selected.length) {34
var $value = $selected.val();35
$target.html($value);36
}37
38
$(this).on('change', function(e) {39
e.stopPropagation();40
$selected = $(this).find('option:selected');41
var $value = $selected.val();42
$target.html($value);43
44
});45
});46
});47
})(window.jQuery);JavaScript
1
12
12
1
<div class="form-group parent-select-price">2
<select class="form-control select-price" data-target="plan1">3
<option value="126" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=monthly&promocode=">Monthly (Discount 10%)</option>4
<option value="126" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=quarterly&promocode=">Quarterly (Discount 10%)</option>5
<option value="112" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=semiannually&promocode=">Semi-Annually (Discount 20%)</option>6
<option value="105" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=annually&promocode=">Annually (Discount 25%)</option>7
<option value="98" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=biennially&promocode=">Biennially (Discount 30%)</option>8
<option value="70" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=triennially&promocode=" selected>Triennially (Discount 50%)</option>9
</select>10
</div>11
12
<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?
Advertisement
Answer
JavaScript
1
42
42
1
/*!2
* Pricing Table Select Price Change3
*/4
5
;(function($){6
if (!$) {7
return;8
}9
$(document).ready(function(){10
var $parent = $('.parent-select-price');11
if (!$parent.length) {12
return;13
}14
var $select = $parent.find('select.select-price[data-target]');15
if (!$select.length) {16
return;17
}18
$select.each(function() {19
$(this).parent($parent).fadeIn();20
var $target = $(this).attr('data-target');21
if (!$target) {22
return;23
}24
$target = $('[data-price='+$target+']');25
if ($target.length==0) {26
return;27
}28
var $selected = $(this).find('option:selected');29
if ($selected.length) {30
$target.html($selected.val());31
}32
33
$(this).on('change', function(e) {34
e.stopPropagation();35
$selected = $(this).find('option:selected');36
$target.html($selected.val());37
$('#link_button-31-28884').attr('href',$selected.data('url'));38
});39
});40
});41
42
})(window.jQuery);JavaScript
1
26
26
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8">5
<meta name="viewport" content="width=device-width">6
</head>7
<body>8
Price: <span data-price="plan1"></span>9
<div class="form-group parent-select-price">10
<select class="form-control select-price" data-target="plan1">11
<option value="126" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=monthly&promocode=">Monthly (Discount 10%)</option>12
<option value="126" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=quarterly&promocode=">Quarterly (Discount 10%)</option>13
<option value="112" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=semiannually&promocode=">Semi-Annually (Discount 20%)</option>14
<option value="105" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=annually&promocode=">Annually (Discount 25%)</option>15
<option value="98" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=biennially&promocode=">Biennially (Discount 30%)</option>16
<option value="70" class="cycle" data-url="https://example.com/cart.php?a=add&pid=160&billingcycle=triennially&promocode=" selected>Triennially (Discount 50%)</option>17
</select>18
</div>19
20
<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>21
22
23
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>24
25
</body>26
</html>