jQuery 从选择框中预填充表单字段并计算结果答案

【问题标题】：jQuery prepopulate form fields from select box and calculate resultsjQuery 从选择框中预填充表单字段并计算结果
【发布时间】：2011-07-13 04:26:11
【问题描述】：

我正在构建一个计算器表格，让人们可以计算运行电器的成本。例如，他们可以从下拉列表中选择一个设备，这应该在文本字段中预先填充计算所需的数字。这是表格：

<form action = "<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST">
<label>Appliance</label>
<select id="list" >
<option value="select">Select</option>
<option value="dishwasher">Dishwasher</option>
<option value="iron">Iron</option>
</select>
<label>Watts</label> <input name="watts" /><br>
<label>Hours</label> <input name="hours" /> <br>
<label>Price</label> <input name="price" /> <br>
<label>Number</label> <input name="number" /> <br>
<label>Total</label> <input name="total" value="" id="total"></input>
</form>

当用户选择设备时，我希望输入字段填写如下：

  case 'dishwasher':
  $('input[name="watts"]').val('1200');
  $('input[name="hours"]').val('20');
  $('input[name="price"]').val('10');
  $('input[name="number"]').val('1');

然后对数字进行一些计算：

kilowatts = watts / 1000;
kwhours = kilowatts * hours;
costpounds = kwhours * price / 100;
total = costpounds * number

并将总计放入表单中的总计字段，其想法是还允许用户更改数字，甚至只是添加自己的数字，表单中的总计也会相应更新。我可以让所有单独的位工作，但对 jquery 的了解不够好，无法将它们放在一起。帮助将不胜感激。谢谢！

【问题讨论】：

所以您希望我们为您完成这项工作？ :)
@algiecas 有点像我的想法，但每个人都需要从某个地方开始。希望我当时有 stackoverflow

标签： javascript jquery forms

【解决方案1】：

这里有一些 javascript / jquery 可以帮助您入门。有更有效的方法，但对于刚学习的人来说，这些方法非常令人困惑。

    //when the document is finished being rendered, this fires 
    $(document).ready(function(){
    //if the user changes the value in the select dd, this fires.
         $('#list').change(function(e){
           changeInputValues(this.val());
          });
// standard JS function to set the input values with defaults for a given drop down.  your idea ;)
         function changeInputValues(ddValue){
            //put your Case 'dishwasher' code here, one case for each Drop down value
            //$('input[name="watts"]').val('1200');
          //$('input[name="hours"]').val('20');
          //$('input[name="price"]').val('10');
          //$('input[name="number"]').val('1');

            //recalculate the figures
            recalculate();
         };
        // when someone changes an input, but not the Drop Down, we have that on already.
         $('input').not('select').change(function(e){
             recalculate();
          });
          function recalculate(){
        // get the current values, then do your math
            //var currentWatts = $('input[name="watts"]').val();
            //var currentHours = $('input[name="hours"]').val();
        //....
        //var total = 0;

        // do more math... whatever you want

        //set the 'visible' value
           $('input[name="total"]').val(total)
        };
        });

【讨论】：

谢谢，太好了！我不得不做一些小的改变，但这让我很好地找到了答案。我现在可以看到我在更新计算时出错了。

【解决方案2】：

所以基本结构是 2 个功能。

在“设备”选择更改时调用。通过像 $(this)find('selected').attr('id')* 这样的 id 获取所选项目的所有值。一旦获得了选择设备的 ID，您就可以使用它从设备数组中提取正确的值，然后很容易使用 $(this).find('name_of_filed').text("value from the array")每个循环都很少。
在任何其他字段为 onChanged 时调用（或者您可以创建一个更新按钮，以防在进行多项更改时不断更新它很烦人）。在函数 1 的末尾也调用。从字段中获取所有值，进行计算，插入“总计”字段。

如果您希望将来更轻松地对其进行编辑并重用其中的任何代码，您当然可以将其进一步分解为更小的部分，但如果它将成为其中的一个，那么我不会费心将其拆分远不止这些。

如果需要，我可以提供更具体的信息，但我认为您最好尝试找出具体内容以便随时学习，我们 SO 可以随时回答具体问题。

* 可能不是实际正确的代码。我很懒，这样你会学到更多！ ;)

【讨论】：