using array items as commands?

garyed · Sunday at 05:47 PM

I have a lot of inputs on a form & a good many have to be numeric. I have all the names of the inputs that need to be posted as numbers in an array.

I don't want to use type="number" on the inputs but would rather use a javascript function that would return either true or false when submitting the form with onsubmit= "return function()".

This way I can put up an alert & display the field in error & it won't change the look of the page. The problem is I can't figure out how to use the elements of the array in the commands needed to test them.

I can figure out how to check them for numeric values individually but at this point I just need to figure out how I can use the elements of the array in the command : documet.form_name.input_name.value so I can check them all.

Here's a temporary code:

<html>
<head> 
 </head>
<body>
<script>
const arrayone= ["it_c","it_h","ot_c","ot_h."];
function hasNumericValue(arr) { // check for numeric values posted in the array of the input fields
var linker;
var items;
  for (let i = 0; i < arr.length; i++) {
items=arr[i];
linker="document.tester."+items+".value";
alert("you made it to step2"+ linker)
    if (linker == 10) {
      alert("it works true");
      return true;
    }
  }
  alert("it doesn't worlk False");
  return false;
}
</script>
<form name="tester" method="post" action="" onsubmit="return hasNumericValue(arrayone);" >
<input name="it_c" type="text" value="">  <br> 
<input name="it_h" type="text" value=""> <br> 
<input name="ot_c" type="text" value=""> <br> 
<input name="ot_h" type="text" value=""> <br> 
<input type="submit" value="submit">
</form>
</body>
</html>

mac_gyver · Sunday at 06:31 PM

i recommend giving the fields a class name. you can then eliminate the array and just use getElementsByClassName to get a collection of the elements to loop over. see if this gets you closer to what you want -

<html>
<head> 
 </head>
<body>
<script>

function hasNumericValue() {

	const matches = document.getElementsByClassName("numeric");

	for (let i = 0; i < matches.length; i++) {
		alert(Number.parseInt(matches[i].value));
	}
}
</script>
<form name="tester" method="post" action="" onsubmit="return hasNumericValue();" >
<input name="it_c" type="text" class='numeric' value=""> <br> 
<input name="it_h" type="text" class='numeric' value=""> <br> 
<input name="ot_c" type="text" class='numeric' value=""> <br> 
<input name="ot_h" type="text" class='numeric' value=""> <br> 
<input type="submit" value="submit">
</form>
</body>
</html>

you can then test if each value is or is not a number.

gizmola · Sunday at 08:27 PM

I was going to suggest something similar to mac's post, however, I think a better UI choice would be to use AddEventListener to all the fields for the change event using getElementsByClassName to find them.

There's an awful lot wrong with what you have so far, not to mention that you have yet to come up with any code that determines if a text input is actually a numeric value. It is deceptively complicated and non-trivial to do so, but that issue aside, what you were asking about could be remedied using code like this.

One thing I noted is that you are trying to make a lot of global variables for no particular reason. Try to get in the habit of making as few variables as possible, and use ES6 let and const rather than var (which makes a global variable).

What you were missing is the DOM method document.getElementsByName. It returns a nodelist, so make sure you investigate that. I did not try and provide you a solution to your stated goal, but rather, something that moves your work in progress forward, and omits issues with the pattern you are missing. Using this as a form validation means you can't return true for any individual element, but only return true when all elements successfully validate. So you do that by falling through to a return true at the end of the loop.

There are several problems even with this code, but hopefully it helps move you forward from where you started.

const arrayone= ["it_c","it_h","ot_c","ot_h"];

function hasNumericValue(arr) { 
  // check for numeric values posted in the array of the input fields

    for (let i = 0; i < arr.length; i++) {
        let item = document.getElementsByName(arr[i]);
        let linker = item[0].value

        alert("Checking Field: " + arr[i]);
        if (linker == 10) {
            alert("Value was 10");
        } else {
            return false;
        }
    }
    return true;
}

garyed · Sunday at 09:56 PM

Thanks to all, I appreciate the ideas.

If I'm understanding things correctly shouldn't the line in the above code be the letter "i" instead of "0" in the: let linker = item[0].value

Here's what I came up with that seems to work:

const arrayone= ["it_c","it_h","ot_c","ot_h"];
function hasNumericValue(arr) { // check for numeric values posted in the array of the input fields
var items, comd1, comd2;
  for (let i = 0; i < arr.length; i++) {
items=arr[i];
comd1="document.tester."+items+".value";
comd2=eval(comd1);
    if (isNaN(comd2)) {
            alert(comd2+ " is not a number");
      return false;
    }
  }
  alert("all the numbers needed have been entered");
  return true;
}

Edited Sunday at 10:01 PM by garyed

gizmola · 2025-02-03T02:10:43Z

4 hours ago, garyed said:

If I'm understanding things correctly shouldn't the line in the above code be the letter "i" instead of "0" in the: let linker = item[0].value

No. In the code I provided I loop through your array and get each name attribute, then call document.getElementsByName().

As I mentioned what you get back is a nodeList.

This is because when you call GetElementsByName the result can be 0 or more nodes, as you are able to use the same name attribute for any number of html elements.

In this case, even though that is true, it's your markup and we know that there should only be one node found, and that will be the input that matches the name you passed. As arrays are zero based, item[0] will be the first (and since you control the markup) only element in the nodelist.

You can think of it as an array that has only one element in it.

As to what you came up with, using eval() should be avoided, as it's highly dangerous to the end user, should there be any possibility that someone can inject a string containing javascript into the string.

You continue to attempt to reference part of the DOM document this way, when you already were presented 2 ways NOT to do that, either of which will work.

As we don't know the actual form of these numbers that you require for input, we can't really advise you. isNaN by itself is not going to do what you stated you want to do.

Here's a couple of examples:

let foo = '';
let bar = '0xFF';

isNaN(foo);
isNaN(bar);

A quick test of these should be of concern to you.

If the numbers entered must be integers then mac's Number.parseInt() might lead you to a robust and simple solution.

An alternative is to utilize javascript's regular expression syntax. You might also try typecasting values.

One thing to keep in mind here, is that in doing what you are doing, as you manipulate these values, you are creating new variables, but the original input values will still be in text form, so even if the data passes through your form validation, the values may be problematic at the point you store them in a database or whatever the app does.

garyed · 2025-02-03T13:41:25Z

18 hours ago, mac_gyver said:

i recommend giving the fields a class name. you can then eliminate the array and just use getElementsByClassName to get a collection of the elements to loop over. see if this gets you closer to what you want -

<html>
<head> 
 </head>
<body>
<script>

function hasNumericValue() {

	const matches = document.getElementsByClassName("numeric");

	for (let i = 0; i < matches.length; i++) {
		alert(Number.parseInt(matches[i].value));
	}
}
</script>
<form name="tester" method="post" action="" onsubmit="return hasNumericValue();" >
<input name="it_c" type="text" class='numeric' value=""> <br> 
<input name="it_h" type="text" class='numeric' value=""> <br> 
<input name="ot_c" type="text" class='numeric' value=""> <br> 
<input name="ot_h" type="text" class='numeric' value=""> <br> 
<input type="submit" value="submit">
</form>
</body>
</html>

you can then test if each value is or is not a number.

I think this is probably the best solution but I have about 100 different input fields to sort through & about 60 of them need to be numeric.

I already had a list of the those 60 field names in an array so I thoght it would be a good idea to do it by including a simple external .js file & leaving the original file alone.

I do like your idea & really appreciate the help. I'm learning as I go & didn't even know getElementsByClassName even existed.

garyed · 2025-02-03T14:08:10Z

11 hours ago, gizmola said:
No. In the code I provided I loop through your array and get each name attribute, then call document.getElementsByName().

As I mentioned what you get back is a nodeList.

This is because when you call GetElementsByName the result can be 0 or more nodes, as you are able to use the same name attribute for any number of html elements.

In this case, even though that is true, it's your markup and we know that there should only be one node found, and that will be the input that matches the name you passed. As arrays are zero based, item[0] will be the first (and since you control the markup) only element in the nodelist.

You can think of it as an array that has only one element in it.

As to what you came up with, using eval() should be avoided, as it's highly dangerous to the end user, should there be any possibility that someone can inject a string containing javascript into the string.

You continue to attempt to reference part of the DOM document this way, when you already were presented 2 ways NOT to do that, either of which will work.

As we don't know the actual form of these numbers that you require for input, we can't really advise you. isNaN by itself is not going to do what you stated you want to do.

Here's a couple of examples:
let foo = '';
let bar = '0xFF';

isNaN(foo);
isNaN(bar);
A quick test of these should be of concern to you.

If the numbers entered must be integers then mac's Number.parseInt() might lead you to a robust and simple solution.

An alternative is to utilize javascript's regular expression syntax. You might also try typecasting values.

One thing to keep in mind here, is that in doing what you are doing, as you manipulate these values, you are creating new variables, but the original input values will still be in text form, so even if the data passes through your form validation, the values may be problematic at the point you store them in a database or whatever the app does.

Thanks for the heads up.

It looks like isNaN even returns false on an empty input.

gizmola · 2025-02-04T02:41:15Z

12 hours ago, garyed said:

Thanks for the heads up.

It looks like isNaN even returns false on an empty input.

Correct.

Sign In

using array items as commands?

Recommended Posts

garyed

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

garyed

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

garyed

Link to comment

Share on other sites

garyed

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information