Сохраните данные из ввода формы и перезагрузите функцию javascript после обновления страницы

Question

в моем Wordpress с плагином Woocommerce, у которого есть боковая панель с калькулятором из трех входов, где я получаю свои входные значения для вычисления.

<form method="get" id="calculator"> 

    <div class="row"> 

     <input value="0" type="text" id="val-x" name="val-x" onkeyup="calculate(this.value, document.getElementById('cart').value)"> 

    </div> 

    <div class="row"> 

     <input value="0" type="text" id="val-y" name="val-y" onkeyup="calculate2(this.value, document.getElementById('cart').value)"> 

    </div> 

    <div class="row"> 

     <input type="text" id="cart" readonly="readonly" value="<?php 
      $cart = WC()->cart->get_cart_total(); 
      $cart = strip_tags($cart); 

      echo mb_substr($cart, 0, -7); ?>"> 
    </div> 

Тогда есть кнопка отправки, которую я не хочу видеть. Внутри двух элементов span с идентификаторами #result и # result2 функция JS должна динамически вычислять результаты onkeyup-события на входах.

<div class="row"> 

      <input value="Calculate" type="submit" id="submit-btn" name="submit-btn" class="btn" onclick=""><!-- This submit button should be hidden all time! --> 

     </div> 

     <div><strong>Result </strong> <span id="result" style="color: red; font-size: 1.5em;">0</span></div> 

     <div><strong>Result 2 </strong> <span id="result2" style="color: red; font-size: 1.5em;">0</span></div> 


    </form> 

Это мои функции JQuery

jQuery(window).unload(saveSettings); 
    loadSettings(); 

    function loadSettings() { 
     var val_x = $('#val-x'); 
      val_y = $('#val-y'); 

     val_x.val(localStorage.val_xx); 
     val_y.val(localStorage.val_yy); 
    } 

    function saveSettings() { 
     localStorage.val_xx = val_x.val(); 
     localStorage.val_yy = val_y.val(); 
    } 

    var val_x,val_y,cart,result,result2; 
    function roundToTwo(num) {  
     return +(Math.round(num + "e+2") + "e-2"); 
    } 

    function finalCalc(){ 

     function calculate (val_x, cart) { 

      result = val_x - cart; 

      if(result<0){ 
       result = 0; 
      }else{ 
       result; 
      } 

      document.getElementById("result").innerHTML = roundToTwo(result); 

     }; 

     function calculate2 (val_y, cart) { 

      result2 = cart/val_y; 

      if(result2<0){ 
       result2 = 0; 
      }else{ 
       result2; 
      } 

      document.getElementById("result2").innerHTML = roundToTwo(result2); 

     }; 

    }; 

• так, калькулятор работает отлично на всех. Но это проблема для меня, с хранением данных. Значение по умолчанию для входов «undefined». Я попытался записать значение по умолчанию с оператором if/else для значения «null» и «undefined», это сработало, но хранение данных входов перестало работать в этом случае.

Ive пробовал этот код, чтобы исправить значение по умолчанию localstorage, но после обновления i всегда получает значение «0» вместо сохраненного значения ввода.

if (localStorage.val_xx === null && localStorage.val_xx === "undefined") { 
       localStorage.val_xx.value = "0"; 
      } else if (localStorage.val_xx !== null && localStorage.val_xx !== "undefined"){ 
       localStorage.val_xx.value = val_x.val(); 
      } 

• Theres еще одна проблема с им удается за несколько дней. Когда я перезагружаю страницу, а значения в входах остаются неизменными, функция в входах onkeyup не запускается (логически), поэтому результаты в элементах диапазона по умолчанию «0». Мой вопрос в том, что если есть какой-то обманщик, что можно запустить onkeyup без onkeyup? (Я понимаю, что этот вопрос звучит немного глупо: D)
• Аналогичная проблема возникает, когда вы добавляли значения для ввода, а после этого добавляете некоторые продукта в корзину. Значения не вычисляются из-за неработающей функции onkeyup.

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

Answer 1

2.Использование документа. готовый функция JQuery для установки/сброса полей, когда страница перезагружает -

$(document).ready(function() { 
 
     calculate($('#val-x').val(), $('#cart').val()); 
 
     calculate2($('#val-y').val(), $('#cart').val()); 
 
    }

3.Try добавления обработчика события OnChange в корзину и вызвать исчисляют и calculate2 от него.

EDIT: Вы должны позаботиться о том, что onchange не будет вызываться, если значение изменяется динамически (а не пользователем). После добавления обработчика OnChange вам нужно вызвать 'изменить' событие с помощью JQuery -

$('#cart').trigger('change');

я вмятина вполне понимаю точку 1.