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>
Related
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 text box that I want a person to add a number, and only a number into. How would I make a function that, if the value added to the text box was not a number, they would get an alert that said, "must add a number", or something similar. without using RegEx!
thanks!
http://www.w3schools.com/tags/att_input_type.asp
You want to use type="number" on your input field
Type a number:
<input type="number"/>
Here is a solution that you can use to only allow the user to enter numbers, they can´t add anything that´s not a number
<HTML>
<HEAD>
<SCRIPT language=Javascript>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
</BODY>
</HTML>
Hey guys i've been having some issues with calling my javascript function to my main HTML page.
I've got the javascript code:
function phonenumber(inputtxt)
{
var phoneno = /^\d{10}$/;
if(inputtxt.value.match(phoneno))
{
return true;
}
else
{
alert("Not a valid Phone Number");
return false;
}
}
But when i call it in my HTML i have this code:
<input type='text' name='text1'/>Phone Number: <input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/>
Are you able to assist me with this? sorry i'm kinda new to this :(
Thanks!
Your onclick attribute needs to know if the validation passed or not. In other words, you should return the value from your validator function.
... onclick="return phonenumber(document.form1.text1)" ...
I don't understand why you using onlclick method for validate phone no. field. I have a function try this for validation of number
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) ) // put your condition here
return false;
return true;
}
and fire it by using
<input type="text" name="mobile" id="mobile" class="" onkeypress="return isNumberKey(event)" />