jQuery предварительно заполнить поля формы из поля выбора и рассчитать результаты

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

Вот несколько примеров 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)
        };
        });

Answer 2

Итак, базовая структура - 2 функции.

1. Вызывается при изменении выбора «прибора». Принимает все значения выбранного элемента, захватывая идентификатор как $ (this) find ('selected'). Attr ('id') *. Когда у вас есть идентификатор выбранного устройства, вы можете использовать его для извлечения правильных значений из массивов вашего устройства, а затем легко ($) .find ('name_of_filed'). Text ("значение из массива") с помощью мало для каждой петли.

2. вызывается, когда любое другое поле onChanged (или вы можете сделать кнопку обновления в случае, если раздражает его постоянное обновление во время внесения нескольких изменений). Также вызывается в конце функции 1. Принимает все значения из полей, выполняет вычисления, вставляет в поле «итого».

Вы, конечно, можете разбить это на более мелкие фрагменты, если вы хотите, чтобы в будущем его было легче редактировать, и чтобы можно было повторно использовать любой из этого кода, но если это будет один из них, я бы не стал его разбивать. гораздо больше, чем это.

Я могу получить гораздо более конкретную информацию, если это будет необходимо, но я полагаю, что вам лучше попытаться выяснить особенности, чтобы узнать, как вы работаете, и мы здесь, в SO, можем ответить на конкретные вопросы по мере вашего продвижения.

* может быть не совсем правильным кодом. Я ленивый, и вы узнаете больше таким образом! ;)