В ползунках с несколькими ценовыми диапазонами я хочу получить их значения только после того, как переместил указатель мыши на каждом из них после нажатия кнопки Отправить. - PullRequest
Новая
       28

В ползунках с несколькими ценовыми диапазонами я хочу получить их значения только после того, как переместил указатель мыши на каждом из них после нажатия кнопки Отправить.

0 голосов
/ 17 января 2020

У меня есть следующий чистый код ползунка диапазона цен Javascript. Я хочу получить значения минимального значения и максимального значения каждого, вероятно, сообщить о массиве. Но я не хочу получать значения по одному. Я хочу получить значения, когда я закончу движение мышью и после нажатия кнопки отправки.

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

У меня также нет похоже, что после нажатия кнопки «Отправить» удается получить значения, но я могу их консольно записать в журнал. 

<section class="modal-feedback">

<form id="modal_feedback_three" method="POST" action="#" accept-charset="UTF-8">
<div class="slider-part">

<div class="range-slider">
<span>Living Area size</span>
<span class="rangeValues"></span>
<input value="500" min="500" max="50000" step="500" type="range">
<input value="50000" min="500" max="50000" step="500" type="range">
</div>
</div>

<div class="slider-part">

<div class="range-slider">
<span>Kitchen size</span>
<span class="rangeValues"></span>
<input value="500" min="500" max="50000" step="500" type="range">
<input value="50000" min="500" max="50000" step="500" type="range">
</div>
</div>

<div class="slider-part">

<div class="range-slider">
<span>Size Of land</span>
<span class="rangeValues"></span>
<input value="500" min="500" max="50000" step="500" type="range">
<input value="50000" min="500" max="50000" step="500" type="range">
</div>
</div>

<div class="slider-part">

<div class="range-slider">
<span>Size of the Garden</span>
<span class="rangeValues"></span>
<input value="500" min="500" max="50000" step="500" type="range">
<input value="50000" min="500" max="50000" step="500" type="range">
</div> 
</div> 


<button id="submit-three" type="submit" name="feedback" value="submit">submit</button>

</form>
</section> 

function getVals(){
// Get slider values
var parent = this.parentNode;
var slides = parent.getElementsByTagName("input");
var slide1 = parseFloat(slides[0].value );
var slide2 = parseFloat( slides[1].value );
console.log(slide1,slide2);
// Neither slider will clip the other, so make sure we determine which is larger
if( slide1 > slide2 ){ var tmp = slide2; slide2 = slide1; slide1 = tmp; }

var displayElement = parent.getElementsByClassName("rangeValues")[0];
displayElement.innerHTML = "ksh " + slide1 + "-" + slide2 + "";
}

window.onload = function(){
// Initialize Sliders
var sliderSections = document.getElementsByClassName("range-slider");
for( var x = 0; x < sliderSections.length; x++ ){
var sliders = sliderSections[x].getElementsByTagName("input");
for( var y = 0; y < sliders.length; y++ ){
if(sliders[y].type ==="range"){
sliders[y].oninput = getVals;
// Manually trigger event first time to display values
sliders[y].oninput();
}
}
}
}
...