CODEWITHSUNDEEP
javascripthtml
Tzvetomir
Tzvetomir

Reputation: 1

html form does not fire javascript

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.

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+"&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");
  }
}
<form name="addToShoppingBag" id="addToShoppingBag" >
  <input type="hidden"
         form="addToShoppingBag"
         id="selectedProductRef"
         name="selectedProductRef"
         value="${selectedCart.productReference}">
  <input type="button"
         form="addToShoppingBag"
         name="addToCart"
         id="addToCart"
         onclick="addProductToCart()"
         class="css-button primary"                         
         value="ADD TO SHOPPING BAG">
</form>

Upvotes: 0

Views: 133

Answers (3)

Pradeep Kr Kaushal
Pradeep Kr Kaushal

Reputation: 1546

A little change in your code instead of req = initRequest(); just call initRequest() 

  var size = document.getElementById("selectedProductSize");
  initRequest();
  req.open("POST", url, true);

initRequest() does not return any value.

Upvotes: 0

zacran
zacran

Reputation: 865

Here's a nice blog post on why to move away from using inline javascript.

You might want to consider using jQuery as a way to facilitate going to a more event-driven scripting approach. It also makes async requests pretty straight-forward with its $.ajax() method.

Here's your addProductToCart() in jQuery format:

$('body').on('click', '#addToCart', ({
  var url = "/addToCart";
    $.ajax({
            type: "POST",
            url: url,
            data: '{selectedProductRef: "'+ $('#selectedProductRef').val() + '", selectedProductSize:"' + $('#selectedProductSize').val() + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json"
    });
});

Upvotes: 1

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

    var req;

    function addProductToCart(){
      var url = "/addToCart";
      var productReference = document.getElementById("selectedProductRef");
   productReferenceValue =productReference ;
   var size = document.getElementById("selectedProductSize");
    sizeValue=size .value;

      rm = initRequest();
      rm.open("POST", url, true);
      //req.onreadystatechange = callback;
      rm.send("selectedProductRef="+productReferenceValue +"&selectedProductSize="+size.sizeValue);
    }

    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
       return new XMLHttpRequest();
      }
      else if (window.ActiveXObject){
        // code for IE6, IE5
       return  new ActiveXObject("Microsoft.XMLHTTP");
      }
    }

<!-- language: lang-html -->

    <form name="addToShoppingBag" id="addToShoppingBag" >
      <input type="hidden"
             form="addToShoppingBag"
             id="selectedProductRef"
             name="selectedProductRef"
             value="${selectedCart.productReference}">
      <input type="button"
             form="addToShoppingBag"
             name="addToCart"
             id="addToCart"
             onclick="addProductToCart()"
             class="css-button primary"                         
             value="ADD TO SHOPPING BAG">
    </form>

<!-- end snippet -->

Upvotes: 0

Related Questions