Показать сообщение отдельно
  #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.
Ответить с цитированием