pass the dynamic text input values through dynamically created button url?

Question

Hi I created the dynamic page about particular product when i click the add to cart button I want to send the textbox value> I created the page like

$(document).on('pageshow','#productdetails', function() {
    var pid = getURLParameter('pid');
    $.getJSON("http://vinoth.com/magento/api/rest/products/"+pid, function(data) {
        if (data.is_in_stock == "1") {
            var stock = "In Stock"
        }
        else {
            var stock = "Out of Stock"
        }

        //var imageurl = 'http://vinoth.com/magento/api/rest/products/'+data.entity_id+'/images'; 
        // $.getJSON(imageurl,function(result){
        //  $.each(result, function(j, k) {

        $("div[data-role='content']").append('<h4>'+data.name+'</h4><img src=' + data.image_url + ' width="100%"><br><p><strong>Description: </strong>' + data.description + '</p><span><strong>Actual Price: </strong>' + data.regular_price_with_tax + ' INR</span><br><span><strong>Special Price: </strong>' + data.final_price_with_tax + ' INR</span><br/> <span><strong>Availablity: </strong>' + stock + '</span><br><div data-role="fieldcontain"><label name="quantity"><strong>Qty: </strong></label><input type="text" name="quantity" value="" data-mini="true" data-inline="true" size="30" id="qty"/></div>').trigger('create');

        var qty = $("#qty").val();


        $("div[data-role='content']").append('<a data-role="button" data-mini="true" data-inline="true"  data-icon="plus" href="checkoutcart.html?pid=' + data.entity_id + '&quantity=' + $("#qty").val() + '" >Add to Cart</a>').trigger('create');

        //});
        // });
    });
});

how can I get the qty input value to pass the addtocart button link?

Answer 1

If I understand your issue, II think you should write a click handler for the add to cart link and then build the URL at click time so you can get the user edited quantity. Currently you are hard coding the URL to the quantity at the time you create the add to cart button.

So, when appending the link, give it an ID, and store the pid in data as Sheetal suggested:

$("div[data-role='content']").append('<a id="addtocart" data-pid="' + data.entity_id + '" data-role="button" data-mini="true" data-inline="true"  data-icon="plus" href="#" >Add to Cart</a>').trigger('create');

Then add the handler:

$('#addtocart').on('click', function(){
    var url = checkoutcart.html?pid=' + $(this).data("pid") + '&quantity=' + $("#qty").val() + '
    $.mobile.changePage( url);//  or  location.href = url;
});

If I did not understand the issue, please create a small jsFiddle that demonstrates it...

Answer 2

First ensure that qty always has a value.

please use data-* attributes do not pass values in query string.

$("div[data-role='content']").append('<a data-role="button" data-pid="' + $('#qty').val() + " data-mini="true" data-inline="true"  data-icon="plus" href="checkoutcart.html?pid=' + data.entity_id + '&quantity=' + $("#qty").val() + '" >Add to Cart</a>').trigger('create');

and on the click of Add to Cart use this to get the value of pid where required:

$(this).data('pid');