“提交并显示”复选框值而不显示“提交”按钮

Question

我有一种电子商务，在结账页面上显示价格。

在同一页中，我有一些“服务”要添加到最终的价格，这是用复选框显示的。

现在我想，当我点击一个复选框，价格将更新的总和。

如下所示：“价格”+“service_1”+“service_2”=总价

我希望服务将动态地显示在另一个div中。

我的问题是，我不知道如何更新价格，并显示在一个div没有提交按钮。

​

<form id="services" name="services-form" data-name="services Form">
  <div class="checkbox-field w-checkbox"><input type="checkbox" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="checkbox" class="simple-text white w-form-label">design pack</label>22500 €</div>
  <div class="checkbox-field ew w-checkbox"><input type="checkbox" id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="checkbox-2" class="simple-text white w-form-label">security</label>2000 €</div>
  <div class="checkbox-field 2 w-checkbox"><input type="checkbox" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="checkbox-3" class="simple-text white w-form-label">wellness pack</label>5000 €</div>
  <div class="checkbox-field 4 w-checkbox"><input type="checkbox" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="checkbox-3" class="simple-text white w-form-label">box auto</label>1000 €</div>
</form>

<div class="paragraph" id="price">
  <?php echo $price;?> €</div>
<div id="display_services" class="simple-text maiusc prova">services:<br>design pack<br>dynamically adding the services...</div>

​

Answer 1

将值添加到复选框中--还确保您的ID是正确的，并且for="ID“与复选框匹配。您有一些不一致的地方--例如，每个标签都有错误的" for“，您需要使用<label for="someId"。

​

var serverPrice = parseInt(document.getElementById("price").innerText); // initial price
var checks = document.querySelectorAll("input[id^=service]"); // all id="service..." boxes
for (var i=0;i<checks.length;i++) {
  checks[i].onclick=function() {
    var services = [], total = 0;
    for (var i=0;i<checks.length;i++) { // again we loop
      if (checks[i].checked) { // a ternary is no longer useful
        total += +checks[i].value;
        services.push(document.querySelector("[for="+checks[i].id+"]").innerHTML); // get the label text
      }
    }
    document.getElementById("price").innerText=(serverPrice+total)+"€";
    document.getElementById("display_services").innerHTML="services: "+services.join(", ");
  }
}

<form id="services" name="services-form" data-name="services Form">
  <div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
  <div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
  <div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
  <div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>

<div class="paragraph" id="price">
  200 €</div>
<div id="display_services" class="simple-text maiusc prova">services:<br>design pack<br>dynamically adding the services...</div>

​

Answer 2

您可以使用Ajax。AJAX的主要特点是它使网页速度更快，ajax只允许重新加载网页的重要部分，不完整的网站或网页。