We Keep Coding

Prevent submission of form for non numeric fields

I am trying to set up a form validation - this works - but only for odd numbers, if you enter an even number, e.g. part number TEST and quantity 2 then the alert will come up, if you enter qty 3 then the form will submit. Any ideas ?
Javascript
<script type="text/javascript">
function allnumeric(inputtxt)
{
var numbers = /^[0-9]+$/;
if(form2.qty.value.match(numbers) & (form2.product.value != ""))
{
return true;
}
else
{
alert('Please input numeric characters only or fill in the product field')
{
return false;
}
}
}
</script>
Form
<form id="form2" name="form2" method="post" action="booking-printlabel2.asp?insert=yes" onsubmit="return allnumeric()">
<input name="product" type="text" id="product" style="height:55px;font-size:30pt;" size="10"/>
<input name="qty" type="text" id="qty" style="height:55px;font-size:30pt;" size="3"/>
<input type="submit" name="Print Labels2" id="Print Labels2" value="Print Labels" style="height:55px;font-size:30pt;"/>
</form>
Thanks all - it was the typo, if(form2.qty.value.match(numbers) & (form2.product.value != "")) changed to if(form2.qty.value.match(numbers) && (form2.product.value != "")) and it now works.

Assuming you're targeting html5:
<input name="qty" type="number" id="qty" style="height:55px;font-size:30pt;"/>
Or if you really want to have type="text":
<input name="qty" type="text" id="qty" pattern="\d+" style="height:55px;font-size:30pt;"/>
Also, you've got a typo:
if(form2.qty.value.match(numbers) & (form2.product.value != ""))
should be
if(form2.qty.value.match(numbers) && (form2.product.value != ""))

Inside of your if condition you have to add one more if condition to check the odd and even number. You have to do this:
if(form2.qty.value.match(numbers) & (form2.product.value != ""))
{
var num = form2.qty.value;
if(num%2 == 0) {
alert('Even number');
} else {
return true;
}
}

function allnumeric(inputtxt)
{
var numbers = /^[0-9]+$/;
var qty = form2.qty.value;
if(qty.match(numbers) && (form2.product.value != ""))
{
if(qty & 1) // even number
return true;
else
alert('Even number');
return false;
}
else
{
alert('Please input numeric characters only or fill in the product field')
return false;
}
}
<form id="form2" name="form2" method="post" action="booking-printlabel2.asp?insert=yes" onsubmit="return allnumeric()">
<input name="product" type="text" id="product" style="height:55px;font-size:30pt;" size="10"/>
<input name="qty" type="text" id="qty" style="height:55px;font-size:30pt;" size="3"/>
<input type="submit" name="Print Labels2" id="Print Labels2" value="Print Labels" style="height:55px;font-size:30pt;"/>
</form>

Add empty inputs to an array with the value of 0

As a project I am building a "barebones" budgeting web-app. I have a form with a number of inputs to fill out income sources and amounts.
<form>
<div class="form-group">
<input type="text" class="form-control" id="incomeSrc1" placeholder="Enter Source" name="incomeSrc">
<input type="text" class="form-control" id="incomeSrc2" placeholder="Enter Source" name="incomeSrc">
<input type="text" class="form-control" id="incomeSrc3" placeholder="Enter Source" name="incomeSrc">
<input type="text" class="form-control" id="incomeSrc4" placeholder="Enter Source" name="incomeSrc">
</div>
</form>
And
<form>
<div class="form-group">
<input type="number" class="form-control" id="amount1" placeholder="Enter Amount" name="incAmount">
<input type="number" class="form-control" id="amount2" placeholder="Enter Amount" name="incAmount">
<input type="number" class="form-control" id="amount3" placeholder="Enter Amount" name="incAmount">
<input type="number" class="form-control" id="amount4" placeholder="Enter Amount" name="incAmount">
</div>
</form>
I tried to put all the inputs into a array amountArr so that I could add them together and determine the largest source of income.
This was my latest attempt :
var incAmount = document.getElementsByName("incAmount");
var amountArr = [];
//Income input function
for (var index = 0; index < incAmount.length; index++) {
incAmount[index].addEventListener("input", add3);
function add3() {
for (var i = 0; i < incAmount.length; i++) {
amountArr[i] = parseFloat(incAmount[i].value);
if (incAmount[i].value === NaN) {
amountArr[i] = 0;
};
};
};
};
The goal is that if an input wasn't filled then its value in the array will be 0. However all my attempts either threw errors like -
incAmount[i].value is undefined
or the array was filled with NaN's.
I also tried
if (amountArr[i].value !== NaN)
and
if (isNaN(amountArr[i]))
None of them returned true (executed the ensuing code)
Why doesn't amountArr or an empty incAmount reurn true when compared to NaN/null/undefined?

You should use parseFloat in the condition to convert the empty value to NaN before comparison.
-Or you should use the amountArr[i] in the condition to check if that is NaN.
Also, you should use isNaN function to check for NaN value.
if (isNaN(amountArr[i])) {
amountArr[i] = 0;

I found a solution that works.
for (var i = 0; i < incAmount.length; i++) {
amountArr[i] = parseFloat(incAmount[i].value) || 0;
The array amountArr will show 0's for all empty inputs.

Change input to Upper Case with CapsLock on

I would just like to know is it possible to change the input automatically to capitalized on a certain input field where the user entered a value with Caps Lock on.
<input placeholder="Brand Name" style="text-transform: capitalized" type="text" />
Caps On = TEST NAME
Expected: Test Name
<input placeholder="Brand Name" style="text-transform: capitalized" type="text" />
Caps Off = test name
Default: Test Name
I know some Names looks like Reader Van der Bank where not all the name parts are capitalized, but still would like to know if its possible. Thanks
Alternative : Think i might be using a php function to transform everything to lowercase and then capitalized.

Here is a javascript function to do that, if there is no CSS solution for it.
var id = document.getElementById("test");
function change() {
var arr = id.value.split(" ").map(function(x) {
return x.charAt(0).toUpperCase() + x.slice(1).toLowerCase()
});
id.value = arr.join(" ");
}
id.addEventListener("change", change);
id.addEventListener("keyup", change);
<input placeholder="Brand Name" id="test" type="text" />
For multiple elements with class test
var elements = document.getElementsByClassName("test");
function change() {
var arr = this.value.split(" ").map(function(x) {
return x.charAt(0).toUpperCase() + x.slice(1).toLowerCase()
});
this.value = arr.join(" ");
}
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("change", change);
elements[i].addEventListener("keyup", change);
}
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />

Do you want to enter all the text capitalized in the input? then u can use text-transform:uppercase in css and if u want to change it while typing you can use toUpperCase() on keyup of that input.

style="text-transform: capitalize"
(Question was edited. New Answer.)
Give your input an id, for this example let's say it's called "theInputId".
Then add an onkeypress event to it also and call the function script I've listed below.
<input placeholder="Brand Name" style="text-transform: capitalized"
type="text" id="theInputId" onkeypress="capsLock(event)">
<script>
//Script to check if Caps Lock is on.
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
document.getElementById('theInputId').style.textTransform = 'lowercase'
document.getElementById('theInputId').style.textTransform = 'capitalize'
}
}
</script>

Javascript - Why this piece of Javascript code is working in JSFiddle & JSBin but not on any browser? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
Please see the image. There are 7 text boxes where only one character can be entered .
4 conditions are to be fulfilled
The last text box - the rightmost/seventh textbox will be input first, then the sixth one will be filled , then the fifth and so on
Then the rightmost/seventh textbox value will shift (left shift) to the sixth and in this way values will shift until all 7 fields are filled
If we place the cursor on any other element except the last/seventh/rightmost it will move the cursor to the rightmost .
There will be backspace function which will delete the rightmost, ie. the the seventh field will be deleted the first field value will move to second, second to third , sixth to seventh , like this , a right shift will occur in this way all elements are to be deleted
The entire solution should be in Javascript , no JQuery can be used
https://i.stack.imgur.com/dISMA.jpg
Please refer the image above
Javascript Code
var myInputs = document.getElementsByTagName("input");
var myEditable = document.getElementById("seventh");
for (var i = 0; i < myInputs.length; i++) {
myInputs[i].addEventListener("click", function() {
document.getElementById("seventh").focus();
})
}
myEditable.addEventListener("keydown", function(evt) {
/****
* A few things are handled here: we can check if
* the input is a numeric, and we can check if the input
* is a backspace. Nothing else is allowed.
****/
if (evt.which == 8) {
// If a backspace has been pressed, move all the input
// values one field UP.
myEditable.blur();
for (var i = myInputs.length - 1; i >= 1; i--) {
myInputs[i].value = myInputs[i - 1].value;
}
myInputs[0].value = "";
} else if (evt.which >= 48 && evt.which <= 59) {
// Here, we have a number. Everything gets shifted to the LEFT
if (myInputs[0].value == "") {
for (var i = 0; i < myInputs.length - 1; i++) {
myInputs[i].value = myInputs[i + 1].value;
}
myEditable.value = String.fromCharCode(evt.which);
}
} else {
console.log("You did something else...");
}
})
HTML Code
<form>
<input type="text" id="first" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="fifth" size="1" maxlength="1" />
<input type="text" id="sixth" size="1" maxlength="1" />
<input type="text" id="seventh" size="1" maxlength="1" />
</form>
In this code there are two problems
First it is working in JSBin - https://jsbin.com/duxogezake/edit
similarly it is working in Fiddle but not in Chrome 55 or any other browser
But it should work in chrome by any means
When we are using backspace the cursor should remain in the last/rightmost/seventh text box but the cursor is not remaining - we have to place the cursor again & again in the last text box to do the operation (read the fourth condition in the top before )

TRY THIS: Press the "run code snippet" below and let me know if it works on your end.
I tested this in my localhost. It is working fine both in my Chrome and Opera, and the cursor is now staying in the rightmost input field.
Although, you seem to have other bugs in your code, because the texts "Ck" and "Dv" are appearing when the input values are shifted. (EDIT: nevermind. I think it's because I entered some characters instead of numbers, which you seemed to have restricted.)
var myInputs = document.getElementsByTagName("input");
for (var i = 0; i < myInputs.length; i++) {
myInputs[i].addEventListener("click", function() {
document.getElementById("seventh").focus();
})
}
/*wrap your code inside window.load to prevent premature executuion*/
window.onload = function() {
console.log('window has loaded');
var myEditable = document.getElementById("seventh");
myEditable.addEventListener("keydown", function (evt) {
/****
* A few things are handled here: we can check if
* the input is a numeric, and we can check if the input
* is a backspace. Nothing else is allowed.
****/
if (evt.which == 8) {
// If a backspace has been pressed, move all the input
// values one field UP.
myEditable.blur();
for (var i = myInputs.length - 1; i >= 1; i--) {
myInputs[i].value = myInputs[i - 1].value;
}
myInputs[0].value = "";
} else if (evt.which >= 48 && evt.which <= 59) {
// Here, we have a number. Everything gets bumped to the LEFT
if (myInputs[0].value == "") {
for (var i = 0; i < myInputs.length - 1; i++) {
myInputs[i].value = myInputs[i + 1].value;
}
myEditable.value = String.fromCharCode(evt.which);
}
} else {
console.log("You did something else...");
}
/*keep the cursor on the seventh input field right after hitting backspace and shifting values*/
myEditable.focus();
});
}
<form>
<input type="text" id="first" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="fifth" size="1" maxlength="1" />
<input type="text" id="sixth" size="1" maxlength="1" />
<input type="text" id="seventh" size="1" maxlength="1" />
</form>

validating the sum of inputs in text area

I have form that adds 6 user inputs. I want to have an alert if the total is not 100 or the user enters something other than a number. The alert works for a total greater than 100, but how do you check if it's less than 100 and all the inputs have been filled in? Right now I get the alert when the first input is being filled in.
<form name="myForm" id="form1">
<input oninput="findTotal()" type="text" name="qty" id="qty1" /> <br>
<input oninput="findTotal()" type="text" name="qty" id="qty2" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty3" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty4" /> <br>
<input oninput="findTotal()" type="text" name="qty" id="qty5" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty6" /><br>
<textarea type="text" name="total" id="total" min="100" max="100" readonly></textarea>
</form>
<script>
function findTotal(){
"use strict";
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value)) {
tot += parseInt(arr[i].value);
}
}
document.getElementById('total').value = tot;
if (tot > 100) {
alert("Please make sure numbers total 100");
document.getElementById("qty1").value = null;
document.getElementById("qty2").value = null;
document.getElementById("qty3").value = null;
document.getElementById("qty4").value = null;
document.getElementById("qty5").value = null;
document.getElementById("qty6").value = null;
document.getElementById("total").value = null;
return false;
}
if (tot < 100) {
alert("Please make sure numbers total 100");
document.getElementById("qty1").value = null;
document.getElementById("qty2").value = null;
document.getElementById("qty3").value = null;
document.getElementById("qty4").value = null;
document.getElementById("qty5").value = null;
document.getElementById("qty6").value = null;
document.getElementById("total").value = null;
return false;
}
}
</script>

To achieve expected result, use below option
1. Use onkeyup function to check whether input is number or not
2. Use if(tot >100) condition to check value greater than 100
3. if(tot <100) condition to check value less than 100 and alert placed on last field to avoid alert on every field
4.Clear values if conditions are met
HTML:
<form name="myForm" id="form1">
<input oninput="findTotal()" type="text" name="qty" id="qty1" onkeyup="checkinput(this)" /> <br>
<input oninput="findTotal()" type="text" name="qty" id="qty2" onkeyup="checkinput(this)" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty3" onkeyup="checkinput(this)" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty4" onkeyup="checkinput(this)" /> <br>
<input oninput="findTotal()" type="text" name="qty" id="qty5" onkeyup="checkinput(this)" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty6" onkeyup="checkinput(this)" /><br>
<textarea type="text" name="total" id="total" min="100" max="100" readonly></textarea>
</form>
JS:
function findTotal() {
"use strict";
var arr = document.getElementsByName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value)) {
tot += parseInt(arr[i].value);
}
}
document.getElementById('total').value = tot;
if (tot > 100) {
alert("Please make sure numbers total 100");
for (i = 0; i < arr.length; i++) {
arr[i].value = null;
}
}
if (tot < 100 && arr[5].value) {
alert("Please make sure numbers total 100");
for (i = 0; i < arr.length; i++) {
arr[i].value = null;
}
}
}
function checkinput(x) {
var y = x.value
var regex = /^[0-9]+$/;
if (y.match(regex)) {} else {
alert("Enter number");
x.value = '';
}
}
Codepen- http://codepen.io/nagasai/pen/rLKkBb

Your code has been cliffed off, but just so you know this:
if (tot > 100) {
alert("Please make sure numbers total 100");
return false;
}
if (tot < 100) {
alert("Please make sure numbers total 100");
return false;
}
Is the same as writing this:
if(tot !== 100) {
alert("Please make sure numbers total 100");
return false;
}
Edit:
It's because your event is firing on the oninput event, which fires every time a user types. Use the on submit event which fires when the form is submitted. Make sure to prevent default actions. Comment if this doesn't help you.

One way you may be able to solve this is to exit out of the program if you can't parse all the inputs to ints. If the default value can be parsed to an int, then you may need to add a special case. Edit : Just replace the "return false" with whatever you want to happen when the user enters a non-integer value.
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value)) {
tot += parseInt(arr[i].value);
}
else{
return false;
}
}