Nano Hash - криптовалюты, майнинг, программирование

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

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

<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, чтобы собрать все вместе. Помощь будет принята с благодарностью. Спасибо!

12.07.2011

  • Итак, вы хотите, чтобы мы сделали эту работу за вас? :) 13.07.2011
  • @algiecas вроде того, о чем я думал, но всем нужно с чего-то начинать. жаль, что тогда у меня не было stackoverflow 13.07.2011

Ответы:


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)
        };
        });
12.07.2011
  • Спасибо, это здорово! Мне пришлось внести несколько небольших изменений, но это очень хорошо привело меня к ответу. Теперь я вижу, что я ошибался, заставляя его обновлять расчеты. 13.07.2011

  • 2

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

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

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

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

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

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

    12.07.2011
    Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

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

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..