Question

我有一个带有一堆number字段的表单，所有这些字段用于通过php添加到彼此的目的。唯一的问题是，对于实际提交的数字并使php功能正常工作，我必须单击重新加载页面的submit按钮。虽然这确实有效，但它有点烦人，它必须重新加载，同时它从实际表格中删除数字，因此用户无法看到他/她输入数字的位置。

我知道可以通过某种方式使其自动提交，但是每次用户输入内容时都可以使php函数获取表单信息，以便新的total sum自动更新，因此无需重新加载？

我在同一个脚本中有我的php和html，但对于这个问题，我将它们分成两部分。

PHP部分

    <?php

$amount_s_bp = $_POST['amountSmallBP'];
$amount_m_bp = $_POST['amountMedBP'];
$amount_l_bp = $_POST['amountLargeBP'];
$amount_xl_bp = $_POST['amountXLBP'];
$amount_s_wp = $_POST['amountSmallWP'];
$amount_m_wp = $_POST['amountMedWP'];
$amount_l_wp = $_POST['amountLargeWP'];
$amount_xl_wp = $_POST['amountXLWP'];
$amount_s_bs = $_POST['amountSmallBS'];
$amount_m_bs = $_POST['amountMedBS'];
$amount_l_bs = $_POST['amountLargeBS'];
$amount_xl_bs = $_POST['amountXLBS'];
$amount_s_bt = $_POST['amountSmallBT'];
$amount_m_bt = $_POST['amountMedBT'];
$amount_l_bt = $_POST['amountLargeBT'];
$amount_xl_bt = $_POST['amountXLBT'];
$shirt_price = 150;

$amount_total = $amount_s_bp + $amount_m_bp + $amount_l_bp + $amount_xl_bp + $amount_s_wp + $amount_m_wp + $amount_l_wp + $amount_xl_wp + $amount_s_bs + $amount_m_bs + $amount_l_bs + $amount_xl_bs + $amount_s_bt + $amount_m_bt + $amount_l_bt + $amount_xl_bt;
$price_total = $amount_total * $shirt_price;

?>

表格部分

正如你所看到的，我有一堆number输入，然后最后我有一个＆＃34;总数＆＃34;应使用<?php echo $price_total; ?>和<?php echo $amount_total; ?>显示总和的区域。

<form action="index.php" method="post" id="orderForm" onsubmit="return checkCheckBoxes(this);">
<div class="row">
<div class="col-xs-6">
<div class="bpShirtDesign">
    <span id="bpShirtOformT">Sort Polka</span><br>

    <span id="sBP">Small</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountSmallBP" placeholder="Antal"/>
    </div>

    <span id="mP">Medium</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountMedBP" placeholder="Antal"/>
    </div>

    <span id="lBP">Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountLargeBP" placeholder="Antal"/>
    </div>

    <span id="xlBP">X-Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountXLBP" placeholder="Antal"/>
    </div>
</div>
</div>
<div class="col-xs-6">
<div class="wpShirtDesign">
    <span id="bpShirtOformT">Hvid Polka</span><br>

    <span id="sBP">Small</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountSmallWP" placeholder="Antal"/>
    </div>

    <span id="mP">Medium</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountMedWP" placeholder="Antal"/>
    </div>

    <span id="lBP">Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountLargeWP" placeholder="Antal"/>
    </div>

    <span id="xlBP">X-Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountXLWP" placeholder="Antal"/>
    </div>
</div>
</div>
</div>

<div class="row">
<div class="col-xs-6">
<div class="bsShirtDesign">
    <span id="bpShirtOformT">Bla Stribet</span><br>

    <span id="sBP">Small</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountSmallBS" placeholder="Antal"/>
    </div>

    <span id="mP">Medium</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountMedBS" placeholder="Antal"/>
    </div>

    <span id="lBP">Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountLargeBS" placeholder="Antal"/>
    </div>

    <span id="xlBP">X-Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountXLBS" placeholder="Antal"/>
    </div>
</div>
</div>
<div class="col-xs-6">
<div class="btShirtDesign">
    <span id="bpShirtOformT">Bla Tattersall</span><br>

    <span id="sBP">Small</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountSmallBT" placeholder="Antal"/>
    </div>

    <span id="mP">Medium</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountMedBT" placeholder="Antal"/>
    </div>

    <span id="lBP">Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountLargeBT" placeholder="Antal"/>
    </div>

    <span id="xlBP">X-Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountXLBT" placeholder="Antal"/>
    </div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="bgTotals">
<input type="submit" value="Submit" id="submitValues">
<span id="totalAmount" class="h3">I alt antal = </span><?php echo $amount_total; ?><br>
<span id="totalPrice" class="h3">I alt pris =  </span> <?php echo $price_total; ?><span> DKK</span>
</div>
</div>
<div class="col-md-3">
</div>
</div>

</form>

Answer 1

您不需要服务器端脚本来进行此类处理。只是阻止表单提交：

<button type="button">Button</button>

然后，使用javascript，检索每个表单的值并执行计算。

//Gets the value
var value = document.getElementById('myid')
//Repeat that last line until all values are retrieved
...
//Make your calculations
var result = value + value2 //... etc

//Display your result
document.getElementById('resultid').textContent = result;

虽然，如果你要总结很多元素，那么给这些元素赋予相同的类可能会更好，所以你可以这样做：

var elements = document.getElementsByClassName('myclassname');
var sum = 0;

for (var i=0, max=elements.length; i < max; i++) {
    sum = sum + parseInt(elements.item(i).textContent);
}

更新

要为每个input添加一个事件监听器，您可以迭代每个元素，或者您可以将监听器关联到父元素，如下所示：

document.getElementById('myParentElement').addEventListener('input',   function() {
 return update();
}, false);

你应该抛出所有从输入中检索值的代码，执行计算并更新update()函数中的DOM，每次输入更改时都会调用它。

Answer 2

首先，您在所有输入上都有ID“金额”。这不起作用，每页只能使用一次id。因此，找出一个使这些id唯一的约定。像tc或其他什么。另外，从表单标记中删除id='field1-id'和action属性。此时它们将不再需要。

然后，您可以使用jQuery和AJAX调用来执行您要查找的内容。类似的东西：

method

请注意，这段代码是未经测试的，并且非常仓促地编写，但它应该让您大致了解如何完成您所追求的目标。

自动提交表单信息，无需重新加载页面

PHP部分

表格部分

2 个答案:

更新