Событие ValueChange () не работает на мобильном - PullRequest
Новая
       11

Событие ValueChange () не работает на мобильном

0 голосов
/ 18 февраля 2020

Я пишу калькулятор

Проблема: мне нужно добавить $('.plan-select').val() в $('output').text() по нажатию кнопки. События change() и input() не помогли отследить его изменение в обработчике, поэтому я нашел ValueChange() событие здесь https://developer.mozilla.org/ru/docs/Web/Events.

Мне нужно <output>, чтобы мгновенный refre sh во время нажатия, он отлично работает с ValueChange() на P C, но не работает корректно на мобильном телефоне. 

// Button
$('.plan-select').on('click', function() {
  var value = $(this).data("plan");
  $(".planlist").val(parseInt(value)).change();
});


// Handler. it collects checked checkboxes and <select> statement
window.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('form'),
    elem = form.querySelectorAll('[name^="itemtype"]'),
    value = form.querySelectorAll('[name^="labelname"]'),
    output = document.querySelector('output');

  function total() {
    output.innerHTML = [].reduce.call(elem, function(sum, el) {
      var n = (+el.value || 0) * (el.checked || el.tagName == "SELECT" || el.type == "text");
      return sum + n
    }, 0);
  }

  form.addEventListener('ValueChange', total);
  form.addEventListener('change', total);
  form.addEventListener('input', total);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Buttons -->
<a href="#pricing" class="plan-select" data-plan="35000">Option1</a>
<a href="#pricing" class="plan-select" data-plan="45000">Option2</a>
<a href="#pricing" class="plan-select" data-plan="65000">Option3</a>



<!-- Form -->
<div id="pricing">
  <form id="calc">
    <select name="itemtype5" class="planlist" id="l">
      <option class="no-display" value="0">Hidden</option>
      <option value="35000">Option1</option>
      <option value="45000">Option2</option>
      <option value="65000">Option3</option>
    </select>

    <input type="checkbox" class="checkbox_check" name="itemtype1" id="d" data-genrename="Genre1" value="3000" data-time="10">
    <label>Genre1</label>

    <input type="checkbox" class="checkbox_check" name="itemtype2" id="e" data-genrename="Genre2" value="4000" data-time="15">
    <label>Genre</label>

    <input type="checkbox" class="checkbox_check" name="itemtype3" id="f" data-genrename="Genre3" value="10000" data-time="24">
    <label>Genre3</label>

    <input type="checkbox" class="checkbox_check" name="itemtype4" id="g" data-genrename="Genre4" value="3000" data-time="10">
    <label>Genre4</label>


    <label>Total:</label>
    <output name="o" class="total" for="a b c d e f g h l">35000</output>

  </form>
</div>

Кнопка: https://elevate.kz/#plans

Обработчик: https://elevate.kz/#pricing

Спасибо.

1 Ответ

0 голосов
/ 18 февраля 2020

Вы ошиблись в кавычках вокруг жанра3

Попробуйте использовать jQuery до конца: 

function total() {
  let sum = 0;
  $("form :input").each(function() {
    var n = (+this.value || 0) * (this.checked || this.tagName == "SELECT" || this.type == "text");
    sum += n
  })
  $(".total").text(sum);
}  

$(function() {
  // Button
  $('.plan-select').on('click', function() {
    var value = $(this).data("plan");
    $(".planlist").val(parseInt(value)).change();
  });

  $("#calc").on("change", "select[name^=itemtype]", total)
  $("select[name^=itemtype]").trigger("change"); 
  $("#calc").on("touchstart click", "input[type=checkbox][name^=itemtype]", total); 
  $("#calc").on("input", "input[type=text][name^=itemtype]", total); // if exists


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Buttons -->
<a href="#pricing" class="plan-select" data-plan="35000">Option1</a>
<a href="#pricing" class="plan-select" data-plan="45000">Option2</a>
<a href="#pricing" class="plan-select" data-plan="65000">Option3</a>



<!-- Form -->
<div id="pricing">
  <form id="calc">
    <select name="itemtype5" class="planlist" id="l">
      <option class="no-display" value="0">Сайт-визитка</option>
      <option value="35000">Option1</option>
      <option value="45000">Option2</option>
      <option value="65000">Option3</option>
    </select>

    <input type="checkbox" class="checkbox_check" name="itemtype1" id="d" data-genrename="Genre1" value="3000" data-time="10" />
    <label>Genre1</label>

    <input type="checkbox" class="checkbox_check" name="itemtype2" id="e" data-genrename="Genre2" value="4000" data-time="15" />
    <label>Genre</label>

    <input type="checkbox" class="checkbox_check" name="itemtype3" id="f" data-genrename="Genre3" value="10000" data-time="24" />
    <label>Genre3</label>

    <input type="checkbox" class="checkbox_check" name="itemtype4" id="g" data-genrename="Genre4" value="3000" data-time="10" />
    <label>Genre4</label>


    <label>Total:</label>
    <output name="o" class="total" for="a b c d e f g h l">35000</output>

  </form>
</div>
...