I have a table that contains the following columns: size, width, length which are all input texts (the last one, length, is disabled).
I want to insert the division width/size into length once the user fills up these 2 fields. I don't know how to do it and would like to get help!
I created them as follows:
<td class="ClearDataTD"><input type="text" name="WIDTH__m$memIdx" value="" maxlength="5" size="5" class="ClearInput" onKeypress="var k = event.keyCode ? event.keyCode : event.charCode ? event.charCode : event.which ; return /^([\b0-9])\$/.test(String.fromCharCode(k));"></td>
<td class="ClearDataTD"><input type="text" name="SIZE__m$memIdx" value="" maxlength="5" size="5" class="ClearInput" onKeypress="var k = event.keyCode ? event.keyCode : event.charCode ? event.charCode : event.which ; return /^([\b0-9])\$/.test(String.fromCharCode(k));"></td>
<td class="ClearDataTD"><input type="text" name="LENGTH__m$memIdx" value="" maxlength="5" size="5" class="ClearInput" disabled="disabled"></td>
Thanks!
You can check from the JavaScript, something like: "When WIDTH__m$memIdx and SIZE__m$memIdx has values, then LENGTH__m$memIdx.value = WIDTH__m$memIdx/SIZE__m$memIdx.
function fillLength() {
var width = document.getElementById("width");
var size = document.getElementById("size");
var length = document.getElementById("length");
if(width.value && size.value) {
length.value = width.value/size.value
}
}
You want to call this function on focusout event. And probably you want to add few checks: if size is not a zero etc.
Related
The code below prevents negative numbers in input for numbers but does not allow me to enter decimals if I clear input and try to enter let's say 0.41
<input class='input2' oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null" type='number' step='0.1' id='success' />
Update
The code below allows decimals and prevents negative numbers but it does not allow me to place any condition. I also want to have one more condition of value can't be greater than 1: max = "1" not working
<input class='input2' min="0" max = "1" onkeypress="return event.charCode != 45" type='number' step='0.1' id='success'/>
var input = document.getElementById("success");
input.addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
if (input.value < 0)input.value = -input.value
if(input.value > 1)input.value = 1
}
});
<input class='input2' min=0 max=1 type='number' step='0.1' id='success' />
let element = $event.srcElement.nextElementSibling;
element.focus()
Here next element sibling is not working.
if enter 1st number into box 1 then it tab to next box automatically, it working fine in desktop browser but not in mobile browser ?
<input type="text" #otpvalue1 maxlength="1" [value]="otpValue1" (paste)="pasteEvent($event)" (keypress)="otpBox1($event)" (keydown)="handleBackSpaceBox1($event)"/>
<input type="text" #otpvalue2 maxlength="1" [value]="otpValue2" (paste)="pasteEvent($event)" (keypress)="otpBox2($event)" (keydown)="handleBackSpaceBox2($event)">
<input type="text" #otpvalue3 maxlength="1" [value]="otpValue3" (paste)="pasteEvent($event)" (keypress)="otpBox3($event)" (keydown)="handleBackSpaceBox3($event)">
<input type="text" #otpvalue4 maxlength="1" [value]="otpValue4" (paste)="pasteEvent($event)" (keypress)="otpBox4($event)" (keydown)="handleBackSpaceBox4($event)" />
otpBox1(obj) {
obj = (obj) ? obj : window.event;
let charCode = (obj.which) ? obj.which : obj.keyCode;
if ((charCode > 31 || charCode == 13) && (charCode < 48 || charCode > 57)) {
return false;
}
else {
this.otpValue1 = obj.key;
let otplength = this.otpValue1 + this.otpValue2 + this.otpValue3 + this.otpValue4;
this.otplength = otplength.length;
let element = obj.srcElement.nextElementSibling;
if (element != null) {
element.focus();
obj.preventDefault();
}
return true;
}
}
more code needed .. how are you deciding wether or not to jump ahead? many events are very different between touch devices and those controlled by a plugged in keyboard and mouse!
I am using charcode so that user can input only number, special-character and comma.
<input type="text" class="form-control numOnly"
onkeypress="return event.charCode >= 48 && event.charCode <= 57">
Right now it is accepting only number but I want to allow special character and comma using charcode.
what am I missing?
Try Below
<input type="text" class="form-control numOnly" onkeypress="return event.charCode >= 32 && event.charCode <= 57">
<input type="text" class="form-control numOnly" onkeypress="return Validate(event);">
<script type="text/javascript">
function Validate(event) {
var regex = new RegExp("^[0-9-!##$%*?,]");
var key = String.fromCharCode(event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
}
</script>
Here you can view all the javascript charcodes.
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
The comma one for example is 188.
You can also use https://github.com/KevinSheedy/jquery.alphanum to facilitate your life.
Edit: I noticed you have a class named NumOnly there. Is it only for styling?
I have a textbox with numeric inputs. Here is my javascript set to numeric textbox. But when I try to input letters, "e" is allowed. Problem: What I want to do is no letter should be allowed, only numeric numbers and no negative integer.
HTML:
<input type="numeric" id="usrid" name="usrid" placeholder="Enter number">
Javascript:
$(document).ready(function() {
$("#usrid").numeric();
});
You can use the type="number" and min=0 attributes in your input to enforce validation on these fields:
<input type="number" id="usrid" name="usrid" min=0 placeholder="Enter number">
However, this won't prevent input of negative or non-numeric characters into the input field. For that you'll need to bind a javascript event:
$('#usrid').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
you can try this
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
in this page you can find more example about of limit of number, in html
http://www.w3schools.com/tags/att_input_max.asp
If you want to take only the number input then input type should be number like following
<input type="number" id="usrid" name="usrid" placeholder="Enter number">
but it takes the letter 'e' which is stands for exponential value.Better you have try the following which use js to validate the input using on 'keypress'
HTML code:
<input type="input" id="usrid" name="usrid" placeholder="Enter number">
JavaScript Code:
<script type="text/javascript">
$(document).ready(function() {
$('[id^=usrid]').keypress(validateNumber);
});
function validateNumber(e) {
var key = window.e ? e.keyCode : e.which;
if (e.keyCode === 8 || e.keyCode === 46
|| e.keyCode === 37 || e.keyCode === 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
</script>
I have a script with a HTML form with a text field inside, right now this text field allows only numbers.
Although I would like to have the text field only allow numbers, and only allow the current value of a variable +1.
For example, say the current value of the variable(currentValue) is 1 then the only number you can put into the text field is 2.
Here is the code I have so far:
HTML:
<form id="value-form" action="value.php" method="POST" name="value-form">
<input onkeypress="return isNumberKey(event)" type="text" name="amount" id="amount" /> <!-- This is the text field I would like to only allow the value+1 -->
<input type="image" src="Button1.png" id="customButton" value="submit" alt="but"/>
</form>
Javascript:
function isNumberKey(evt) //This is the function I use to only allow numbers in the text field
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
var request = new XMLHttpRequest();
request.open('GET', 'currentValueFile.txt', false);
request.send();
var currentValue = request.responseText //this is the variable value I want to only allow +1 in the text field
document.getElementById("currentValue").innerHTML = currentValue;
<form id="value-form" action="value.php" method="POST" name="value-form">
<input onkeypress="return isNumberKey(event)" type="text" name="amount" id="amount" /> <!-- This is the text field I would like to only allow the value+1 -->
<input type="image" src="Button1.png" id="customButton" value="submit" alt="but"/>
</form>
<script type="text/javascript">
function toDec(code) {
return code - 48;
}
function isNumberKey(evt) //This is the function I use to only allow numbers in the text field
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57 || toDec(charCode) != currentValue + 1))
return false;
return true;
}
</script>
<script type="text/javascript">
var request = new XMLHttpRequest();
request.open('GET', 'currentValueFile.txt', false);
request.send();
var currentValue = parseInt(request.responseText) //this is the variable value I want to only allow +1 in the text field
</script>