Question

我有以下表单和javascript，在提交时未激活。我无法理解问题出在哪里，因此按下按钮不会触发javascript。该脚本当然包含在html中，路径正确。

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>

Answer 1

Here's一篇关于为什么要放弃使用内联javascript的好文章。

您可能需要考虑使用jQuery作为一种促进更加事件驱动的脚本编写方法的方法。它还使用$.ajax()方法使异步请求非常简单。

这里是jQuery格式的addProductToCart()：

$('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"
    });
});

Answer 2

    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 -->

Answer 3

您的代码稍有变化，而不是req = initRequest();只需调用initRequest()

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

initRequest()不会返回任何值。

html表单不会激活javascript

3 个答案: