html表单不激发javascript

html form does not fire javascript

本文关键字：javascript 表单 html 更新时间：2023-09-26

我有以下表单和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>

这里有一篇很好的博客文章，介绍了为什么要放弃使用内联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"
    });
});

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

代码中的一点更改而不是req = initRequest();，只需调用initRequest()

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

initRequest()不返回任何值。