Using a solution from a relevant question, how can I use the following script to only work on a specific input by limiting the input range between 0 and 0.20? For example, I have two number inputs with the ID's "A" and "B", and I only want the following script to work on input id="A".
$('input').on('input', function () {
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value < 0)
this.value = 0;
else if (value > 0.20)
this.value = 0.20;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="0" />
<input type="number" id="b" value="0" />
Use the ID of the specific element.
$('#a').on('input', function () {
Demo:
$('#a').on('input', function() {
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value < 0)
this.value = 0;
else if (value > 0.20)
this.value = 0.20;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="0" />
<input type="number" id="b" value="0" />
Alternatively, if you only need to support HTML5-compatible browsers you could ditch the JavaScript and simply use min and max attributes on the element itself. You can also use step to control how much the button increases the value by, which makes sense in a scenario where the input range is so small:
<input type="number" id="a" value="0" min="0" max="0.2" step="0.1" />
<input type="number" id="b" value="0" />
Change the selector from selecting all inputs to just the one you want e.g. $('#a').on('input', ...
Related
i need sum of (every check box value X its textbox value)
<input name="33" value="280000" onclick="test(this);" type="checkbox">
<input id="33" style="width:20px;float: left; text-align: center" type="text">
example:
fist checkbox value = 20 X its textbox value = 10
second checkbox value = 5 X its textbox value = 2
my answer = 20*10 + 5*2 = 210 (ok)
also i need when checkbox value changes my answer change, without click.
const totalBox = document.getElementById("total")
document.querySelectorAll("input[type=text]").forEach((input) => input.addEventListener("input", calculate))
document.querySelectorAll("input[type=checkbox]").forEach((input) => input.addEventListener("change", calculate))
function calculate() {
const checkboxes = document.querySelectorAll("input[type=checkbox]")
let total = 0
for (let checkbox of checkboxes) {
if (checkbox.checked) {
total += Number(checkbox.value) * Number(document.getElementById(checkbox.name).value)
}
}
totalBox.textContent = total
}
calculate()
<input name="33" value="280000" type="checkbox" checked>
<input id="33" value="10" type="text">
<br/>
<input name="34" value="150000" type="checkbox">
<input id="34" value="15" type="text">
<h2>Total: <span id="total"></span></h2>
Here you go with the solution https://jsfiddle.net/yuhpbz47/
var total = 0;
$('button[type="submit"]').click(function(){
$('input[type="checkbox"]').each(function(){
if($(this).is(':checked')){
total += $(this).val() * (parseInt($(this).next().val()) || 0 );
}
});
console.log(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="10" />
<input type="text" />
<br/>
<input type="checkbox" value="20"/>
<input type="text" />
<button type="submit">
Submit
</button>
If they are always grouped by two you can simply take all inputs, multiply every pairs value and add it up:
var result = Array.from(document.getElementsByTagName("input")).reduce(function(result,el,i,arr){
return result+i%2?el.value*(arr[i-1].checked?arr[i-1].value:0):0;
},0);
for shure this can be executed inside an onchange handler.
http://jsbin.com/muvigedodu/edit?js
You are trying to achieve, when a check box is clicked a value is multiplied by the value of the input check box then for all check box give us the sum right? if so this below code which is well documented should help out with it
Observe the pattern i used to get the multiply value so it can be dynamic
Hope it helps.
$(document).ready(
function(){
/**
* this is used to update our view so you see what we are * doing currently now
*/
function updateView(value){
$("#view").html(value);
}
$(".sum").click(function(event){
//we get our value to multiply our value with
var multiply = $(this).attr("multiply");
var value = $(this).val();
//we multiply here
var answer = multiply*value;
//we sum up this value with the sum in the hidden fied if checked else substract
var sumField = $("#sum");
if($(this).is(':checked')){
sumField.val(Number(sumField.val())+answer);
}else{
sumField.val(Number(sumField.val())-answer);
}
//update our view
updateView(sumField.val());
});
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Check boxes
<br>
1. <input type="checkbox" value="10" multiply="20" class="sum"> value 10, multiply 20 <br>
2. <input type="checkbox" value="5" multiply="10" class="sum"> value 5, multiply 10 <br>
3. <input type="checkbox" value="3" multiply="5" class="sum"> value 3, multiply 5 <br>
<input type="hidden" value="0" id="sum">
value: <div id="view">
</div>
I have 5 textboxes (With pre-populated data) representing address lines 1,2,...5 respectively. The requirement is to check if TEXTBOX 1 is empty, then shift data from textbox 2 to 1, textbox 3 to 2 and so, on. This is to make sure there aren't any empty textboxes in between the sequential textboxes. How do I achieve it in Jquery? If all textboxes are empty, I will show required field error.
Here I am just trying to save data in a variable.
custData.CustAddr1 = $("#txtCustAddr1" + value).val().trim() == "" ? $("#txtCustAddr2" + value).val() : $("#txtCustAddr1" + value).val();
In the above code I need to check all the 5 textboxes, If txtbox1 is empty, use data from textbox 2, else from 3 else 4 else 5.
Vanilla JavaScript (jQuery solution below)
Here is a solution that does not use jQuery. It uses linear time and does not update textbox values when this is not needed, so it is no problem to call this often.
The idea on a high level is to keep track of which is the first empty textbox and, while looping over all textboxes, move textbox values to this empty one as we encounter them.
You can display an error if at the end of this function, the first empty textbox is still the first one (firstEmpty === 0 in the below demo code).
function enforceSequential(selector) {
var firstEmpty = -1, current = -1,
textboxes = document.querySelectorAll(selector);
for (let textbox of textboxes) {
current++;
if (textbox.value === '') {
if (firstEmpty < 0) {
firstEmpty = current;
}
} else if (firstEmpty >= 0) {
textboxes[firstEmpty].value = textbox.value;
textbox.value = '';
firstEmpty++;
}
}
}
document.getElementById('run').addEventListener('click', () => enforceSequential('.box'));
input {
display: block;
margin: 0 0 1em 0;
}
<input type="text" class="box" value="foo" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="bar" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="baz" />
<button id="run">Run script</button>
jQuery variant
Of course, if you want to use jQuery, you can.
function enforceSequential(selector) {
var firstEmpty = -1,
textboxes = $(selector);
textboxes.each((current, textbox) => {
textbox = $(textbox);
if (textbox.val() === '') {
if (firstEmpty < 0) {
firstEmpty = current;
}
} else if (firstEmpty >= 0) {
textboxes.eq(firstEmpty).val(textbox.val());
textbox.val('');
firstEmpty++;
}
});
}
$('#run').on('click', () => enforceSequential('.box'));
input {
display: block;
margin: 0 0 1em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="box" value="foo" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="bar" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="baz" />
<button id="run">Run script</button>
I think the best method would be :
Get all textboxes values that are not empty as a JS array
If array is empty, display your error
Else, empty textboxes values
Then fill textboxes (in correct order) with array values
I have a number and range input that are working in unison using same value using Angular.js value. When the value is set to 0 (which is what it is by default when page loads $scope.lbs_needed = 0;, I want to show a placeholder="0" whenever the value of the number or range input is set to 0 that way the 0 value isn't in front of the user's input without them having to manually delete default 0.
Here's my html:
<form>
<div class="form-group">
<label for="number">Pounds of nitrogen desired per acre:</label>
<input type="number" class="form-control number-input" id="number" ng-model="lbs_needed" ng-change="calculate2()" value="{[{lbs_needed}]}" min="0" max="500" value="{[{lbs_needed}]}" placeholder="0">
<input type="range" min="0" max="500" class="form-control" id="number" ng-model="lbs_needed" ng-change="calculate2()" value="{[{lbs_needed}]}" placeholder="0">
</div>
</form>
So, if I understand correctly you want the textbox to have a default value but also want it to be changeable instantly without users having to backspace over the default?
Try this:
var input = document.getElementById('change-default');
input.onfocus = function () {
if (input.value == 0) {
input.value = '';
}
}
input.onblur = function () {
if (input.value == '') {
input.value = '0';
}
}
<input type="number" placeholder="0" value="0" id="change-default">
What I'm doing is listening for an focus event, you could also use addEventListener instead of onfocus.
If the value of the input box is 0 you remove its value ready for the user to type theirs in.
If I have few on my form. How can I access to input what I need?
<label> First </label>
<input type="number" value="1" min="1">
<label>22</label>
<span>There I need value in input * val in label</span>
<label> Second </label>
<input type="number" value="1" min="1">
<label>12</label>
<span>There I need value in input * val in label</span>
................................
How can I do this? Maybe I need to use loop?
Not sure exactly which input you are trying to access.
You can use document.querySelectorAll("input[type=number]").
It will return an array with all inputs of type "number". Iterate through them to get what you need
You can use for loop to loop all inputs and addEventListener to run function on input change. Then just calculate value for each input and add to span as textContent.
var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', function() {
var val = this.value * Number(this.nextElementSibling.textContent);
this.nextElementSibling.nextElementSibling.textContent = val;
})
}
<label>First</label>
<input type="number" value="1" min="1">
<label>22</label>
<span>There I need value in input * val in label</span>
<label>Second</label>
<input type="number" value="1" min="1">
<label>12</label>
<span>There I need value in input * val in label</span>
If you want to add values to spans even before input change you can add this part of code to previous one.
var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
var val = inputs[i].value * Number(inputs[i].nextElementSibling.textContent);
inputs[i].nextElementSibling.nextElementSibling.textContent = val;
inputs[i].addEventListener('change', function() {
var val = this.value * Number(this.nextElementSibling.textContent);
this.nextElementSibling.nextElementSibling.textContent = val;
})
}
<label>First</label>
<input type="number" value="1" min="1">
<label>22</label>
<span>There I need value in input * val in label</span>
<label>Second</label>
<input type="number" value="1" min="1">
<label>12</label>
<span>There I need value in input * val in label</span>
You can add an id to the controls and then access it using jquery by the id.
<label> First </label>
<input type="number" value="1" min="1" id="input1">
<label id="label1">22</label>
<span id="span1">There I need value in input * val in label</span>
<label> Second </label>
<input type="number" value="1" min="1" id="input2">
<label id="label2">12</label>
<span id="span2">There I need value in input * val in label</span>
Then on your dcoument.ready just calculate it like this:
$( document ).ready(function() {
var result1=$(#input1).val()*$(#label1).val();
$('#span1').val(result1);
var result2=$(#input2).val()*$(#label2).val();
$('#span1').val(result2);
});
After you gave an id to the controls you can do it even nicer, looping through all the inputs an dynamically multiply them:
var i=0;
$("#myForm input[type=text]").each(function() {
i=i+1;
$('#span'+i).val($('#input'+i)*('#label'+i));
});
I have a input field for which I am trying to replicate hours in the day 0 - 24:
<input type="number" min="0" max="24" step="1" value="00" class="time-hours">
<input type="number" min="0" max="60" step="1" value="00" class="time-seconds">
When I click on the up/down chevrons, the max, and min I can go to are 24 and 0 as set in my attributes.
However, if I click on a cell, I can enter any number, e.g. 100.
How can I ensure only numbers between 0 and 24 can be entered?
If its a form submit, the browser will stop the user. But in case you really need the validation, you can do this:
$(".time-hours").keyup(function() {
if ($(this).val() > 24) {
$(this).val("24");
}
if ($(this).val() < 0) {
$(this).val("0");
}
});
$(".time-seconds").keyup(function() {
if ($(this).val() > 60) {
$(this).val("60");
}
if ($(this).val() < 0) {
$(this).val("0");
}
});
Here is the JSFiddle demo
If you want to use javascript you can simple use this below code:
<input type="number" min="0" max="24" step="1" value="00" class="time-hours" onblur="return minmax(this.value);">
<input type="number" min="0" max="60" step="1" value="00" class="time-seconds" onblur="return minmax(this.value);">
<script>
function minmax(val){
if(val > 24 || val < 0){
alert("Value cannot be grater than 24 and min than 0");
return false;
}
}
</script>
I have used onblur because whenever value changes in two boxes they will trigger a function and it will check textbox value if value is greater than 24 or min than 0 it will prompt an alert.
I have used alert you can use anything for your validations.
I hope it will help you.
You can perform this pure JavaScript solution:
<script>
ob = document.getElementById('f');
ob.onblur = function(){
if (ob.value*1 > ob.max*1 || ob.value*1 < ob.min*1){
ob.value = 24
}
}
</script>
Here you give the field an id. You are able to enclose it into a function to use it many fields.
Here is a demo