overwrite range slider values using javascript - javascript

I am using a range slider with text box, so whenever I slide the range, the value gets updated in the textbox. Also whenever I change the value in the textbox, the slider will move accordingly.
Here is the code I am using:
$('input[type="range"]').on('input change', function() {
$('#LoanAmntText').val($(this).val());
});
$('#LoanAmntText').keyup(function(e) {
var val = $(this).val().replace(/[^\d\+]/g, ""); // check only for digits
$('#LoanAmntRange').val(val).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="20000000" step="100000" value="4000000" id="LoanAmntRange" class="LoanAmntRange">
<input type="text" id="LoanAmntText" />
The slider's min, max and step values are used in a way that it will cover most common values while using the range slider. But when I use the textbox to enter the value, I would like to use any number starting from 0( for ex:I need to enter 2450003).But with current code, it's not allowing me to do so.
What will be the best way to achieve this?
Fiddle:https://jsfiddle.net/anoopcr/cy14pu1L/11/

Your keyup event will trigger after every key press. Since your slider has a step size of 100000 no one digit will able to comply with that. Either change your step size to 1 or use the change event instead.

Related

Dynamically check value and display alarm popover

I want to validate user input so he only provides numbers from a certain range with 0,5 steps. But I want my website to do it every time user swaps to another input form, not after he sends the data to my view. Can you give a hint of how should it be done? I don't know Javascript but I know there is onfocusout DOM event. Is it correct approach to use it, check whether or not value is valid and display an alarm based on that?
In general, there's no problem using onfocusevent.
Here's a hint on how to do this:
Create the input field
Add the onfocusout event handler and assign it a JavaScript function
Define the JavaScript function responsible for the validation process (which is, the same function we talked about in step 2)
This function takes the value inside the field and compares it, if it's not inside the range you desire then you can show an alarm or something like this.
I made a demo that doesn't involve alarming the user but instead it colors the border with either green or red, when you get desperate pay it a visit:
<input type="number" id="field1" onfocusout="validateField(0, 100, 'field1')"/><br/><br/>
<input type="number" id="field2" onfocusout="validateField(200, 300, 'field2')"/><br/><br/>
<input type="number" id="field3" onfocusout="validateField(400, 500, 'field3')"/><br/><br/>
<script>
function validateField(min, max, id) {
const value = document.getElementById(id).value;
if (value < min || value > max) {
document.getElementById(id).style.borderColor = "red";
}
else {
document.getElementById(id).style.borderColor = "lime";
}
}
</script>

Is it possible to limit max-date on keyup?

Summary: I have 5 text inputs, one of which is using the Date attribute. I'm adding validation to the inputs, and one feature I would like to add is to limit the max date. I know I can do this in HTML, however it looks like that only works for the calendar functionality. My thoughts are using keyup, so the user is unable to exceed the year 2050 (for example) within the input in real time.
Effort: I looked into the Max attribute in HTML for a while, but it looks like I will have to do this manually in either Js or jQuery. My immediate thought is to pull the value from the input, slice the last 4 integers, and then create text validation from that.
I would rather use a text input and create the entire validation myself, but I would like to keep the calendar functionality without using any external resources. I'm curious if there is a simpler or more efficient way of doing this?
<input type="date" class="search__input" id="adv-input-2" placeholder="MM / DD / YY" max="2050-12-31"></span>
I've also noticed that using keyup is actually not firing when I use it on a date input, until the entire date is inputted:
// sets limits for date input
$('#adv-input-2').keyup(function(e) {
let input = $(this);
});
For example, 10/DD/YYYY will result in value: "" until the entire field is completed.
If you want to do this manually then you can use change event instead of keyup like this way.
// sets limits for date input
$('#adv-input-2').change(function(e) {
let input = $(this);
console.log(input.val());
if(input.prop('max') < input.val()) {
input.val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="date" class="search__input" id="adv-input-2" placeholder="MM / DD / YY" max="2050-12-31"></span>

How to get value from selected input field (not using id)

I try to do simple code for guessing notes by ear. I have tabs with several empty input fields and you need to put right numbers in these fields according to certain melody (for guitar fretboard) . One button shows first note, another button checks whether you put right or wrong number and depend on it approves or erase your number.
I know how to check every input field using its id's but can i do it such way that when i push 2nd button it get value from selected input and compare it to its placeholder or value attribute?
It is my codepen
https://codepen.io/fukenist/pen/BxJRwW
Script part
function showfirst() {
document.getElementById("fst").value = "12"
}
function show1other() {
var snote = document.getElementById("scnd").value;
if (snote == 9 ){
document.getElementById("scnd").value = "9";
}
else {
document.getElementById("scnd").value = "";
}
}
You can use document.querySelectorAll() to get all your inputs and loop over them.
Sample:
// Get all inputs as an array (actually NodeList, to be precise; but it behaves similar to an array for this use case)
var inputs = document.querySelectorAll('input');
// Function to reveal the first input's value
function showFirst(){
inputs[0].value = inputs[0].dataset.v;
}
// Function to check all values and clear input if wrong
function checkAll(){
inputs.forEach(function(input){
if(input.dataset.v !== input.value){
// Wrong answer, clear input
input.value = '';
}
});
}
<input data-v="12" size="2" value=""/>
<input data-v="9" size="2" value=""/>
<input data-v="8" size="2" value=""/>
<br/>
<button onclick="showFirst()">Show First</button>
<button onclick="checkAll()">Check All</button>
Notes:
I have used data-v to store the correct answer instead of placeholder as that attribute has a semantically different meaning
It may be out of turn but my two cents: Writing out entire songs like this by hand may become tedious. Consider using a JSON string or something similar to map out the tabs and use a templating framework to align them.. Some things you may need to look out for while designing something like this : Alignment of notes (successive notes, simultaneous notes), timing of the song, special moves like slide, hammer on etc.
It may be a better idea to make the Guitar Strings be a background element (either as a background-image or as absolutely positioned overlapping divs) (so You don't have to worry about the lines going out of alignment)
Reference:
HTMLElement.dataset
document.querySelectorAll

jQuery .change() function heavily delayed with number-input

I have an issue with the .change() function in JQuery in combination with an input of the type "number".
Quick and dirty mockup that gets the point across:
JSfiddle: https://jsfiddle.net/vtuk69bj/
$('#testInput').change(function(){
$('#testDiv').html($('#testInput').val());
})
As you can see if you use the arrows inside the input to increase/decrease numbers quickly (or even not so quickly), the function is incredibly delayed in some cases.
I know I could use stuff like keyup or click, but that wouldn't cover both the option to increase/decrease with arrows or straight up input a number yourself. Is there some way to cover all my bases without having 2-3+ different functions?
The input event fires any time the value of the input changes.
$('#testInput').on('input', function() {
$('#testDiv').html(this.value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="number" min="1" max="999">
<div id="testDiv">
1
</div>

How to set prefilled input field active with Jquery/javascript?

I'm using a calculator widget where I can enter random values into an inputfield and then the widget automatically calculates when clicking the "go"-button.
Now I want to insert/prefill the value into this input field, since the value which needs to be calculated comes from a server. The issue though is, that this input field apparently only reacts on keypress. I tried to do this:
$('input[name="value"][data-type-money]').val('150.000').focus();
and
$('input[name="value"][data-type-money]').val('150.000').select();
which prefills the input field with the desired value but when I click the "go" button the calculation fails as long I dont enter the value manually into the input field. So, in the end my solution does not work.
Does anyone know how I can solve this?
If data changes frequently you can also use the setInterval function:
<input name="value" data-type-money="money">
setInterval (function(){
var moneyValue = "150.000";
$('input[name="value"][data-type-money]').val(moneyValue);
},1000);
fiddle here: http://jsfiddle.net/85pbnnu1/
or you can just do:
$(document).ready(function(){
$('input[name="value"][data-type-money]').val('150.000').change();
});
Edit, Updated
the input field is -
and reacts only on keypress, I mean when value is entered manually
If input value property cannot be changed , try replacing the element in DOM with value set at html using .replaceWith()
$('input[name="value"][data-type-money]')
.replaceWith("<input name=value data-type-money type=text value=150.00 />")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input name="value" data-type-money type="text" />

Categories