Replace onclick specific parameter by click on div with jQuery

Question

I'm building Custom Cart, where i show product detail on same page in Popup model with jQuery onclick, But on Popup window i also want to update product_ID on "Add to Cart" Button in onclick's first Parameter, Here is the code for demonsration:

Product Thumbnail:

<div id="product">
    <img src="http://placehold.it/250x150" />
    <input type="hidden" value="159" />
</div>

Popup Add to Cart Button

<a href="#" onclick="add_to_cart('Product_ID', 'Product_Price');">Add to Cart</a>

what i want is when i click on product <div id="product"> than the value in the hidden input is also updated on Add to Cart button with first parameter of onclick attr which is Product_ID, any help regarding this would be highly appreciable.

I'm trying to solve this issue on following fiddle link jsfiddle.net/SJP7k/14 — Umair Razzaq
– Umair Razzaq, Commented Jan 28, 2014 at 12:37
Just to note, your example above does not contain one scrap of Jquery. It's all pure JavaScript. — Liam
– Liam, Commented Jan 28, 2014 at 12:38

P.Sethuraman · Accepted Answer · 2014-01-28 12:50:43Z

2

Demo FIDDLE

Jquery

       $(document).ready(function(){
var ProductID = $('div').find('#ProductID').attr('value');
    var Price = $('div').find('#price').attr('value');

$('div').click(function (event) {
    event.preventDefault();
    $('a').attr('onclick', function (i, v) {
        v=v.replace('Product ID',ProductID);
        return v.replace('Product Price',Price);
    });
});

    });

function add_to_cart(productid,price)
{
    alert(productid+"/"+price);
}

I hope this is what you need

answered Jan 28, 2014 at 12:50

P.Sethuraman

7153 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Umair Razzaq Over a year ago

another question, what if the value of parameter is dynamic, i mean we've replaced the value of "Product Price" by matching the value string, so instead of "Product Price" there would some random value! So how can we only update specific (1st or 2nd) parameter.

Bart · Accepted Answer · 2014-01-28 12:49:11Z

0

To 'quick fix' this code, you could user something like this:

http://jsfiddle.net/SJP7k/15/

Fiddle HTML

<div id="product">
    <img src="http://placehold.it/250x150" />
    <input type="hidden" value="159" />
</div>
<br>
<br>
<a href="#" id="add" data-product="10" data-price="9.95">Add to Cart btn in popup</a>

Fiddle JS

$('#product').click(function (event) {
    event.preventDefault();
    var ProductID = $(this).find('input').attr('value');
    $('#add').data('product', ProductID);
});

$('#add').click(function () {
    alert('PRODUCT: ' + $(this).data('product') + ' PRICE: $' + $(this).data('price'));
});

answered Jan 28, 2014 at 12:49

Bart

6366 silver badges16 bronze badges

Collectives™ on Stack Overflow

Replace onclick specific parameter by click on div with jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related