I have an oninput event on a textarea to check the height and resize it. Now I need to edit the value sometimes. I do this just by editting the val() in jQuery, but that does not trigger the oninput event. Is there any way to trigger the oninput event programatically with jQuery?
Use .on('input'). For example:
$('textarea').on('input', function() {
text = $('textarea').val();
$('div').html(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Type something here"></textarea>
<div></div>
It is a bit too late, but for future reference, there is the .trigger method.
$("#testArea").on("input", function(e) {
$("#outputArea").text( $(e.target).val() )
});
$("#testArea").val("This is a test");
$("#testArea").trigger("input");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="testArea" type="text" />
<div id="outputArea"></div>
You can simply invoke it, e.g.:
$("input")[0].oninput = function () {
alert("hello");
};
$("input")[0].oninput();
...but as #Sammaye points out, jQuery has no explicit "oninput" handler, so you'll have to use POJS.
Demo on JS Fiddle.
oninput is not actually in JQuery yet.
You can see posts about it here:
http://forum.jquery.com/topic/html5-oninput-event
http://bugs.jquery.com/ticket/9121
Basically the general consensus is that they don't want it yet.
But no, changing val() directly would not trigger the html5 oninput because it's specification states it is when the user, in the UI, changes the value of the input.
Edit:
However some one has kindly made a plugin for people who wish to use HTML5 only events: https://github.com/dodo/jquery-inputevent
You can bind to input and change:
input will be triggered at user input
change will be triggered at change() and to val(" ") assignments, but after some changes
$("#textarea").bind("input change", function() {
alert("change happend");
});
...
after you binded to change you can call it manualy on each val(" ") assignment:
$("#textarea").val("text").change();
or you can overwrite jQuery val(" ") method to trigger change on each user val(" ") call:
(function ($) { var fnVal = $.fn.val;
$.fn.val = function(value) {
if (typeof value == 'undefined') {
return fnVal.call(this);
}
var result = fnVal.call(this, value);
$.fn.change.call(this); // calls change()
return result;
};
})(jQuery);
Try with "keypress" or "keydown".
Example 1:
$("#textarea").keypress(function(){
alert($("#textarea").val());
});
Example 2:
$("#textarea").keydown(function(){
alert($("#textarea").val());
});
push RUN CODE SNIPPET for seeing results
i've been searching for a better example to join an input range to an input value and so
i modified Fernando's example in a JQuery plugin ,so :
for every
<input type="range" min="1" max="100" value="50" id="range1">
you'll have his value:
<input type="text" disabled id="value" class="range1" value="0">
so is like for any parent range id="range1" there is a child id="value" class="range1"
<!-- <script src="../js/jquery.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
1<input type="range" min="1" max="100" value="50" id="range1"><input type="text" disabled id="value" class="range1" value="0"><br>
2<input type="range" min="1" max="100" value="50" id="range2"><input type="text" disabled id="value" class="range2" value="0"><br>
3<input type="range" min="1" max="100" value="50" id="range3"><input type="text" disabled id="value" class="range3" value="0"><br>
4<input type="range" min="1" max="100" value="50" id="range4"><input type="text" disabled id="value" class="range4" value="0"><br>
...<br>
n<input type="range" min="1" max="100" value="50" id="rangen"><input type="text" disabled id="value" class="rangen" value="0"><br>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('input').on("input",function(){
$('input').each(function(index) {
//console.log('1 '+index + ': ' + $(this).text()+',id='+$(this).attr('id'));
if($(this).attr('id')=='value'){
//console.log('2 class='+$(this).attr('class'));
var obj=$('input#'+$(this).attr('class') );
var hisvalue=$(this);
//console.log('3 parent`s value='+obj.val() );
obj.on("input",function(){
hisvalue.val(obj.val());
});
}
});
});
$('input').trigger("input");
});
//-->
</script>
Related
If user types in a value more than 5, I want to set it to 5.
function maxValCheck() {
if (document.getElementById('xxx').value > 5) {
document.getElementById('xxx').value = 5;
}
}
<input id="xxx" type="number" onkeypress="maxValCheck()" max="5" min="1" value="1" />
Just change event to onkeyup:
<input id="xxx" type="number" onkeyup="maxValCheck()" max="5" min="1" value="1"/>
You can select the element by getElementById or from the querySelector and need to specify the event that you're going to trigger as the first parameter and second parameter is the function that you're going to execute on the added method in addEventListener.
<input id="xxx" type="number" max="5" min="1" value="1" />
<script>
const selectElement = document.querySelector('#xxx');
selectElement.addEventListener('change', function (evt) {
console.log("value is changing in input");
});
// or
document.getElementById("xxx").addEventListener('change', function (evt) {
console.log("value is changing in input");
});
</script>
I have a slider in my html form like this. It is for an online experiment. I have already set it to be required, but the thing is I wanna make sure the user has manipulated the slider in any way before submitting (i.e., click it at least). Because the slider comes at 50% position chose already by default, the user could just click "OK" without actually thinking about the answer. In this way, I could behaviorally force them to click it at least and make some reflections.
I've done Googling and didn't find any solutions on this.
<form id="q-familiarity">
<label for="fam slider">How well are you familiar with this item ? </label><br>
<input name="fam slider" type="range" min="1" max="100" value="50" step="0.5" class="slider" id="fam-slider" required>
<button type="submit" form="q-familiarity">OK</button>
<form>
How could I implement a mechanism, where user has to at least click the slider once to "activate" the OK button (perhaps also OK goes from grey to black to indicate the change)?
I would prefer the solution to be html and css based, with as little js as possible. (I learned html and css by myself for the experiment and don't know any js) But I would guess js has to be used in the solution, which is ok.
Thank you.
I'd suggest to disable the submit button by default and enable only if the user interacts with the input, like so
Codepen demo
<form>
<label for="fam slider">How well are you familiar with this item ? </label><br>
<input type="range" min="1" max="100" value="50" step="0.5" id="fam-slider" required>
<button type="submit" id="submit-btt" disabled="disabled">OK</button>
<form>
Js
let slider = document.getElementById('fam-slider');
let button = document.getElementById('submit-btt');
slider.addEventListener('input', () => {
button.removeAttribute('disabled');
})
At the input event on the slider remove the disabled attribute on the submit button.
I've used the input event instead of the change event because it is triggered as soon as the user drags the slider control, and allows the user to also choose the starting value (if he wants to)
Well, unfortunately you need to use JS anyway to do it. If I have understood correctly, you're looking for a simple change event.
var slider = document.getElementById( 'fam-slider' );
var submit = document.getElementById( 'submit' );
slider.addEventListener( 'change', function() {
submit.disabled = false;
});
<form id="q-familiarity">
<label for="fam slider">How well are you familiar with this item ? </label><br>
<input name="fam slider" type="range" min="1" max="100" value="50" step="0.5" class="slider" id="fam-slider" required>
<button id="submit" type="submit" form="q-familiarity" disabled>OK</button>
<form>
Here is a jQuery solution for you if you prefer it over vanilla JS. The button is by default disabled, but as soon as you change the slider it becomes active.
$('#slider').change(function() {
$("#submitbutton").prop("disabled", false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="q-familiarity">
<label for="fam slider">How well are you familiar with this item ? </label><br>
<input id='slider' name="fam slider" type="range" min="1" max="100" value="50" step="0.5" class="slider" id="fam-slider" required>
<button id= "submitbutton" type="submit" disabled='true' form="q-familiarity">OK</button>
<form>
You can check if the slider was changed or clicked and set a validation variable. Then on submit check your "valid" flag:
var valid = false;
$("input.slider").on("change click", function(){
valid = true;
});
$("#submit").click(function(){
if (!valid){
// do your logic here
console.log("not valid");
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="q-familiarity">
<label for="fam slider">How well are you familiar with this item ? </label><br>
<input name="fam slider" type="range" min="1" max="100" value="50" step="0.5" class="slider" id="fam-slider" required>
<button id="submit" type="submit" form="q-familiarity">OK</button>
<form>
So when ever the user changes the value of the range slider I want that both range sliders get updated to the same value. The same value will then be printed on the P > span. The second part is working but I can't get them to show the same value. (I want the range slider handel to be exact the same for both of them.) Extra: Is there anyway to convert this to jQuery and remove the JS part from the HTML? Thanks for your time.
HTML:
<form>
<label for="maximumReadTime">Maximale Leestijd</label>
<input type="range" min="0" max="60" value="30" step="15" id="maximumReadTimeMobile" onchange="updateUserMaximumReadTime(this.value);">
<p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTimeMobile">30</span> min</p>
</form>
<form>
<label for="maximumReadTime">Maximale Leestijd</label>
<input type="range" min="0" max="60" value="30" step="15" id="maximumReadTime" onchange="updateUserMaximumReadTime(this.value);">
<p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTime">30</span> min</p>
</form>
JS: I have tested .value on the range input but it did not work.
function updateUserMaximumReadTime(val) {
document.getElementById('userMaximumReadTime').innerHTML = val;
document.getElementById('userMaximumReadTimeMobile').innerHTML = val;
}
Here's a quick example that should help get you in the right direction.
$('input[type=range]').on('change', function() {
$('input[type=range]').val($(this).val())
});
$('input[type=range]').on('change', function() {
$('input[type=range]').val($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label for="maximumReadTime">Maximale Leestijd</label>
<input type="range" min="0" max="60" value="30" step="15" id="maximumReadTimeMobile">
<p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTimeMobile">30</span> min</p>
</form>
<form>
<label for="maximumReadTime">Maximale Leestijd</label>
<input type="range" min="0" max="60" value="30" step="15" id="maximumReadTime">
<p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTime">30</span> min</p>
</form>
You can make one class for both ranges. Then on update You need to call c allback function that will apply this value to other range elements.
$('.rangeSlider').range({
update : function (currentSlider){
$('.rangeSlider').range({ value : currentSlider.value });
}
});
It's example of 'how it can be done'.
When i will back home - i'm will be available to give You much wider explanation.
How do you get the value of an input range slider into a variable? Below is the range I'm using. Suppose I drag the range to 12, then I need "12" as the variable that I want to then pass to a function.
<input type="range" min="1" max="30" value="15" />
Edit: I don't want a button to confirm the value or something, I want that everytime the value is changed, it gets passed to the function, so it'll be dynamic!
PS: It may not be the best question out there, but I've honestly tried looking for an answer before posting the question.
You just need to bind to the change event:
<input type="range" min="1" max="30" value="15" />
$("input").change(function(){
var value = $(this).val();
alert(value);
})
If you give an id to your field:
<input id="myRange" type="range" min="1" max="30" value="15" />
then:
$('#myRange').val();
First step it is not really required, but it makes things easier.
You can do this in every form field element:
$('selector').val();
And you will get its value.
UPDATE FOR YOUR QUESTION:
Use .change event to bind a function that make whatever you want to do with this value, for example:
$('#myRange').change(function(){
var myVar = $(this).val();
alert(myVar);
});
Just use register an event on the input:
<input type="range" min="1" max="30" value="15" oninput="alert(this.value)" />
you could of course also call a function in the oninput field.
jsfiddle
<input id="field" type="range" min="1" max="30" value="15" />
var input = document.getElementById('field');
console.info(input.defaultValue); // value default (15)
input.onchange = function () {
console.info(input.value); // value change
};
You can do this simply by adding a listener to the field's input event, updating your variable every time it fires.
var input=document.querySelector("input"),
value=input.value;
console.log(value);
input.addEventListener("input",function(){
value=this.value;
console.log(value);
},0);
<input max="30" min="1" type="range" value="15">
Give the input an Id. Then use
For JQuery
Var a = $('#whateverId').val();
For JavaScript
Var a = getElementById('whateverID).innerHtml;
I have a slider (input type range) that is supposed to run a function when the value is being changed. The function should then display the new value in a separate div container. After placing an alert in the function, I know that the function isn't being called, but after googling for an hour and trying a few different methods I just can't find the error.
Here's the HTML part:
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>
JavaScript:
// Slider
function updateSlider(slideAmount)
{
alert("error");
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}
It works, you just need to make sure that the JavaScript function is defined when the element is rendered, for example:
<script>
function updateSlider(slideAmount) {
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}
</script>
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>
See this demo: https://jsfiddle.net/Mmgxg/
A better way would be to remove the inline onchange attribute:
<input id="slide" type="range" min="1" max="100" step="1" value="10">
<div id="sliderAmount"></div>
And then add the listener in your JavaScript code:
var slide = document.getElementById('slide'),
sliderDiv = document.getElementById("sliderAmount");
slide.onchange = function() {
sliderDiv.innerHTML = this.value;
}
https://jsfiddle.net/PPBUJ/