Question

您好我有以下内容，我希望在确认页面上显示总数，但我无法实现此目的。

var totalPrice = $(price).val() * $(payslips-required).val();
$(total).val(totalPrice);

价格和工资单需要从表格中获取。价格乘以获得总额所需的工资单数量。

我已尝试将文档写入显示但我无法在wordpress上的联系表单7插件中执行此操作，这会导致确认页面上的信息消失。

如果可能的话，我希望它能显示内部或标签。

<div id="total">Total<span id="totalprice"></span></div>

我希望它显示span标记中的总数

非常感谢任何帮助

更新

<div id="confirm"><h2 id="myAnchor">Please verify order confirmation and proceed</h2>   <br /> <div id="total">Total<span id="totalprice"></span></div></br />   <label>Title:</label>   [title]<br />   <label>Marital Status:</label>   [marital-status]<br />   <label>First Name:</label>   [first-name]<br />   <label>Middle Name:</label>   [middle-names]<br />   <label>Last Name:</label>   [last-name]<br />   <label>Home Address:</label>   [home-address]<br />   <label>Postcode:</label>   [postcode]<br />   <label>Email:</label>   [email]<br />   <label>Contact Number:</label>   [contact-number]<br />   <label>Delivery Address:</label>   [delivery-address]<br />   <label>Postcode:</label>   [delivery-postcode]<br />   <label>Gross Annual Salary:</label>   [annual-salary]<br />   <label>Monthly NET Pay:</label>   [monthly-netpay]<br />   <label>Method of Pay:</label>   [payment-method]<br />   <label>Payslips Required:</label>   [payslips-required] £[price]<br /> <label>Years Required:</label> [years-required]<br />   <label>Day of the month you are paid:</label>   [dayof-pay] <br />   <label>Month Required:</label>   [months-required]<br />   <label>Which Payslip is required:</label>   [payslip-chosen]<br />   <label>Taxcode:</label>   [taxcode]<br />   <label>National Insuarance Number :</label>   [nh1] [nh2] [nh3] [nh4] [nh5]<br />   <label>Date of Starting job:</label>   [date-of-starting-job]<br />   <label>Payslip ref no:</label>   [payslip-ref-no]<br />   <label>Company Name:</label>   [company-name]<br />          <a href="#"  class="submit">Continue to Payment</a> <a href="javascript:fadeIn('hideme');" class="edit">Cancel/ Redo</a></div>

Answer 1

如果您使用的是jquery，则需要像

一样

$('form.wpcf7-form.payment-form').submit(function() {

    var price = isNaN(parseFloat($("#price").val())) ? 0.0 : parseFloat($("#price").val())
    var payslips = isNaN(parseFloat($("#payslips-required").val())) ? 0.0 : parseFloat($("#payslips-required").val())
    var totalPrice = price * payslips;
    $("#totalprice").val(totalPrice);

});

其次，如果您只需要javascript方式，请像这样使用

document.forms[0].onsubmit = function() {

    var price = document.getElementById("price").value;
    var payslips = document.getElementById("payslips-required").value;
    price = isNaN(parseFloat(price)) ? 0.0 : parseFloat(price);
    payslips = isNaN(parseFloat(payslips)) ? 0.0 : parseFloat(payslips);
    var totalPrice = price * payslips;
    document.getElementById("totalprice").value = totalPrice;

}

<强>更新

在您显示的html之后添加以下字段，打印该值。

<input type="hidden" id="my-price" value="[price]" />
<input type="hidden" id="my-payslips-required" value="[payslips-required]" />

然后调用脚本运行，

最后，您的代码将是，

<script>
 function CalculateTotal() {
    var price = document.getElementById("price").value;
    var payslips = document.getElementById("payslips-required").value;
    price = isNaN(parseFloat(price)) ? 0.0 : parseFloat(price);
    payslips = isNaN(parseFloat(payslips)) ? 0.0 : parseFloat(payslips);
    var totalPrice = price * payslips;
    document.getElementById("totalprice").value = totalPrice;
 }
</script>

尝试以上方法。

Answer 2

如果您在计算totalPrice时遇到问题，或者您只是刚接触JavaScript并且不知道如何在span中输入值，我会感到困惑。如果是后者，这是一个非常简单的解决方案......

document.getElementById("totalprice").innerHTML = totalPrice;

在wordpress中显示javascript变量

2 个答案: