title: Javascript - Uncaught TypeError: Cannot read property 'value' of undefined
body: <p>I am currently converting my friends website, as it's not "mobile friendly" by changing his current frontend into a bootstrap front end.</p>
  
  <p>I've been working on a test site which is just a sub-domain on the same server.</p>
  
  <p>This is the old website: <a href="http://bit.ly/1hurTNB" rel="nofollow">http://bit.ly/1hurTNB</a> </p>
  
  <p>This is the new website: <a href="http://bit.ly/1hus0IV" rel="nofollow">http://bit.ly/1hus0IV</a> </p>
  
  <p>But I've encountered a problem with the shopping cart page.</p>
  
  <p>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?</p>
  
  <p>I've debugged the JavaScript using Chrome Dev Tools (F12) and line no 150 of order.php has this error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'value' of undefined 
  </code></pre>
  
  <p>And this is the line of offending code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>I don't understand why I am getting this error? Googling around gives vague answers. Which is why I am here on StackOverflow.</p>
  
  <p>BTW if you want to recreate my problem you'll need to:</p>
  
  <ol>
  <li><p>go to the homepage</p></li>
  <li><p>choose a product category from the grid of pictures e.g. "get costume ideas..."</p></li>
  <li><p>add an item to the basket.</p></li>
  <li><p>once the page posts to Order.php Change its Quantity.</p></li>
  <li><p>click the recalculate button.</p></li>
  </ol>
  
  <p>Why is the Javascript no longer picking up the values from the quantity fields???</p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p>Here is the function in its entirety:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      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(&lt;?=$itemList?&gt;);                  
  
          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 &gt;= delivery_prices[j].total_amount_start &amp;&amp; subTotal &lt;= 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();
          });
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks very much.</p>