JQuery/JavaScript:遍历表单字段，执行计算，然后提交

JQuery/JavaScript: Iterate through form fields, perform calculation, then submit

本文关键字：执行 计算 然后 提交 字段 表单 JavaScript 遍历 JQuery      更新时间：2023-09-26

现在我的代码非常"硬编码"且重复。我想知道是否有更清洁的方法来做以下事情。理想情况下，我想用一个循环迭代我的表单字段，并用一条语句计算结果，但我很难找到最好的方法

摘要：我有十个表单字段，每个字段都有一个不同的十进制值，用户可以提供也可以不提供。当用户点击提交时，它应该在当前HTML页面上显示的值的输入字段中添加值，然后插入到DB中。

首先，我从表单输入字段中获取该值，并将其转换为具有两个小数位的数字。然后，我从HTML中获取当前的总数，并将这两个数字相加。之后，我将总数注入表单输入字段，以便将其存储在$_POST中并插入到数据库中。

我怎样才能使我的代码更干燥（即不要重复自己）？以下只是两个例子，但除了元素调用之外，它们完全相同：

var subtotal = Number($("#housing").val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-housing').html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#housing').val(total);
var subtotal = Number($("#utilities").val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-utilities').html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#utilities').val(total);

我想像这样迭代我的输入字段，但我正试图弄清楚如何显示里面的逻辑：

var input = $('.form-expenses :input');
input.each(function() {
    // Insert switch statement here??  Some other construct??
});

HTML:（使用引导程序3类）

形式：

<form class="form-expenses form-horizontal" role="form" method="post" action="/profile/update">
    <div class="form-group">
        <label for="housing" class="control-label col-sm-3">Housing</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" name="housing" id="housing" />
        </div>
    </div>
    <div class="form-group">
        <label for="utilities" class="control-label col-sm-3">Utilities</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span>
          <input type="text" class="form-control" name="utilities" id="utilities" />
        </div>
    </div>
...
<button class="btn btn-lg btn-primary btn-block" id="update-expenses" type="submit"> Update</button>
</form>

输出：

<tr>
  <td>Housing</td>
  <td id="output-housing">$<?php echo $total['housing']?></td>
</tr>
<tr>
  <td>Utilities</td>
  <td id="output-utilities">$<?php echo $total['utilities']?></td>
</tr>

这样的东西应该可以工作。假设输出/输入ID的具有相同的前缀关系

$(function() {
  $('form.form-expenses').submit(function() {
    updateValues();
    return false/* prevent submit for demo only*/
  })
})
function updateValues(){
  $('.form-expenses :input').not('#update-expenses').each(function(){
    var $input=$(this), inputId=this.id;
    var curr=$('#output-'+inputId).text().replace("$", "");
    $input.val(function(i,val){
      return (1*(val ||0) + 1*curr).toFixed(2);
    })
  });
}

演示

从UI的角度来看，更改用户刚刚输入的值似乎非常违背直觉。

要创建ajax数据对象而不是更新显示值：

function getAjaxData(){
  var ajaxData={}
  $('.form-expenses :input').not('#update-expenses').each(function(){
    var $input=$(this), inputId=this.id;
    var curr=$('#output-'+inputId).text().replace("$", "");
    ajaxData[this.name] =(1*(val ||0) + 1*curr).toFixed(2);
  });
  return ajaxData
}
/* in submit handler*/
$.post('path/to/server', getAjaxData(), function(response){/*do something with reponse*/})

"如果我允许用户添加/删除字段，那么这可能会有点棘手"

在这种情况下，为字段指定一个类名。只要添加的字段中存在这种情况，它们都将被计算出来。

<input type="text" class="form-control calculate-me" name="housing" id="housing" />

并使用它们的id作为参考对所有内容进行迭代

$(".calculate-me").each(function(){
    var ref=this.id;
    var subtotal = Number($("#" + ref).val());
    subtotal = (subtotal).toFixed(2);
    var currentTotal = $('#output-' + ref).html().replace("$", "");
    var total = Number(subtotal) + Number(currentTotal);
    $('#' + ref).val(total);
});
相关文章：