Слайд калькулятор

209

17 апреля 2019, 16:00

Есть два input и два popup окна.

В случае ввода в оба поля допустимых значений, и если значение справа больше, чем значение слева (значение справа – значение слева), появляется модальное окно с классом popup-economy, и введенные числа записываются в два div'a c с классом .price-left и .price-right, а разница записывается в абзац с классом .economy, а также вычисляется значение в процентах ( (значение справа – значение слева)*100 / значение справа) и сумма записывается в div с классом .sum.

В случае ввода в оба поля допустимых значений, и если значение справа меньше, чем значение слева, появляется модальное окно с классом .warning, и в класс .economy записывается "Возможно вы ошиблись".

Все это должно срабатывать при клике на button. Лучше всего подойдет вариант на jquery.

<input class="form-left" type="text">
<input class="form-right" type="text">
<button class="btn-select">Посчитать</button>
<div class="popup-economy" style="display: none">
    <div class="price-left"></div>
    <div class="price-right"></div>
    <p class="economy"></p>
    <div class="sum"></div>
</div>
<div class="warning" style="display: none">
    <div class="price-left"></div>
    <div class="price-right"></div>
    <p class="economy"></p>
</div>

Answer 1

$(".btn-select").click(function() { 
  $('.warning').hide(); //Прячем блок warning 
  $('.popup-economy').hide(); //Прячем блок popup-economy 
  var left = parseInt($('.form-left').val()); //Получаем значение из input form-left, чрезе parseInt возвращяем только число 
  var right = parseInt($('.form-right').val()); //Аналогично 
  if (right > left) { //Проверяем, что правое число больше левого 
    $('.popup-economy').fadeIn(); //Показываем блок popup-economy 
    var economy = right - left; //Вычитаем из правого значения левое 
    $('.economy').text(economy); //И записываем его в economy 
    $('.price-left').text(left); //Записываем левое значение в price-left 
    $('.price-right').text(right); //Записываем правое значение в price-right 
    var sum = (right - left) * 100 / right; //Считаем процент 
    $('.sum').text(sum); //Записываем процент 
  } else { //Если правое значение меньше левого 
    $('.warning').fadeIn(); //Показываем блок warning 
    $('.economy').text('Возможно вы ошиблись'); //И записываем в  economy текст 'Возможно вы ошиблись' 
  } 
}); 
$(".form-left").keyup(function() {//Отслеживаем нажатие клавиш 
  if ($(".form-left").val() && $(".form-right").val()) {//Проверяем заполненны ли поля 
    $('.btn-select').attr('disabled', false);//Включаем кнопку 
  } else { 
    $('.btn-select').attr('disabled', true);//Выключаем кнопку 
  } 
}); 
$(".form-right").keyup(function() { 
  if ($(".form-left").val() && $(".form-right").val()) { 
    $('.btn-select').attr('disabled', false); 
  } else { 
    $('.btn-select').attr('disabled', true); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input class="form-left" type="text"> 
<input class="form-right" type="text"> 
<button class="btn-select" disabled>Посчитать</button> 
 
<div class="popup-economy" style="display: none"> 
  <div class="price-left"></div> 
  <div class="price-right"></div> 
  <p class="economy"></p> 
  <div class="sum"></div> 
</div> 
 
<div class="warning" style="display: none"> 
  <div class="price-left"></div> 
  <div class="price-right"></div> 
  <p class="economy">Возможно вы ошиблись</p> 
</div>

Answer 2

Легкая модификация кода @nicolaa - включение/выключение кнопки в 3 строки вместо 14

$(".form-left,.form-right").keyup(function() { //Отслеживаем нажатие клавиш 
    $('.btn-select').attr('disabled', !($(".form-left").val() && $(".form-right").val()) ); // Включаем|Выключаем кнопку 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input class="form-left" type="text"> 
<input class="form-right" type="text"> 
<button class="btn-select" disabled>Посчитать</button> 
 
<div class="popup-economy" style="display: none"> 
  <div class="price-left"></div> 
  <div class="price-right"></div> 
  <p class="economy"></p> 
  <div class="sum"></div> 
</div> 
 
<div class="warning" style="display: none"> 
  <div class="price-left"></div> 
  <div class="price-right"></div> 
  <p class="economy">Возможно вы ошиблись</p> 
</div>