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

时间:2016-11-04 19:47:13

标签: javascript php jquery html forms

我有一个带有一堆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>

2 个答案:

答案 0 :(得分:2)

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

<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,每次输入更改时都会调用它。

答案 1 :(得分:1)

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

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

method

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