title: html form does not fire javascript
body: <p>I have following form and javascript which is not activated on submit. I can not understand where is the problem so that the javascript is not fired by pressing the button. The script is included in the html of course and the path is correct.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var req;
  
  function addProductToCart(){
    var url = "/addToCart";
    var productReference = document.getElementById("selectedProductRef");
    var size = document.getElementById("selectedProductSize");
    req = initRequest();
    req.open("POST", url, true);
    //req.onreadystatechange = callback;
    req.send("selectedProductRef="+productReference.value+"&amp;selectedProductSize="+size.value);
  }
  
  function callback(){
    if (req.readyState == 4) {
      if (req.status == 200) {
        parseMessages(req.responseText);
      }
    }
  }
  
  function initRequest(){
    if (window.XMLHttpRequest){
      // code for IE7+, Firefox, Chrome, Opera, Safari
      req = new XMLHttpRequest();
    }
    else if (window.ActiveXObject){
      // code for IE6, IE5
      req = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="addToShoppingBag" id="addToShoppingBag" &gt;
    &lt;input type="hidden"
           form="addToShoppingBag"
           id="selectedProductRef"
           name="selectedProductRef"
           value="${selectedCart.productReference}"&gt;
    &lt;input type="button"
           form="addToShoppingBag"
           name="addToCart"
           id="addToCart"
           onclick="addProductToCart()"
           class="css-button primary"                         
           value="ADD TO SHOPPING BAG"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>