Question

我正在尝试将函数的结果放入html表单字段中，以便可以通过Post方法进行传递。该函数运行良好，但是，我似乎无法将值传递到下一页。我如何从函数中获取值到中，以便在文件重定向后可以检索它？我看了看。

更新：我将更改为隐藏的输入字段。不工作。因此，我将其包裹在LABEL中，然后该函数起作用。但是，我仍然无法获得价值。我在做什么错了？

最终更新：我根据下面的Barmar进行了更改，并且运行良好。查看已检查为最佳答案的答案。

HTML：

<dl>
 <dt>
  <div label id="mustcheck"><label for="cat1">1</label>
  <input type="checkbox" name="cat1" id="cat1" class="categories" value="checkbox" onclick="get1()" />
 </dt>

 <dt>
  <label for="cat2">2</label>
  <input type="checkbox" name="cat2" id="cat2" class="categories" value="checkbox" onclick="get2()" />
 </dt>

 <dt>
  <label for="cat3">3</label>
  <input type="checkbox" name="cat3" id="cat3" class="categories" value="checkbox" onclick="get3()" />
 </dt>

 <dt>
  <label for="cat4">4</label>
  <input type="checkbox" name="cat4" id="cat4" class="categories" value="checkbox" onclick="get4()" />
 </dt>

 <dt>
  <label for="cat5">5</label>
  <input type="checkbox" name="cat5" id="cat5" class="categories" value="checkbox" onclick="get5()" />
 </dt>  

Price: <strong>$<span name="total-price" id="total-price">0</span></strong>

<input type="submit" value="Subscribe" id="subscribe" name="subscribe" onclick=""/>

脚本：

<script>
 var pacs = document.getElementsByClassName("categories");

 function attachEventListeners() {
    for (var i = 0; i < pacs.length; i++) {
       console.log('looping');
       pacs[i].addEventListener('change', function (e) {
          var totalPrice = calculatePrice();
          document.getElementById('total-price').innerHTML = totalPrice;
       });
    }
 }

 function calculatePrice() {
    var pricePerCheckbox = 3.00;  // $3.00
    var totalChecked = 0;
    for (var i = 0; i < pacs.length; i++) {
       if (pacs[i].checked) {
           totalChecked++;
       }
    }

    var Totals = totalChecked * pricePerCheckbox;
       return Totals;
    }

     attachEventListeners();
</script>

我尝试过：

<body onload="calculatePrice()">
Price: <strong>$<input name="total-price-view" id="total-price-view" 
value="return calculatePrice()"></strong></span>

我也尝试过：

document.getElementById('total-price-view').value = Totals;

Answer 1

当您分配给document.getElementById('total-price').innerHTML = totalPrice;时，您将删除隐藏的输入。如果<label>与可见输入字段没有关联，则不需要。您应该将其设置为，但要从其中删除隐藏的输入。

然后，您还需要分配隐藏输入的值。

您还具有错误的HTML元素嵌套。您有<label>，但以</label>而不是</label>

结尾

var pacs = document.getElementsByClassName("categories");

function attachEventListeners() {
  for (var i = 0; i < pacs.length; i++) {
    console.log('looping');
    pacs[i].addEventListener('change', function(e) {
      var totalPrice = calculatePrice();
      document.getElementById('total-price').innerHTML = document.getElementById("total-price-view").value = totalPrice;
    });
  }
}

function calculatePrice() {
  var pricePerCheckbox = 3.00; // $3.00
  var totalChecked = 0;
  for (var i = 0; i < pacs.length; i++) {
    if (pacs[i].checked) {
      totalChecked++;
    }
  }
  var Totals = totalChecked * pricePerCheckbox;
  return Totals;
}

attachEventListeners();

<dl>
  <dt><label for="cat2">2</label><input type="checkbox" name="cat2" id="cat2" class="categories" value="checkbox" onclick="get2()" /></dt>
  <dt><label for="cat3">3</label><input type="checkbox" name="cat3" id="cat3" class="categories" value="checkbox" onclick="get3()" /></dt>
  <dt><label for="cat4">4</label><input type="checkbox" name="cat4" id="cat4" class="categories" value="checkbox" onclick="get4()" /></dt>
  <dt><label for="cat5">5<input type="checkbox" name="cat5" id="cat5" class="categories" value="checkbox" onclick="get5()" /></div></dt>
</dl>

Price: <strong>$<span name="total-price" id="total-price">0</span></strong>
<input type="hidden" name="total-price-view" id="total-price-view" value="">

<input type="submit" value="Subscribe" id="subscribe" name="subscribe" onclick="" />

Answer 2

做两个要素。一藏一跨。

HTML更改：

 Price: <strong>$<span name="total-price" id="total-price">0</span></strong>
    <input type="hidden" name="total-price-view" id="total-price-view" value="">

JavaScript更改：

var pacs = document.getElementsByClassName("categories");

function attachEventListeners() {
  for (var i = 0; i < pacs.length; i++) {
    console.log('looping');
    pacs[i].addEventListener('change', function(e) {
      var totalPrice = calculatePrice();
      document.getElementById('total-price').innerHTML = totalPrice
    document.getElementById("total-price-view").value = totalPrice;
    });
  }
}

如何将函数的结果放入和HTML表单元素

2 个答案: