We Keep Coding

Fill up an input text after 2 other input boxes were filled

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.

Accept Number Special Character and Comma in Input field using Charcode

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?

Restrict a textbox to only integers between 1 and 99

I am trying to add a text box which accepts only integers between 1 and 99. I tried adding a number type element with min and max but that works only when changing the number using the ticker
<input type="number" min="1" max="99" />
May I know a better way to achieve this?
UPDATE:
I would like to immediately validate the input like may be by replacing the entry with an empty character.

You can use JavaScript to validate the input on a key event (such as keyup). Here's an example that will clear out anything that's not an integer between 1 and 99.
var inputBox = document.getElementById('inputBox');
inputBox.addEventListener('keyup', function(e) {
inputBox.value = "" + inputBox.value;
if (e.which < 48 || e.which > 57) {
// if not an integer
clearInput();
return;
}
if (inputBox.value.toLowerCase() !== inputBox.value.toUpperCase()) {
// if a letter
clearInput();
return;
}
if (parseInt(inputBox.value) < 1 || parseInt(inputBox.value) > 99) {
// if value is not in the desired range
clearInput();
return;
}
});
function clearInput() {
// invalid entry -- clear out input box
inputBox.value = "";
}
inputBox.focus(); // this is just for ease of testing
<input id="inputBox" type="number" min="1" max="99" />

How about this? This shouldn't allow for negative numbers, and you're restricted to only 2 characters.
<input type="number" min="1" max="99" maxlength="2" />

Textbox numeric with still character e input and negative integers with javascript

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>

Show Input tag(textbox control) with two digit format in HTML5

How can I make an input tag, that always accepts two digits? like 01, 02, 03 etc up to 24. A leading zero should be present in case of single digits(0 to 9)
<input id="hourInput" type="number" min="1" max="24" step="1" />

Unfortunately it is not possible, in pure HTML5, to achieve this. Javascript will be required...
<input id="hourInput" type="number" min="1" max="24" step="1" onchange="if(parseInt(this.value,10)<10)this.value='0'+this.value;" />
EDIT:
Since this answer seems to get good trafic, I'd like to add the fact that the approach I have suggested is a naïve way to do it and will only correctly work with a min attribute higher than -9. If the number goes lower, the 0 will still get added resulting in 0-234 when the user enter a negative value of 234.

There is no native way to do that. However you can use oninput event to format.
<input id="hourInput" type="number" oninput='format(this)' min="1" max="24" step="1" />
Javascript
function format(input){
if(input.value.length === 1){
input.value = "0" + input.value;
}
}
http://jsbin.com/dedixapasi/edit?html,js,output

You can also do using JQuery like following:
$(document).ready(function() {
$("#hourInput").keydown(function(event) {
if ( event.keyCode == 46 || event.keyCode == 8 ) {
}
else {
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
$("#hourInput").keyup(function(event) {
var str = $('#hourInput').val();
if(str > 24)
{
$('#hourInput').val(str.substring(0,str.length - 1));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="hourInput" type="number" min="1" step="1" />
Hope it helps.

function format(input){
if(input.value < 0) input.value=Math.abs(input.value);
if(input.value.length > 2) input.value = input.value.slice(0, 2);
$(input).blur(function() {
// if(input.value.length == 1) input.value=0+input.value;
// if(input.value.length == 0) input.value='01';
//* if you want to allow insert only 2 digits *//
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="number" step="1" oninput="format(this)">
It works for me... hope for you as well :)