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

【问题标题】：Auto submit form information without page reload自动提交表单信息而无需重新加载页面
【发布时间】：2016-11-04 19:47:12
【问题描述】：

我有一个包含一堆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 输入，最后我有一个“总计”区域，应该使用 <?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>

【问题讨论】：

不能用javascript/jQuery吗？如果可以的话，这很容易
@DarrenSweeney 当然，基本上任何能完成我正在寻找的东西都是好的。
如果您想在不重新加载页面的情况下发送表单，则必须使用AJAX。

标签： javascript php jquery html forms

【解决方案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 的代码，每次输入更改时都会调用该函数。

【讨论】：

感谢您的反馈，我已尝试更改代码而不使用服务器端版本。我的代码现在看起来像这样jsfiddle.net/njqywmsp/4 我已经稍微更改了您的代码，因为它似乎在一开始就不起作用。它仍然不起作用，我不确定到底是什么问题。在我看来，理论上它会起作用。
你必须在 setTimeout 回调中更新 DOM，否则只会执行一次：jsfiddle.net/yz6cdkw2。这远非理想的解决方案，因为在用户操作和结果之间存在延迟。我会用另一种方法更新我的答案。

【解决方案2】：

首先，您的所有输入都有 ID“金额”。这不起作用，一个 id 每页只能使用一次。所以，想出一个让这些 id 独一无二的约定。比如id='field1-id' 什么的。此外，从表单标签中删除 action 和 method 属性。此时将不再需要它们。

然后您可以使用 jQuery 和 AJAX 调用来完成您正在寻找的事情。比如：

$("#submitValues").bind('click', function(e){
    var formData[];

    $("#orderForm").each('input[^="-id"]', function(){
         formData.push($(this).val());
    });

   $.ajax({
      url: 'index.php',
      data: formData
   }).success(function(response){
       $("totalAmount").val(response.returnedTotalAmount);
       $("totalPrice").val(response.returnedTotalPrice);
   }).fail(function(response){
      /* do something else */
   });

 e.preventDefault();
 });

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

【讨论】：