在输入隐藏字段获取输入范围滑块值jquery

我的范围滑块工作正常，但它显示的范围为，范围为。随着跨度我想范围内打印输入隐藏字段但无法这样做。在输入隐藏字段获取输入范围滑块值jquery

我提供了脚本，它打印范围范围。

$(window).load(function(){ 
 
var range = $('.input-range'), 
 
    value = $('.range-value'); 
 
    
 
value.html(range.attr('value')); 
 

 
range.on('input', function(){ 
 
    value.html(this.value); 
 
}); 
 

 
    
 
});//]]>

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.range-slider .input-range { 
 
    -webkit-appearance: none; 
 
    width: 300px; 
 
    height: 10px; 
 
    border-radius: 5px; 
 
    background: #353535; 
 
    outline: none; 
 
} 
 
.range-slider .input-range::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: #666; 
 
    cursor: pointer; 
 
    -webkit-transition: background .15s ease-in-out; 
 
    transition: background .15s ease-in-out; 
 
} 
 
.range-slider .input-range::-webkit-slider-thumb:hover { 
 
    background: #fff; 
 
} 
 
.range-slider .input-range:active::-webkit-slider-thumb { 
 
    background: #fff; 
 
} 
 
.range-slider .input-range::-moz-range-thumb { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 0; 
 
    border-radius: 50%; 
 
    background: #666; 
 
    cursor: pointer; 
 
    -webkit-transition: background .15s ease-in-out; 
 
    transition: background .15s ease-in-out; 
 
} 
 
.range-slider .input-range::-moz-range-thumb:hover { 
 
    background: #fff; 
 
} 
 
.range-slider .input-range:active::-moz-range-thumb { 
 
    background: #fff; 
 
} 
 
.range-slider .range-value { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 80px; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    font-weight:bold; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    border-radius: 3px; 
 
    background: #3f3f3f; 
 
    padding: 5px 10px; 
 
    margin-left: 7px; 
 
} 
 
.range-slider .range-value:after { 
 
    position: absolute; 
 
    top: 8px; 
 
    left: -7px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 7px solid transparent; 
 
    border-right: 7px solid #3f3f3f; 
 
    border-bottom: 7px solid transparent; 
 
    content: ''; 
 
} 
 

 
::-moz-range-track { 
 
    background: #353535; 
 
    border: 0; 
 
} 
 

 
input::-moz-focus-inner { 
 
    border: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="et_pb_contact_form clearfix" method="GET" action="zd"> 
 

 
<p> 
 
<h5>Amount in INR</h5> 
 
<div class="range-slider"> 
 
    <input class="input-range" type="range" name="amount" value="" min="1000" step="1000" max="1000000"> 
 
    <span class="range-value"></span> 
 
    <input type="hidden" class="test" value=""> 
 
</div> 
 
</p> 
 

 

 

 
<button type="submit" class="et_pb_contact_submit et_pb_button">Submit</button> 
 

 
</form>

来源

2017-03-22 Suman Acoustics

你想里面标签值的范围值？ –

是在输入也是 –

看看这段代码。它将当前值分配给隐藏字段。您可以通过点击一个按钮来检查当前值。

$(window).load(function(){ 
 
    var range = $('.input-range'), 
 
    value = $('.range-value'); 
 
    
 
    value.html(range.attr('value')); 
 

 
    range.on('input', function(){ 
 
    value.html(this.value); 
 
    
 
    // Write value to hidden field 
 
    $("input.test").val(this.value); 
 
    }); 
 
    
 
    // Show current hidden input value 
 
    $("#showValueButton").click(function() { 
 
    var currentVal = $("input.test").val(); 
 
    alert("Current hidden input value: " + currentVal); 
 
    }); 
 

 
    
 
});//]]>

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.range-slider .input-range { 
 
    -webkit-appearance: none; 
 
    width: 300px; 
 
    height: 10px; 
 
    border-radius: 5px; 
 
    background: #353535; 
 
    outline: none; 
 
} 
 
.range-slider .input-range::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: #666; 
 
    cursor: pointer; 
 
    -webkit-transition: background .15s ease-in-out; 
 
    transition: background .15s ease-in-out; 
 
} 
 
.range-slider .input-range::-webkit-slider-thumb:hover { 
 
    background: #fff; 
 
} 
 
.range-slider .input-range:active::-webkit-slider-thumb { 
 
    background: #fff; 
 
} 
 
.range-slider .input-range::-moz-range-thumb { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 0; 
 
    border-radius: 50%; 
 
    background: #666; 
 
    cursor: pointer; 
 
    -webkit-transition: background .15s ease-in-out; 
 
    transition: background .15s ease-in-out; 
 
} 
 
.range-slider .input-range::-moz-range-thumb:hover { 
 
    background: #fff; 
 
} 
 
.range-slider .input-range:active::-moz-range-thumb { 
 
    background: #fff; 
 
} 
 
.range-slider .range-value { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 80px; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    font-weight:bold; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    border-radius: 3px; 
 
    background: #3f3f3f; 
 
    padding: 5px 10px; 
 
    margin-left: 7px; 
 
} 
 
.range-slider .range-value:after { 
 
    position: absolute; 
 
    top: 8px; 
 
    left: -7px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 7px solid transparent; 
 
    border-right: 7px solid #3f3f3f; 
 
    border-bottom: 7px solid transparent; 
 
    content: ''; 
 
} 
 

 
::-moz-range-track { 
 
    background: #353535; 
 
    border: 0; 
 
} 
 

 
input::-moz-focus-inner { 
 
    border: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="et_pb_contact_form clearfix" method="GET" action="zd"> 
 

 
<p> 
 
<h5>Amount in INR</h5> 
 
<div class="range-slider"> 
 
    <input class="input-range" type="range" name="amount" value="" min="1000" step="1000" max="1000000"> 
 
    <span class="range-value"></span> 
 
    <input type="hidden" class="test" value=""> 
 
</div> 
 
</p> 
 

 

 

 
<button type="submit" class="et_pb_contact_submit et_pb_button">Submit</button> 
 

 
<button type="button" id="showValueButton">Show value of hidden field</button> 
 

 
</form>

来源

2017-03-22 12:42:04 Vaidas

请避免$（window）.load并使用$（window）.on（'load'....以兼容jQuery 3.x – gaetanoM

这是Suman Acoustics的实现。为了让代码尽可能熟悉他，我不应该改变它太多。 – Vaidas

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="et_pb_contact_form clearfix" method="GET" action="zd"> 

<p> 
<h5>Amount in INR</h5> 
<div class="range-slider"> 
    <input class="input-range" type="range" name="amount" value="" min="1000" step="1000" max="1000000"> 
    <span class="range-value"></span> 
    <input type="hidden" class="test" value=""> 
</div> 
</p> 



<button type="submit" class="et_pb_contact_submit et_pb_button">Submit</button> 

</form> 

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.range-slider .input-range { 
    -webkit-appearance: none; 
    width: 300px; 
    height: 10px; 
    border-radius: 5px; 
    background: #353535; 
    outline: none; 
} 
.range-slider .input-range::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background: #666; 
    cursor: pointer; 
    -webkit-transition: background .15s ease-in-out; 
    transition: background .15s ease-in-out; 
} 
.range-slider .input-range::-webkit-slider-thumb:hover { 
    background: #fff; 
} 
.range-slider .input-range:active::-webkit-slider-thumb { 
    background: #fff; 
} 
.range-slider .input-range::-moz-range-thumb { 
    width: 20px; 
    height: 20px; 
    border: 0; 
    border-radius: 50%; 
    background: #666; 
    cursor: pointer; 
    -webkit-transition: background .15s ease-in-out; 
    transition: background .15s ease-in-out; 
} 
.range-slider .input-range::-moz-range-thumb:hover { 
    background: #fff; 
} 
.range-slider .input-range:active::-moz-range-thumb { 
    background: #fff; 
} 
.range-slider .range-value { 
    display: inline-block; 
    position: relative; 
    width: 80px; 
    color: #fff; 
    font-size: 16px; 
    font-weight:bold; 
    line-height: 20px; 
    text-align: center; 
    border-radius: 3px; 
    background: #3f3f3f; 
    padding: 5px 10px; 
    margin-left: 7px; 
} 
.range-slider .range-value:after { 
    position: absolute; 
    top: 8px; 
    left: -7px; 
    width: 0; 
    height: 0; 
    border-top: 7px solid transparent; 
    border-right: 7px solid #3f3f3f; 
    border-bottom: 7px solid transparent; 
    content: ''; 
} 

::-moz-range-track { 
    background: #353535; 
    border: 0; 
} 

input::-moz-focus-inner { 
    border: 0; 
} 

$(window).load(function() { 
var range = $('.input-range').val(), 
    $('.range-value').html(range) 
$('.test').val(range) 

}); 
});

来源

2017-03-22 12:49:43

在输入隐藏字段获取输入范围滑块值jquery

回答

相关问题