Как получать значение value скрытого инпута?

124

31 января 2020, 11:40

    var handle = $("#custom-handle2"); 
    $("#slider2").slider({ 
        range: "min", 
        create: function () { 
            handle.text($(this).slider("value")); 
        }, 
        slide: function (event, ui) { 
            handle.text(ui.value); 
                    
            $("#resultValue2").val(ui.value);   
             
        } 
    }); 
 
let total;  
 $('#resultValue2').on('change', function () { 
         
            let num = Number($(this).val()); 
            if (num == 0) { 
                num = 1; 
            } 
            total = num; 
 
    }); 
 
$(".total").text( total + ' ₽/мес');

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-3.4.0.min.js" 
        integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script> 
    <script src="/js/slick.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
     <div class="calc-slider"> 
                    <input type="hidden" value="0" name="users"  id="resultValue2"> 
                    <div id="slider2"> 
 
                        <div id="custom-handle2" class="ui-slider-handle"></div> 
                    </div> 
                </div> 
 
<span class="total">Итого: </span>

В форме используется jq ui slider который передаёт значение в скрытый инпут. Как получать это значение при изменении? Пробовал через

.on('input')

не передаёт так.

Answer 1

*Просто убрал лишнее из вашего кода, прописав всё, что должно произойти, в slide:function

var handle = $("#custom-handle2"); 
   $("#slider2").slider({ 
        range: "min", 
        create: function () { 
            handle.text($(this).slider("value")); 
        }, 
        slide: function (event,ui) { 
          let total = ui.value; 
          handle.text(total);           
          $('.total').text( total + ' ₽/мес' ); 
        } 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-3.4.0.min.js" 
        integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script> 
    <script src="/js/slick.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="calc-slider"> 
    <div id="slider2"> 
       <div id="custom-handle2" class="ui-slider-handle"></div> 
    </div> 
</div> 
 
Итого: <span class="total">0 ₽/мес</span>

Answer 2

Изменение значения инпута в коде не вызывает события change.

$("#resultValue2").val(ui.value).change();

var handle = $("#custom-handle2"); 
$("#slider2").slider({ 
  range: "min", 
  create: function() { 
    handle.text($(this).slider("value")); 
  }, 
  slide: function(event, ui) { 
    handle.text(ui.value); 
    $("#resultValue2").val(ui.value).change(); 
  } 
}); 
 
let total; 
$('#resultValue2').on('change', function() { 
  let num = Number($(this).val()); 
  if (num == 0) { 
    num = 1; 
  } 
  total = num; 
  $(".total").text(total + ' ₽/мес'); 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script> 
<script src="/js/slick.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="calc-slider"> 
  <input type="hidden" value="0" name="users" id="resultValue2"> 
  <div id="slider2"> 
 
    <div id="custom-handle2" class="ui-slider-handle"></div> 
  </div> 
</div> 
 
<span class="total">Итого: </span>