Getting data out of table using Javascript in Wordpress

Question

I'm trying to pull a list of items from a shopping cart (a table) and drop it into a WP email form. This code (almost) works - that is, I can see all of the items in the log console. But only the last item shows up in the text area of the form. So, if there's 1 item in the shopping cart, it drops into the textarea box. However if there are 2 items, the second item shows up and the first item doesn't. But I can see both items in the console log.

I'm completely lost by what's happening with the array(s). I've tried, join, concat, and converting the 'allProducts' variable to a string. Nothing changes the output. It seems like it should be simple.

I can't figure out how to combine the output so that everything drops into the textarea field of the form.

Can anyone tell me what I'm missing?

function confirmProducts() {
    var product = Array.prototype.slice.call(document.getElementById("cart").getElementsByClassName("cartLink"));
    var quantity = Array.prototype.slice.call(document.getElementById("cart").getElementsByClaseName("iquantity"));

    for (var i in product, quantity){
        var products = product[i].innerHTML;
        var quantities = quantity[i].value;
        var allProducts = quantities + " " + products;
        document.SUPPLY_PURCHASE.yourorder.value = allProducts ;
        console.log(allProducts);
    }
}

Till Arnold · Accepted Answer · 2016-06-06T12:44:25.470

0

document.SUPPLY_PURCHASE.yourorder.value = allProducts;

You are overriding the previous value of the text field here. You can use

document.SUPPLY_PURCHASE.yourorder.value += allProducts;

This will add each product to the text field. You probably want to add newlines in between the products.

document.SUPPLY_PURCHASE.yourorder.value += allProducts + "\n";

console.log does just write to the console and old log entries are not overridden. That is why you can see all products in the console.

There are a few other problems with your code. product, quantity is the same as just quantity. There is no special syntax for iterating over multiple arrays using a for in loop. The comma you use here is just a comma operator. Also for in is not the optimal loop for iterating over an array.

edited Jun 06 '16 at 12:44

answered Jun 06 '16 at 12:38

Till Arnold

561
2
11

Thank you for your help! So, would [code] var n = product.length; for (var i = 0; i < n; i++){'[/code] be a better way to loop? – kayphoonstar Jun 06 '16 at 19:14
Sorry, I'm new. . . I couldn't figure out how to add code to a comment. (The above does work too). – kayphoonstar Jun 06 '16 at 19:23
`var n = product.length` then `for (var i = 0; i>n; i++) {` – kayphoonstar Jun 06 '16 at 19:56
Yes `for (var i = 0; i < product.length; i++)` would be better. The `for in` loop has some problems. see http://stackoverflow.com/q/500504/6430127 – Till Arnold Jun 06 '16 at 19:59
Got it! Thanks again. – kayphoonstar Jun 06 '16 at 20:01
Hi @kayphoonstar if this or any answer has solved your question please consider [accepting it](http://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Till Arnold Jun 07 '16 at 18:55

score 0 · Answer 2 · answered Jun 06 '16 at 12:42

You are resetting the textarea in the loop. Capture your products in a separate variable and set textarea at the end of your loop. You will need a new line to see the list in a sensible way.

var productList = "";

for (var i in product, quantity){
var products = product[i].innerHTML;
var quantities = quantity[i].value;
var allProducts = quantities + " " + products + "\r\n";
productList += allProducts;
console.log(allProducts);
}

document.SUPPLY_PURCHASE.yourorder.value = productList ;

Thank you! I confuse myself very quickly with loops. – kayphoonstar Jun 06 '16 at 18:54 — kayphoonstar, Jun 06 '16 at 18:54

Getting data out of table using Javascript in Wordpress

2 Answers2