Question 35601 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I need hep with modifying anchor tag parameters based on the checkbox selection – Jquery

I am trying to add the value of selected checkbox to anchor tag parameter "product-code" and "product-quantity". For example if someone click the first checkbox the product code parameter will be something like product-code="90;1" and product-quantity="1;1". And if someone also check the second checkbox the product code parameter will be like product-code="90;1;2" and product-quantity="1;1;1". Same for the third parameter. Can someone help me with this how I can get this done with the help of jquery?

<input type="checkbox" name="Apple" value="1">
<input type="checkbox" name="Banana" value="2">
<input type="checkbox" name="Orange" value="3">

<a href="#buy" class="avangate_button btn btn-primary" product-code="90" product-quantity="1">Order Now!</a>
Tags:

3

Answers


  1. 0

    its simple you just create two variables e.g productCode & productQuantity and place it anchor tag . Create a function to set upper variables value and execute this function on "onChange" event of checkbox .

    here is the code :

    <input type="checkbox" name="Apple" value="1">
<input type="checkbox" name="Banana" value="2">
<input type="checkbox" name="Orange" value="3">

<a href="#buy" class="avangate_button btn btn-primary" product-code="90" 
product- 
quantity="1">Order Now!</a>

var productCode = "90";
var productQuantity = "1";

$("input[type=checkbox]").change(function(val){
productCode = productCode + ";" + val;
productQuantity = productQuantity + ";" + val;
});
    Login or Signup to reply.
  2. 0

    If you really want to work with the attribute product-code then the following snippet should do the trick:

    const a=document.querySelector("a");
const cbs=[...document.querySelectorAll("input[type=checkbox]")];
cbs.forEach(cb=>cb.addEventListener("click",ev=>{
  a.setAttribute("product-code",[90,...cbs.filter(c=>c.checked).map(c=>c.value)].join(";"));
  console.log(a);
}));
    <input type="checkbox" name="Apple" value="1">
<input type="checkbox" name="Banana" value="2">
<input type="checkbox" name="Orange" value="3">

<a href="#buy" class="avangate_button btn btn-primary" product-code="90" 
product- 
quantity="1">Order Now!</a>

    Please note:

    According to the MDM web docs the <a> element does not actually support an attribute product-code. You should therefore rather use something like data-product-code instead.

    Login or Signup to reply.
  3. 0

    This solution will work for you.

    jQuery(document).ready(function($){
            $('input[type=checkbox]').on('change',function(){
                let newProductCode = defaultProductCode = $('.avangate_button').attr('product-code').split(';')[0];
                let newProductQty = defaultProductQty = $('.avangate_button').attr('product-quantity').split(';')[0];   

                $('input[type=checkbox]').each(function( index ) {
                    if($(this).is(':checked')){
                        newProductQty = newProductQty + ";" + 1;
                        newProductCode = newProductCode + ";" + $(this).val();
                    }
                });
                $('.avangate_button').attr('product-code',newProductCode);
                $('.avangate_button').attr('product-quantity',newProductQty);
            });
        });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Apple" value="1">
    <input type="checkbox" name="Banana" value="2">
    <input type="checkbox" name="Orange" value="3">
    <a href="#buy" class="avangate_button btn btn-primary" product-code="90" product-quantity="1">Order Now!</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search