Dear all, I guess I need some JavaScript help here...
Is it possible to have a normal numerical-input [v2] that is pre-filled with the result of a previous slider [v1_SQ001] from the same page?
> Whenever I move the slider, the value inside the numerical input will be replaced by the slider-value
> When I modify the numerical-input, the slider should not move
Your are (partly) right, setting a default value does not work on the same page, but you can solve this using the slider value in the question text of a following question. When this question is on another page, setting the default value will work.
I'm really confused why you can use the value from slider_SQ001 on the same page in the question text, you can also
use this value for default-values on another page
using JS, but you are not able to to this on the same page
If you are familiar with JS, there is probably a good reason for this.
Nevertheless, THANKS for your example! Unfortunately, it's not what I'm looking for.
Place this script in the source of the numeric question. It will put a listener on the first slider found on the page and update the numeric input value as the slider is manipulated.
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify elements
var thisQuestion = $('#question{QID}');
var thisInput = $('input:text', thisQuestion);
var sliderQuestion = $('.numeric-multi:eq(0)');
var sliderInput = $('input:text', sliderQuestion);
$(sliderInput).on('slideEnabled',function(){
// Listener on slider
$(this).on('slide slideStop', function(event) {
// Load the numeric input
$(thisInput).val($(this).val());
});
});
});
</script>
This script in the source of the numeric question will load that question if the slider value is >= 0, otherwise it clears the numeric input. If you don't want it cleared, comment out the ELSE statement.
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify elements
var thisQuestion = $('#question{QID}');
var thisInput = $('input:text', thisQuestion);
var sliderInput = $('.answer-item.slider-item:eq(0) input:text');
$(sliderInput).on('slideEnabled',function(){
// Listener on slider
$(this).on('slide slideStop', function(event) {
// Load the numeric input if value is >= 0
if($(this).val() >= 0) {
$(thisInput).val($(this).val()).trigger('keyup');
}
else {
$(thisInput).val('').trigger('keyup');
}
});
});
});
</script>
