Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.11.2016, 00:30
Новичок на форуме
Отправить личное сообщение для deathguru Посмотреть профиль Найти все сообщения от deathguru
 
Регистрация: 21.08.2013
Сообщений: 8

Перемножение полей
Есть два металла золото и серебро. В зависимости от того, какое значение выбрано в поле металл - отображается второй <select>, у которого <option value="цена">проба</option>.

Т.е. надо отобразить список проб в зависимости от выбранного металла и умножить цену конкретной пробы на вес (результат вывести).

Как реализовать перемножение именно с тем селектом, который отображается в зависимости от выбранного металла?

Сделал два селекта с пробами на золото и серебро и показывал один из них в зависимости от выбранного металла, но не смог подцепиться уже к отображаемому списку с пробами -_-

PS Если напишете более-менее рабочий вариант кода - отправьте в лс куда и сколько "спасибо" выразить - я давно не писал на js и давно не спал. буду благодарен за помощь.
Изображения:
Тип файла: jpg web.jpg (37.8 Кб, 9 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2016, 10:48
Новичок на форуме
Отправить личное сообщение для deathguru Посмотреть профиль Найти все сообщения от deathguru
 
Регистрация: 21.08.2013
Сообщений: 8

<form class="uk-form">
    <fieldset>
        {# Metal #}
        <select name="metal" class="uk-form-large uk-width-1-1 uk-margin-bottom">
          <option value="gold">{{ 'METAL.GOLD'|t }}</option>
          <option value="silver">{{ 'METAL.SILVER'|t }}</option>
        </select>

        {# Gold #}
        <select name="gold" class="uk-form-large uk-width-1-1 uk-margin-bottom">
            {% for select in theme_config.gold %}
              <option value="{{ select.price }}">{{ select.sample }}</option>
            {% endfor %}
        </select>

        {# Silver #}
        <select name="silver" class="uk-form-large uk-width-1-1 uk-margin-bottom">
            {% for select in theme_config.silver %}
              <option value="{{ select.price }}">{{ select.sample }}</option>
            {% endfor %}
        </select>

        <input name="weight" type="text" class="uk-form-large uk-width-1-1 uk-margin-bottom" value="1" placeholder="Вес">

        <a name="send" class="uk-width-1-1 uk-button uk-button-large uk-button-primary">Рассчитать</a>

        <p>Цена за грамм <span class="value">___</span> руб.</p>
        <p>Сумма на руки <span class="result">___</span> руб.</p>
    </fieldset>
</form>


<script>
  $(document).ready(function(){
    var gold = $("select[name=gold]").val() * 1;
    var silver = $("select[name=silver]").val() * 1;
    var weight = $("input[name=weight]").val() * 1;

    // Показываем список проб и цену за грамм при загрузке
    if ($("select[name=metal]").val() == "gold") {
      $('select[name=silver]').addClass('uk-hidden');

      $("span.value").text(gold);
      $("span.result").text(gold * weight);
    }
    else {
      $('select[name=gold]').addClass('uk-hidden');

      $("span.value").text(silver);
      $("span.result").text(silver * weight);
    }
  });

  $(function () {
    var gold = $("select[name=gold]").val() * 1;
    var silver = $("select[name=silver]").val() * 1;
    var weight = $("input[name=weight]").val() * 1;

    // Отображаем список проб
    $("select[name=metal]").change(function() {
      if ($(this).val() == "gold") {
        $('select[name=silver]').addClass('uk-hidden');
        $('select[name=gold]').removeClass('uk-hidden');
      }
      else {
        $('select[name=gold]').addClass('uk-hidden');
        $('select[name=silver]').removeClass('uk-hidden');
      }
    })

    // Расчитываем
    $("a[name=send]").click(function() {
      if ($('select[name=silver]').hasClass("uk-hidden")) {
        var result = gold * weight;
      } else {
        var result = silver * weight;
      }

      $("span.value").text(gold);
      $("span.result").text(result);
    });
  });
</script>


При загрузке страницы срабатывает. Меняется поле с пробами в зависимости от выбранного металла (select с пробами другого металла скрывается классом .uk-hidden).

Расчет стоимости по событию click не срабатывает (https://jsfiddle.net/xw3tuchp/).

Последний раз редактировалось deathguru, 22.11.2016 в 11:12.
Ответить с цитированием
  #3 (permalink)  
Старый 22.11.2016, 13:39
Новичок на форуме
Отправить личное сообщение для deathguru Посмотреть профиль Найти все сообщения от deathguru
 
Регистрация: 21.08.2013
Сообщений: 8

Разобрался. Не актуально.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AngularJS: вычисление динамических полей в таблице factory_girl Библиотеки/Тулкиты/Фреймворки 0 13.06.2015 19:28
Как сделать проверку всех полей формы при нажатии кнопки sss2019 Общие вопросы Javascript 2 04.01.2014 02:00
Проблема с проверкой полей в форме Eth Общие вопросы Javascript 7 19.08.2010 17:41
Добавление и удаление полей в форму anoth3r Events/DOM/Window 1 11.09.2009 15:10
проверка полей формы!!!! DENAT Общие вопросы Javascript 0 05.06.2008 22:14