CODEWITHSUNDEEP
javascriptjquery
Mr T
Mr T

Reputation: 1000

Updating then displaying a variable during jQuery .submit function

On page load I am setting:

var qty = 1;

Then, within the page, the user chooses a product & selects a quantity which is captured as the variable clicks.

I wish to then click a button#addToInventory which will update the qty variable & display it in the console. I am attempting this as follows:

$("#addToInventory").submit(function(event){qty = clicks;console.log(" QTY: " + qty );})

This does not work (the console displaying a qty of 1 regardless of the set value, however immediately after clicking the button, if I then manually type console.log(" QTY: " + qty ) I see the correct qty as set in the console.

I have tried to delay the console.log as follows, but this does not work either:

$("#addToInventory").submit(function(event){qty = clicks;setTimeout(function (){console.log( " QTY: " + qty );}, 1000);})

--EDIT--

The above is a simplified sample of the production code which is as follows:

$.ajax(settings).done(function(response) {
    var output = "";
    for (i in response.Products) {
        var productID = response.Products[i].ProductId;
        var name = response.Products[i].Name;
        var imagePath = response.Products[i].ImagePath;
        var EAN = response.Products[i].EANBarcode;
        var price = response.Products[i].PriceDescription;
        var offer = response.Products[i].OfferPromotion;
        var offerValid = response.Products[i].OfferValidity;
        var qty = 0;
        output += "<div class='uk-width-medium-1-4'> <div class='md-card'> <div class='md-card-head uk-text-center uk-position-relative'> <div class='uk-badge uk-badge-danger uk-position-absolute uk-position-top-left uk-margin-left uk-margin-top'>" + price + "</div><img class='md-card-head-img' src='" + imagePath + "'/> </div><div class='md-card-content'> <h4 class='heading_c uk-margin-bottom'>" + name + "<span class='sub-heading'>SKU: " + EAN + "</span></h4> <p>" + offer + "</p><p><i>" + offerValid + "</i></p><div align='center'><button data-uk-modal=\"{target:'#modal_" + productID + "'}\" class=\"md-btn md-btn-flat md-btn-flat-primary\" >ADD TO INVENTORY</button><div class=\"uk-modal\" id=\"modal_" + productID + "\"> <div class=\"uk-modal-dialog\"> <div class='uk-modal-header'> <h3 class='uk-modal-title md-card-toolbar-heading-text'><i class='md-icon material-icons'>&#xE254;</i> QTY To Add</h3> </div><p class='uk-text-left'>How many <i><b>" + name + "</b></i> do you want to add to your home inventory : <br></p><div class='uk-text-center'> <form id='addToInventory_" + productID + "'> </p><br><h2> <table class='uk-table uk-table-popup uk-table-hover-popup'> <tbody> <td class='uk-text-center' type='button' onClick='clicks_" + productID + "--;updateClickCount_" + productID + "();' id='push-'><i class='md-icon material-icons'>&#xE15B;</i></td><td class='uk-text-center' id='clickCount_" + productID + "'>1</td><td class='uk-text-center' type='button' onClick='clicks_" + productID + "++;updateClickCount_" + productID + "();' id='push+'><i class='md-icon material-icons'>&#xE145;</i></td></tbody> </table> </h2> <br></p><button id='addToInventory_" + productID + "-submit' type='submit' class='md-btn md-btn-flat md-btn-flat-primary'>ADD TO INVENTORY</button></form><scr" + "ipt type=\"application/javascript\">var clicks_" + productID + " = 1;var minimum = 1;function updateClickCount_" + productID + "() {if (clicks >= minimum) {document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";} else {clicks_" + productID + " = 1;document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";}}  $(\"#addToInventory_" + productID + "\").submit(function(event){qty = 0;console.log('QTY IS: '+qty+' CLICKS Are: '+clicks_"+productID+");qty = clicks_"+productID+";setTimeout(function (){console.log(\""+ name + " QTY: " + qty +"\");}, 1000);})  </scr" + "ipt></div></div></div></div></div></div></div>";   
    }
    $("#allResults").html(output);
    $("#searchTerm").html(searchTerm);
});

});

Upvotes: 0

Views: 56

Answers (1)

andre mcgruder
andre mcgruder

Reputation: 1520

Your qty will always be one because you are creating the variable and assigning it to be 0 inside of the for loop. Every time it runs the for loop a new qty var is created an set to 0 then it is given the 1 value for the iteration variable (i). So the fact that qty is being instantiated in the loop it will never increase.

If you move the qty variable out of the for loop it should work.

var qty = 0;
For (.............) {

// your code here

}

Upvotes: 1

Related Questions