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

Question

我有一个包含一堆 number 的表单字段，所有这些字段的目的都是通过 php.ini 相互添加。唯一的问题是，为了实际提交数字并使 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输入，然后最后我有一个“总计”区域，其中应使用 <?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);
}

更新

要将事件监听器添加到每个输入，您可以迭代每个元素，或者可以将监听器与父元素关联，如下所示:

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

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