Javascript 自动提交表单信息而不重新加载页面

我有一个表单，里面有一堆

数字

字段，所有这些字段都可以通过php相互添加。唯一的问题是，要真正提交数字并使php函数工作，我必须单击

submit

按钮重新加载页面。虽然这确实有效，但有点烦人，它必须重新加载，同时从实际表单中删除数字，因此用户看不到他/她在哪里输入了数字

我知道可以通过某种方式使其自动提交，但是否可以让php函数在用户每次输入内容时获取表单信息，从而自动更新新的

总计

，从而不必重新加载

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

PHP部分

---

首先，您在所有输入上都有id“amount”。这将不起作用，每个页面只能使用一次id。所以，找出一个惯例，使这些id是唯一的。像

id='field1-id'

之类的。另外，从表单标记中删除

操作

和

方法

属性。在这一点上他们是不需要的

然后，您可以使用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();
 });

---

请注意，这段代码未经测试，编写速度很快，但它应该能让您大致了解如何完成所要完成的任务。

这种处理不需要服务器端脚本。只需防止提交表格时附带：

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

尽管如此，如果要对许多元素求和，最好为这些元素提供相同的类，因此可以这样做：

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);
}

---

您应该抛出从输入中检索值的所有代码，执行计算并在

update（）

函数中更新DOM，每次输入更改时都会调用该函数

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

AJAX

。我感谢你的反馈，我已经尝试更改了我的代码，没有使用服务器端版本。我的代码现在看起来是这样的，我对你的代码做了一些修改，因为它在一开始似乎不起作用。它仍然没有真正起作用，我不确定到底是什么地方出了问题。从理论上讲，它似乎可以工作。您必须在setTimeout回调中更新DOM，否则它只执行一次：。这远非理想的解决方案，因为用户操作和结果之间存在延迟。我将用另一个选项更新我的答案。

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

//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);