Question

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

<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足够好把它们放在一起。非常感谢帮助。谢谢！

Answer 1

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

更改“设备”选择时调用。通过抓取id来获取所选项目的所有值，如$（this）find（'selected'）。attr（'id'）*。获得select设备的ID后，您可以使用它从设备阵列中提取正确的值，然后很容易$（this）.find（'name_of_filed'）。text（“数组中的值”）每个循环都很少。
当任何其他字段处于onChanged时调用（或者您可以创建一个更新按钮，以防在您进行多项更改时让它不断更新时很烦人）。在函数1的末尾也调用1.从字段中取出所有值，进行计算，插入“total”字段。

如果您希望将来更容易编辑它并重新使用任何此类代码，那么您当然可以将其进一步分解为较小的部分但是如果它将成为其中之一我将不会打扰它远不止于此。

如果需要的话，我可以得到更具体的信息，但我认为你最好在你去的时候尝试计算具体细节，我们在这里可以随时回答具体问题。

*可能无法执行正确的代码。我很懒，你会这样学习更多！ ;）

Answer 2

这里有一些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)
        };
        });

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

2 个答案: