Javascript textbox either 1 can be entered - javascript

I had 2 textbox, but only 1 can be enter and cannot enter both fields. For example if I enter value in input1, input2 is disable. if both value is 0 both field disable to false.
Any help here?
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
function myFunction() {
if (input1 != 0 && input2 == 0){
document.getElementById("input2").disabled = true;
//ALERT(1);
}else if(input1 == 0 && input2 != 0){
//ALERT(2);
document.getElementById("input1").disabled = true;
}else if(input1 == 0 && input2 == 0){
//ALERT(3);
document.getElementById("input1").disabled = false;
document.getElementById("input2").disabled = false;
}
}
<input id="input1" style="width: 100px;" type="number" min="0" value="0.00" onchange="myFunction()"/>
<input id="input2" style="width: 100px;" type="number" min="0" value="0.00" onchange="myFunction()"/>

You can use the blur event, which fires when an element has lost focus.
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
function myFunction() {
input1.addEventListener("blur", event => {
let value = event.target.value;
input2.disabled = !!value && value != 0;
});
input2.addEventListener("blur", event => {
let value = event.target.value;
input1.disabled = !!value && value != 0;
});
}
<input id="input1" style="width: 100px;" type="number" min="0" value="0.00" onchange="myFunction()" />
<input id="input2" style="width: 100px;" type="number" min="0" value="0.00" onchange="myFunction()" />

Consider the following code example.
$(function() {
function isEmpty(fObj) {
console.log($(fObj).val());
return ($(fObj).val() == "" ? true : false);
}
$(".form").on("change blur", "input", function() {
if (!isEmpty(this)) {
$(".form input").not(this).prop("disabled", true);
}
if ($(this).val() == "0") {
$(".form input").prop("disabled", false);
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<input id="input1" style="width: 100px;" type="number" min="0" value="0.00" />
<input id="input2" style="width: 100px;" type="number" min="0" value="0.00" />
</div>
You can use change or blur callbacks and examine the target (this) of the event.

Related

Value of Sum not changed after unchecked Checkbox Button

Im looking solution for this problem.
I have 3 input number that will sum all of that and display it to input4.
All my code is working fine but only when I unchecked the checkbox, the value of sum didn't update.
Scenario example:
Checked on first checkbox and enter value of 1
Checked on second checkbox and enter value of 1. This will trigger the display value and will show result=2
Unchecked the first checkbox will clear the first input value, but the result display not update(still result=2.. Should be result=1)
Html:
<input type="checkbox" id="chkbxcasting" />
<input type="number" id="casting1" name="casting1" value="0" disabled onchange="valChange(this);" onkeyup="sum1();" /><br>
<input type="checkbox" id="chkbxdeburring" />
<input type="number" id="deburring1" name="deburring1" value="0" disabled onchange="valChange(this);" onkeyup="sum1();" /><br>
<input type="checkbox" id="chkbxecoat" />
<input type="number" id="ecoat1" name="ecoat1" value="0" disabled onchange="valChange(this);" onkeyup="sum1();" /><br><br>
<input class="invisibleinput" type="number" id="totalaffectqty" name="totalaffectqty" readonly />
CSS
input[value="0"] { color: #fff; }
Javascript + JQuery
function valChange(obj){
if(obj.value=="0"){
obj.style.color="#fff"
} else{
obj.style.color="#000"
}
}
$(document).ready(function() {
$('#chkbxcasting').on('change', function() {
$("#casting1").prop("disabled", !$(this).is(':checked'));
$("#casting1").val('');
});
$('#chkbxdeburring').on('change', function() {
$("#deburring1").prop("disabled", !$(this).is(':checked'));
$("#deburring1").val('');
});
$('#chkbxecoat').on('change', function() {
$("#ecoat1").prop("disabled", !$(this).is(':checked'));
$("#ecoat1").val('');
});
});
function sum1() {
let casting1 = +(document.getElementById('casting1').value);
let deburring1 = +(document.getElementById('deburring1').value);
let ecoat1 = +(document.getElementById('ecoat1').value);
let result1 = casting1 + deburring1 + ecoat1;
if (!isNaN(result1)) {
document.getElementById('totalaffectqty').value = result1;
}
else {
document.getElementById('totalaffectqty').value = '0';
}
}
This is the demo:
Demo Here
Thank You in Advance
Working Demo - https://jsfiddle.net/disingh123/szmt8rv2/3/
<input type="checkbox" id="chkbxcasting" />
<input type="number" id="casting1" name="casting1" value="0" disabled /><br>
<input type="checkbox" id="chkbxdeburring" />
<input type="number" id="deburring1" name="deburring1" value="0" disabled /><br>
<input type="checkbox" id="chkbxecoat" />
<input type="number" id="ecoat1" name="ecoat1" value="0" disabled /><br><br>
<input class="invisibleinput" type="number" id="totalaffectqty" name="totalaffectqty" readonly />
$(document).ready(function () {
$('body').on('change', function (event) {
const { target: { type } } = event
if (type === 'checkbox') {
const jQueryFiedTarget = $(event.target)
const isChecked = jQueryFiedTarget.is(':checked')
const associatedTextField = jQueryFiedTarget.next()
associatedTextField.prop("disabled", !isChecked);
associatedTextField.val(isChecked ? '' : '0')
if (!isChecked) {
sum1()
}
}
})
$('body').on('keyup', function (event) {
const { target: { type } } = event
if (type === 'number') {
sum1()
}
})
});
function sum1() {
const casting1 = +(document.getElementById('casting1').value);
const deburring1 = +(document.getElementById('deburring1').value);
const ecoat1 = +(document.getElementById('ecoat1').value);
const result1 = casting1 + deburring1 + ecoat1;
document.getElementById('totalaffectqty').value = isNaN(result1) ? '0' : result1
}

Add html attribute if the input value meet requirements

Let say I have two input.
When I key-in value in input1 for example 0.4 and meets the requirement then the input2 will remove the readonly attribute. Meanwhile if I input value in input1 is 0.3 then the input2 attribute will become readonly again.
It doesnt work. Maybe i missed out anything here
$(".input1").keydown(function() {
var dInput = $(this).val();
if (dInput >= 0.4 && dInput <= 0.6) {
$(".input2").attr('readonly', true);
} else {
$(".input2").removeAttr("readonly");
}
});
function isNumberKey(e) { // stub
return true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input1" onkeypress="return isNumberKey(event)" id="input1" name="input1" value="" />
<input type="text" class="input2" onkeypress="return isNumberKey(event)" id="input2" name="input2" value="" readonly />
1: Use keyup function, as the value fills up in a field later and you are trying to capture at keydown
2: I have switched the if and else block statements as per your description. Your original code contradicts what you are saying here.
$(".input1").keyup(function() {
var dInput = $(this).val();
if(dInput >= 0.4 && dInput <= 0.6)
{
$(".input2").removeAttr("readonly");
}
else
{
$(".input2").attr('readonly',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input1" o id="input1" name="input1" value="" />
<input type="text" class="input2" id="input2" name="input2" value="" readonly />
You are setting the attribute in the wrong condition. I also prefer input event instead of keydown here:
$(".input1").on('input', function() {
var dInput = $(this).val();
if(dInput >= 0.4 && dInput <= 0.6){
$(".input2").removeAttr("readonly");
}
else{
$(".input2").attr('readonly', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input1" id="input1" name="input1" value="" />
<input type="text" class="input2" id="input2" name="input2" value="" readonly />
use keyup
function isNumberKey(e){
}
$(".input1").keyup(function() {
var dInput = $(this).val();
dInput = parseFloat(dInput);
console.log(dInput);
if(dInput >= 0.4 && dInput <= 0.6)
{
$(".input2").attr('readonly',true);
}
else
{
$(".input2").removeAttr("readonly");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input1" onkeypress="return isNumberKey(event)" id="input1" name="input1" value="" />
<input type="text" class="input2" onkeypress="return isNumberKey(event)" id="input2" name="input2" value="" readonly />

Input tag type number for credit card

I have 4 input tags.
<input type="number" class="br1" name="first">
<input type="number" class="br1" name="secound">
<input type="number" class="br1" name="third">
<input type="number" class="br1" name="fourth">
I want to set maxlength (4 numbers) for every input tag. I tried to set maxlength but it doesn't work. Also, when I enter 4 numbers in one input tag, I want to automaticlly input in next input tag.
Thanks.
If you want to use maxlength change type of input to text. Then you can parse all you your inputs strings to a number.
$(".br1").keyup(function () {
if (this.value.length == this.maxLength) {
var $next = $(this).next('.br1');
if ($next.length)
$(this).next('.br1').focus();
else
$(this).blur();
}
});
$(".btn").click(function() {
var string = "";
$(".br1").each(function() {
string += this.value;
});
number = parseInt(string);
console.log(number);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="br1" name="first" maxlength=4>
<input type="text" class="br1" name="secound" maxlength=4>
<input type="text" class="br1" name="third" maxlength=4>
<input type="text" class="br1" name="fourth" maxlength=4>
<button class="btn">toNumber</button>
Use max="9999" and min="0000" to set the maximum value for input type number.
As per http://w3c.github.io/html/sec-forms.html#the-maxlength-and-minlength-attributes maxlength is not valid for input of type number.
You can use input event attached to .br1 elements, .slice() with parameters 0, -1 to remove character if .length of .value is greater than 4
var inputs = document.querySelectorAll(".br1");
for (let input of inputs) {
input.oninput = () => {
if (input.value.length > 4) {
input.value = input.value.slice(0, -1)
}
}
}
<input type="number" class="br1" name="first">
<input type="number" class="br1" name="secound">
<input type="number" class="br1" name="third">
<input type="number" class="br1" name="fourth">
You can do this using only javascript. Also note the maxLength attribute don't work on number, so you may need to use input type='text'
Here is snippet
// get the input
var inputBox = document.getElementsByClassName("br1")
// loop through the array of input
for (var i = 0; i < inputBox.length; i++) {
// creating a closure
(function(x) {
// adding event listener to each of the input
inputBox[x].addEventListener('keydown', function(x) {
// checking value of maxLength
var maxLength = parseInt(this.attributes["maxlength"].value, 10);
// length of the input value
var myLength = this.value.length;
// if both are equal then find the next sibling
if (myLength >= maxLength) {
var next = this.nextElementSibling
// if the next sibling is input, set focus to it
if (next.tagName.toLowerCase() === "input") {
next.focus();
}
}
})
}(i))
}
It as simple as posible, Try this:
$("input[type=number]").keypress(function (e) {
var el = $(this);
var currentValue = el.val();
var char = String.fromCharCode(e.keyCode || e.which);
if (currentValue.length === 3) {
el.val(currentValue + char);
e.preventDefault();
el.next().focus();
} else if (currentValue.length >= 4) {
e.preventDefault();
}
})
input[type=number]{
width:60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="br1" name="first">
<input type="number" class="br2" name="first">
<input type="number" class="br3" name="first">
<input type="number" class="br4" name="first">

jQuery iterate through input fields and disable

I have a question I'm trying to figure out...
I have a lot of inputs in a form, but I only need to iterate through the ones in the div with player class.
<div class="player">
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
</div>
What I need is to iterate through them all once an input field has been modified and calculate how many of the input fields have 0 in them and if its 1 or more than 4 disable submit button.
I've been trying like this but it doesn't seem to work
$(document).ready(function()
{
$(function()
{
var $sum = parseInt($("#sum").text(), 10);
var $num = 0;
if(($sum == 0))
{
$("button[name=submit2]").attr("disabled", "disabled");
}
$(".player input[type=text]").bind("DOMSubtreeModified", function()
{
$.each($("input[type=text]"),function(){
if (!isNaN(+this.value))
{
++$num;
}
});
if (($num > 4) || ($num == 1))
$("button[name=submit2]").attr("disabled", "disabled");
else
$("button[name=submit2]").removeAttr("disabled");
});
})
});
I've also tried
$(document).ready(function(){
$(".unit").each(function() {
$(this).keyup(function(){
CheckNull();
});
});
function CheckNull() {
var $num = 0;
$(".unit").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
++$num;
}
});
if (($num > 4) || ($num == 1))
$("button[name=submit2]").attr("disabled", "disabled");
else
$("button[name=submit2]").removeAttr("disabled");
}
});
Try changing
if(!isNaN(this.value) && this.value.length!=0) {
++$num;
}
with
if($(this).val() != "" && $(this).val() !=0) {
++$num;
}
to be more jQuery style
I guess this is what you want :
// control function
function checkInputs() {
var num = 0;
// foreach inputs
$(".player input").each(function(i,item) {
var value = $(this).val();
if (value.trim() === "0") {
num++;
}
});
if (num === 1 || num > 4) {
$("#myForm input[type='submit']").attr("disabled", "true");
} else {
$("#myForm input[type='submit']").removeAttr("disabled");
}
}
// if you want a first check after loading the page :
checkInputs();
$(".player input").change(
// This function will be called each time an input change in the player div
checkInputs
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="myForm">
<div class="player">
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
</div>
<input type="submit"/>
</form>
I am not sure why are you checking the length? this.value.length!=0
I tweaked your code, here is the fiddle link : http://jsfiddle.net/bLa6evpg/
Hope this help!
I couldn't follow your function, but I believe your problem is that you are running it on page load, and not on the onchange of your input boxes. I achieved the desired functionality by doing that in this codepen
html:
<div class="player">
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number"/>
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
</div>
<button name="submit2">Click</button>
JS:
function validateChanges() {
var playerDiv = document.getElementsByClassName("player")[0];
var inputs = playerDiv.getElementsByTagName("input");
var total = 0;
for(var i = 0; i < inputs.length; i++) {
total += parseInt(inputs[i].value);
}
if(total == 1 || total > 4) { // IF total is 1 or more then 4
document.getElementsByTagName("button")[0].disabled = true;
} else {
document.getElementsByTagName("button")[0].disabled = false;
}
}
looks like i was almost right just messed up a bit Silent_coder fixed this +i added some tricks i saw here
$(document).ready(function(){
CheckNull();
$(".player input").each(function() {
$(this).keyup(function(){
CheckNull();
});
});
function CheckNull() {
var $num = 0;
$(".player input").each(function() {
if(this.value != 0 ) {
$num++;
}
});
if (($num > 4) || ($num <= 1))
$("button[name=submit2]").attr("disabled", "disabled");
else
$("button[name=submit2]").removeAttr("disabled");
}
});
Works like i charm for me ^^
Here is a JsFiddle example
$(function () {
$('.unit').on('change', function () {
var units = 0;
$('.unit').each(function (index, value) {
var unit = parseInt($(value).val(),10);
units += unit;
if(units >= 4 || units === 1) {
$('form > button').prop('disabled', true);
} else {
$('form > button').prop('disabled', false);
}
});
});
});

Javascript focus() not working when onkeyup event is executed in iOS

I have 4 input boxes to enter 4 digit passcode. I want to focus to the next input box when the first input box is filled by user.
I had to use document.getElementById('second').focus(); to focus to the next input box. Unfortunately this does not work in iOs.
I did further research and found that focusing is not happened with the event like "onkeyup", "onkeypress", but it works with "onclick" event.
Do you guys any idea to fix this problem or alternative solution to fix this problem.
HTML
<input id="first" name="first" type="number" style="width: 50px; height: 50px;" maxlength="1" onkeyup="focusSecondBox(event);" />
<input id="second" name="second" type="number" style="width: 50px; height: 50px;" maxlength="1" onkeyup="focusThirdBox(event);"/>
JS
function getEventCharCode(evt){
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
return charCode;
}
function isEmptyElement(element){
return (element === null || element.value === null || element.value === '');
}
function focusSecondBox(evt){
var element = document.getElementById('first');
var previousElement = document.getElementById('first');
var nextElement = document.getElementById('second');
focusInput();
}
function focusInput(){
var charCode = getEventCharCode(evt);
if (isEmptyElement(element)) {
if (charCode === 8) {
previousElement.focus();
previousElement.value = previousElement.value;
}
} else if (nextElement !== null) {
nextElement.focus();
}
}
Thank you
In iOS safari. Difficult or impossible to show keyboard by call focus() without mouse event as far as I know.
alternative solution
But, in this case, I implemented what expect in the following ways:
Use invisible input field.
Focus invisible input field when any input passcode field focused.
Move invisible input field position with key event.
Change passcode field by invisible input field.
HTML
<div id="dummyDiv" style="width:0px;height:0px;overflow:hidden;">
<input id="dummy" type="number" />
</div>
<input id="p0" type="number" style="width: 50px; height: 50px;" maxlength="1" />
<input id="p1" type="number" style="width: 50px; height: 50px;" maxlength="1" />
<input id="p2" type="number" style="width: 50px; height: 50px;" maxlength="1" />
<input id="p3" type="number" style="width: 50px; height: 50px;" maxlength="1" />
JavaScript
window.addEventListener('load', function() {
var words = [];
for(var i=0; i < 4; i++) {
words[i] = document.getElementById('p'+i);
}
var dummy = document.getElementById('dummy');
var dummyDiv = document.getElementById('dummyDiv');
words.forEach(function(word) {
word.addEventListener('click', function(e) {
dummy.focus();
});
});
dummy.addEventListener('keypress', function(e) {
if (dummy.value.length >= 4 || !String.fromCharCode(e.keyCode).match(/[0-9\.]/)) {
e.preventDefault();
}
});
dummy.addEventListener('keyup', function(e) {
console.log(dummy.value);
var len = dummy.value.length;
for(var i=0; i<4; i++) {
if(len <= i) {
words[i].value = '';
} else {
words[i].value = dummy.value[i];
}
}
if (len>=4) {
return;
}
dummyDiv.style.position = 'absolute';
var rect = words[len].getBoundingClientRect();
dummyDiv.style.left = rect.left+'px';
dummyDiv.style.top = (rect.top+15)+'px';
});
});
working sample
http://nakaji-dayo.github.com/ios-safari-passcode-boxes/
Please look on iOS
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#hidebox {position:absolute; border: none; background:transparent;padding:1px;}
#hidebox:focus{outline: 0;}
</style>
</head>
<body>
<input type="text" maxlength="1" onkeyup="keyUp(this)" onkeydown="keyDown(this)" size="2" id="hidebox" at="1">
<input type="text" maxlength="1" size="2" id="mFirst" at="1" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mSecond" at="2" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mThird" at="3" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mFourth" at="4" onfocus="onFocus(this)">
</li>
<script type="text/javascript">
window.onload = function() {
document.getElementById("mFirst").focus();
}
var array = ["mFirst","mSecond","mThird","mFourth"];
function keyUp(e) {
var curId = array[Number(e.getAttribute("at"))-1];
var nextId = array[Number(e.getAttribute("at"))];
var curval= e.value;
var letters = /^[0-9a-zA-Z]+$/;
if(e.value.match(letters)){
document.getElementById(curId).value = curval;
if(e.getAttribute("at") <= 3){
var nextPos = document.getElementById(nextId).offsetLeft;
e.setAttribute("at",Number(e.getAttribute("at"))+1);
e.style.left = nextPos+"px";
}
e.value = ""
}else {
e.value = "";
}
}
function keyDown(e) {
var curId = array[Number(e.getAttribute("at"))-1];
document.getElementById(curId).value = "";
}
function onFocus(e) {
document.getElementById("hidebox").focus();
document.getElementById("hidebox").setAttribute("at",Number(e.getAttribute("at")));
document.getElementById("hidebox").style.left = e.offsetLeft+"px";
document.getElementById("hidebox").style.top = e.offsetTop+"px";
}
</script>
</body>
</html>

Categories