I'm using this code:
<input type="range" min="1" max="100" name="points">
How do I display the current value in the slider?
If you want to display the concrete number you could have a span or something over top the input and use jquery to handle the onchanged event.
HTML:
Price: <input id="price" type="text" value="10.50" readonly /><br/>
Quantity: <input id="qty" type="text" value="1" readonly />
<input id="rangePoints" type="range" min="1" max="100" value="1"/><br/><br/>
Total Price: <input type="text" id="total" readonly />
JS:
$(function() {
$("#rangePoints").change(function() {
var qty = $("#rangePoints").val();
var price = $("#price").val();
$("#qty").val(qty);
$("#total").val(qty*price);
});
});
Working JsFiddle
The range input type is supported only by newer browsers. But with a bit of JavaScript magic you can make it accessible for older browers too, you don't even need jQuery in order to do this.
In JavaScript, add the following snippet:
function updateCurrentValue(val) {
document.getElementById('currentValue').value=val;
}
And then, in the HTML add another input element where to show the current value of the slider:
<input type="range" min="1" max="100" name="points" onchange="updateCurrentValue(this.value);">
Current value: <input type="text" id="currentValue">
Related
I have a input <input type="text" value="1" readonly id='aaa'/>.
I would like to give it a function when user check the box then can edit the value of id=aaa.
Sample:
<input type="text" value="1" readonly/> <input type="checkbox" /> Checked this if you want to edit the value.
Thank you.
Add an onchange event to the checkbox that changes to readOnly attribute of its previous sibling (the textfield)
<input type="text" value="1" readonly id="aaa" />
<input type="checkbox" onchange="getElementById('aaa').readOnly = !this.checked" />
Checked this if you want to edit the value.
You want to use JavaScript to change the readOnly property. Set it to the opposite of whether the checkbox is checked.
document.getElementById('checksome').addEventListener('click', function() {
var changeThis = document.getElementById('readsome');
changeThis.readOnly = !this.checked;
});
<input id="readsome" type="text" value="1" readonly>
<label><input id="checksome" type="checkbox"> Click this to edit</label>
How to set html input type number, max value such that the max value is less than boundary (max) value not equal to boundary value? Now what I can the do is as following but thats not the right solution because the list will go on
<input type="number" min="0" max="24" />
How to can I accept any value between 0 - 24 not 0 or 24
<input type="number" min="0" max="23.9">
or
<input type="number" min="0" max="23.99">
or
<input type="number" min="0" max="23.999">
or
<input type="number" min="0" max="23.999">
or
<input type="number" min="0" max="23.9999">
I need to accept floating values, options other than regex
You can give the input a step to define the increments.
<input type="number" min="0" max="23.99" step="0.01">
input number should not allow number to type more than the maximum value please check my below code it will help you for sure.
$("[type='number']").keypress(function (evt) {
console.log(evt.key);
var regex = /[0-9]/;
if(regex.test(evt.key) ) {
let value = parseInt($("[type='number']").val()+evt.key);
console.log("value",value);
value <= 24 ? "" : evt.preventDefault();
}
else
evt.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="0" max="24" step="0.01">
I am trying to assign a HTML text attribute's value to a hidden attribute's value.
The text code:
<input type="text" name="number" id="number" maxlength="4" onBlur="myno=this.value; concatno=myno.concat('0001')" />
I've used alert to try the output of the concatno value. For example, if user enter 1010, then the output will be 10100001.
Then my hidden code:
<input type="hidden" id="hide" name="hide" value=concatno>
I want my hidden value to be 1010001, but instead the value became "concatno". How should I assign the value in my hidden attribute?
The problem here is that you never updated your #hide element.
You need to use some javascript, for example:
document.getElementById('hide').value = concatno;
Working snippet:
<input type="text" name="number" id="number" maxlength="4" onkeyup="var myno = this.value; var concatno = myno.concat('0001'); document.getElementById('hide').value=concatno;" />
<input id="hide" name="hide" value=concatno disabled>
Note that even if the event is not the issue here, I suggest you to use another trigger, like onkeyup, so that the value is updated more often.
I've also changed your hidden element to disabled to make it visual.
Moreover, you should learn to avoid inline JavaScript.
Here is how I'll do it:
document.getElementById('number').addEventListener("keyup", function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input id="hide" name="hide" value=concatno disabled>
Documentation: getElementById
Hope it helps.
The issue is that you never actually update the value of your #hide element. You need to set its value inside of your event binding (just made the input visible for reference):
<input type="text" name="number" id="number" maxlength="4" onblur="var myno = this.value; var concatno=myno.concat('0001'); document.getElementById('hide').value = concatno; console.log(concatno)" />
<input type="text" id="hide" name="hide" value=concatno disabled />
It's also worth noting though, that you should generally avoid using obtrusive event handlers. Instead, delegate event handling to external Javascript. This way, your designer doesn't need to understand or even worry about the JS.
Here's an example using unobtrusive handlers:
document.getElementById('number').addEventListener('blur', function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input type="text" id="hide" name="hide" placeholder="concatno" disabled />
Try using name/id instead;
<input type="text" name="number" id="number" maxlength="4" oninput='hide.value=(this.value + "0001")' autofocus=''/>
<input type="hidden" id="hide" name="hide" />
without inline scripts:
document.addEventListener('DOMContentLoaded', function() {
let hide = document.querySelector('#hide');
document.querySelector('#number').addEventListener('input', function() {
hide.value = this.value + '0001';
});
});
<input type="text" name="number" id="number" maxlength="4" autofocus='' />
<input type="hidden" id="hide" name="hide" />
I have two fields which both take numbers. One must always be higher than the other. For example you can have a field for age, and then a field for older sibling age which of course must be greater depending on the first field.
My fields are like this:
<input type="number" ng-model="age" required>
<input type="number" ng-model="olderSiblingAge" required>
I've tried using min="age" in the olderSibling input, but no luck, can still go below it.
You have to interpolate the value like this: min="{{vm.age}}" as specified in the number input documentation regarding to AngularJS.
angular
.module('app', [])
.controller('ctrl', function() {
var vm = this;
vm.age = 1;
vm.olderSiblingAge = 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
<label> Age </label> <br />
<input type="number" ng-model="vm.age" required ng-change="vm.olderSiblingAge = vm.age">
<br /><br />
<label> Older sibling age </label> <br />
<input type="number" ng-model="vm.olderSiblingAge" required min="{{vm.age}}">
</div>
Note: I've used the controller-as syntax. Of course you can use it as your were doing it with the $scope notation like this min="{{age}}"
TRY USING THIS CODE
<input type="number" ng-model="age" required>
<input type="number" ng-change="olderSiblingAge = (olderSiblingAge < age)?age+1:olderSiblingAge" ng-model="olderSiblingAge" required>
To achieve expected result, use below option of using ng-blur to compare entered values
code sample https://codepen.io/nagasai/pen/XEJpYa?editors=1010
HTML:
<div ng-app="test" ng-controller="testCtrl">
Age <input type="number" ng-model="age" required>
Sibling Age <input type="number" ng-model="olderSiblingAge" required ng-blur="check()">{{olderSiblingAge}}
</div>
JS:
var app = angular.module('test',[]);
app.controller('testCtrl',function($scope){
$scope.check = function(){
if($scope.age > $scope.olderSiblingAge){
$scope.olderSiblingAge = null
alert("older sibling age should be greater than age")
}
}
})
I have this HTML code
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
<input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
<input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>
If I type 1000 on id="amount", the id="cash" min will be 1000.
But it doesn't work.
The most straightforward way is to add an onchange handler to the payment input, such as:
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..."
onchange="document.getElementById('cash').min=this.value;"/>
<input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
<input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>
This gets you the functionality you are looking for without needing to include a third party library like jQuery.
In this case you should use Jquery onchange or keypress
$("#cash").attr({
"min" : $("#amount").val()
});
If you are using jQuery, use the below,
$("#amount").change(function() {
$("#cash").attr('min',$("#amount").val());
});
Refer - https://api.jquery.com/change/
I don't think you can put javascript in min, and also you have a pair of double quote in another pair of double quote, which will break the the tag (You can inspect element and you will figure out.)
So the idea is when the value of amount element change, we change cash's min value. So we can add a event listener to amount element. Whenever it is changed, set the min for cash element. Here is a working sample code:
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
<input required id="cash" type="number" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
</form>
<script>
function setMin() {
var amount = document.getElementById("amount");
var cash = document.getElementById("cash");
cash.min = amount.value;
}
var trigger = document.getElementById("amount");
trigger.addEventListener("change", setMin, false);
</script>
As you can see, I removed your js in html and add a event listener. Hope this will help.