Question

现在我的代码非常“硬编码”且重复。我想知道是否有更简洁的方法来执行以下操作。理想情况下，我想用循环迭代我的表单字段并用一个语句计算结果，但我很难弄清楚如何做到这一点。

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

首先，我从表单输入字段中获取该值，并将其转换为带有两个小数位的数字。然后我从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：（使用Bootstrap 3类）

FORM：

<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>

Answer 1

这样的事情应该有效。假设输出/输入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);
    })
  });
}

的 DEMO

从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*/})

Answer 2

“如果我允许用户添加/删除字段，那么这可能会有点粘性”

在这种情况下，请为您的字段指定一个类名。只要在添加的字段中存在，就会计算它们。

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

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

2 个答案: