CODEWITHSUNDEEP
jquery
Mike Muller
Mike Muller

Reputation: 2297

Passing Data from one page to another using jQuery

I need to formulate a url string from data on a checkout page. I need to take all the product codes, quantities and prices from items in a cart and create a string for use in affiliate tracking. This string needs to be rendered on the checkout page. Here's the html structure.

<span class="productCodeID">
<div class="productitemcell">123456</div>
<div class="productitemcell">789123</div>
</span>
<span class="productQuantityID">
<div class="productitemcell"><input type="text" value="3"></div>
<div class="productitemcell"><input type="text" value="1" ></div>
</span>
<span class="productPriceID">
<div class="productitemcell">$15.00</div>
<div class="productitemcell">$19.50</div>
</span>

What I need to build is this:

&skulist=123456,789123&pricelist=15.00,19.50&quantitylist=3,1

This string needs to be passed to the confirmation page. Just looking for a little guidance on how to accomplish this. Thanks in advance!

Upvotes: 1

Views: 5418

Answers (3)

diewland
diewland

Reputation: 1915

I query html elements and concat their value to String.

<input type="button" value="nextPage" onclick="nextPage();">
<script type="text/javascript">
    function nextPage(){
        // productCode
        var qs = '&skulist=';
        $.each($('span.productCodeID div'), function(){
            qs += $(this).html()+',';
        });
        qs = qs.substr(0, qs.length-1);

        // price
        qs += '&pricelist='
        $.each($('span.productPriceID div'), function(){
            qs += $(this).html().substr(1)+',';
        });
        qs = qs.substr(0, qs.length-1);

        // quantity
        qs += '&quantitylist='
        $.each($('span.productQuantityID div input'), function(){
            qs += $(this).val()+',';
        });
        qs = qs.substr(0, qs.length-1);

        // jump to nextPage
        location.href = 'nextpage.html' + qs;
    }
</script>

Upvotes: 0

casablanca
casablanca

Reputation: 70701

function buildList(items, name) {
  var values = [];
  items.each(function() {
    values.push(this.value || $(this).text());
  });
  return name + '=' + values.join(',');
}

var result = [
  buildList($('.productCodeID > .productitemcell'), 'skulist'),
  buildList($('.productQuantityID > .productitemcell > input'), 'quantitylist'),
  buildList($('.productPriceID > .productitemcell'), 'pricelist')
];

var string = result.join('&');

Working example on JSBin

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

You could use something like this (verbose)

var skulist = [], pricelist = [], quantitylist = [];

 $('.productCodeID .productitemcell').each(function(){
 skulist.push( $(this).text() );
});
$('.productQuantityID .productitemcell input').each(function(){
 pricelist.push( $(this).val() );
});
$('.productPriceID .productitemcell').each(function(){
  quantitylist.push( $(this).text().replace('$','') );
});

query = '&skulist=' + skulist.join(',') +
    '&pricelist=' + pricelist.join(',') +
    '&quantitylist=' + quantitylist.join(',');

Example code at http://www.jsfiddle.net/gaby/792xP/

Upvotes: 0

Related Questions