Javascript - Uncaught TypeError: Cannot read property 'value' of undefined

Question

I am currently converting my friends website, as it's not "mobile friendly" by changing his current frontend into a bootstrap front end.

I've been working on a test site which is just a sub-domain on the same server.

This is the old website: http://bit.ly/1hurTNB

This is the new website: http://bit.ly/1hus0IV

But I've encountered a problem with the shopping cart page.

The shopping cart no longer recalculates its total when I press the recalculate button. It works fine on the old website. I dont know what I've changed to break it?

I've debugged the JavaScript using Chrome Dev Tools (F12) and line no 150 of order.php has this error:

Uncaught TypeError: Cannot read property 'value' of undefined

And this is the line of offending code:

if (document.forms[1].elements["qty" + count].value == "" ||
    document.forms[1].elements["qty" + count].value == 0) {
        document.forms[1].elements["qty" + count].value = 0;
        showInCart = false;
}

I don't understand why I am getting this error? Googling around gives vague answers. Which is why I am here on StackOverflow.

BTW if you want to recreate my problem you'll need to:

go to the homepage
choose a product category from the grid of pictures e.g. "get costume ideas..."
add an item to the basket.
once the page posts to Order.php Change its Quantity.
click the recalculate button.

Why is the Javascript no longer picking up the values from the quantity fields???

Any help is greatly appreciated.

Here is the function in its entirety:

<script type="text/javascript">
    function recalculateTotal(){        
        var lineTotal = 0;
        var subTotal = 0;
        var total = 0;
        var hiddenStuff = "";
        var count;
        var i;
        var orderURL="register.php?orderDetails=";

        items = new Array(<?=$itemList?>);                  

        for (i in items){
            var cNum = 0;
            var pNum = 0;
            var qNum = 0;

            count = items[i];

            cNum = (count * 4) + 1;

            var showInCart = true;                  

            // the next line is broken!
            if (document.forms[1].elements["qty" + count].value == "" || document.forms[1].elements["qty" + count].value == 0){
                document.forms[1].elements["qty" + count].value = 0;
                showInCart = false;
            }           

            lineTotal = document.forms[1].elements["qty" + count].value * document.forms[1].elements["price" + count].value;                
            document.getElementById("lTotal" + count).innerHTML = formatCurrency(lineTotal);
            subTotal += lineTotal;

            if (hiddenStuff == ""){
                hiddenStuff = hiddenStuff + showInCart + ":" + document.forms[1].elements["productId" + count].value + ':' + document.forms[1].elements["qty" + count].value;
            }else{
                hiddenStuff = hiddenStuff + ":" + showInCart + ":" + document.forms[1].elements["productId" + count].value + ':' + document.forms[1].elements["qty" + count].value;
            }

        }           

        document.getElementById("subTotal").innerHTML = formatCurrency(subTotal);
        for (var j in delivery_prices){
            if (subTotal >= delivery_prices[j].total_amount_start && subTotal <= delivery_prices[j].total_amount_end){
                document.getElementById('delivery').innerHTML = delivery_prices[j].delivery_price;
                total = subTotal + delivery_prices[j].delivery_price;
            }
        }
        document.getElementById("total").innerHTML = formatCurrency(total);
        document.forms[1].elements["orderDetails"].value = hiddenStuff;
        orderURL = orderURL + hiddenStuff;
        var myrequest = $.ajax({
                url: orderURL,
                type: "get",
            });
        myrequest.done(function (response){
            updateBasket();
        });

    }
</script>

Thanks very much.

Do not use `for in` loops for arrays, use the array's `forEach` method or a regular for loop — Patrick Evans, Sep 20 '15 at 09:44
@PatrickEvans and any explanation as to why would that be, please? — Zathrus Writer, Sep 20 '15 at 09:46
Give the form an ID and use that instead of the forms collection - also you have jQuery. So use it. — mplungjan, Sep 20 '15 at 09:59
@ZathrusWriter : http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea — mplungjan, Sep 20 '15 at 10:01

score 2 · Accepted Answer · answered Sep 20 '15 at 09:59

This error arises when the elements are not either declared or not loaded on the DOM. You can do these things to solve this problem :

1.Wrap every thing inside a function and attach it to the window.onload. Like this :

<script type = "text/javascript">
function foo(){
.....//Your JavaScript code here
}

window.onload = foo;
</script>

Check whether all the elements are present in the HTML page or not.

I am not sure that this is the problem, but I think its worth mentioning. Change the line no.150 to :

if (document.forms[0].elements["qty" + count].value == "" ||
    document.forms[0].elements["qty" + count].value == 0) {
    document.forms[0].elements["qty" + count].value = 0;
    showInCart = false;
}

In the above code snippet I've changed the occurrence of 1 with 0. Because JavaScript starts counting from 0 not 1. So if you want to access the content of first form then use this point otherwise ignore this point.

your suggestion worked perfectly. Changing document.forms from [1] to [0] fixed the problem. I really appreciate your help. Thank you very much. — LordLiverpool, Sep 21 '15 at 09:22
@LordLiverpool You're welcome!!! As you said, this answer helped, then you should accept this answer. Click on the tick mark below my answer's votes to do so. — Arjun, Sep 21 '15 at 09:28

score 1 · Answer 2 · answered Sep 20 '15 at 09:50

1

You'll solve the problem changing document.forms[1] into document.forms[0]

The problem is that the position of the form has changed. Put forms[0] and it will work.

Aitor

answered Sep 20 '15 at 09:50

Aitor Aznar Álvarez

499
4
14

Alexandr Lazarev · Answer 3 · 2015-09-20T10:05:51.490

The problem is that document.forms[1] points to the form that has no qty0 element. Actually it points to your "search form". "Order form" has 0 index in the array provided by document.forms selection.

The form selection made with document.forms has ascending order. In resulted zero-based array, "0" index will point to first form, "1" index to second etc. On your old website, "search form" is rendered before "order form". That is why it works there, in its turn, on your new site the forms are switched so indexes should be changed too.

score 0 · Answer 4 · answered Sep 20 '15 at 10:07

You already have a variable that you can use.

Replace :

if (document.forms[1].elements["qty" + count].value == "" ||
document.forms[1].elements["qty" + count].value == 0) {
    document.forms[1].elements["qty" + count].value = 0;
    showInCart = false;
}

By :

if (document.forms[1].elements["qty" + i].value == "" ||
    document.forms[1].elements["qty" + i].value == 0) {
    document.forms[1].elements["qty" + i].value = 0;
    showInCart = false;
}

Javascript - Uncaught TypeError: Cannot read property 'value' of undefined

4 Answers4