Use Array based on User Input

Hello all,

I’ve got 4 empty arrays (A,B,C and D).
I’d like to add items to them based on the value entered by the user in the first input box.
If the user enters an A in the first input box. all entered data should be stored in the Array called A.
When the user enters a C in the first input box, data should be stored in Array C, etc.

The following link is a (not working) example of what I am trying to accomplish

http://jsfiddle.net/ud0kbh4h/2/

Hi,

Are you trying to do something like this:

var arr_a = [],
    arr_b = [],
    arr_c = [],
    arr_d = [],
    myInput = document.getElementById("myInput"),
    el1 = document.getElementById("el1"),
    el2 = document.getElementById("el2"),   
    submit = document.getElementById("submit");

submit.addEventListener("click", function(){
  if(!myInput.value.match(/^[a-d]$/)){
    alert("Please enter a, b, c, or d");   
  } else {
    var arr = window["arr_" + myInput.value];
    arr.push(el1.value);
    arr.push(el2.value);
    alert("Array " + myInput.value + " contains: " + arr);
  }
});

fiddle

This code is by no means perfect, but I wanted to make sure I had understood what you want to accomplish before adding more.

1 Like

Awesome, that’s what I was looking for.
How can I show, lets say array a and b at the same time in a alert box?

Found that one out already.
Thank you for your help!

Glad you got it sorted. As I mentioned, the code could be tidied up somewhat if you desire.
Are you adverse to using jQuery (or maybe using it already)?

I am new to javascript and am trying to get it to know better before going on to jquery.
By the way, what if I don’t want to pre-create the arrays but want them to be created automatically when a new value is entered in the first input box.

Fair enough

So you enter “a” and a variable named array_a is created (but not array_b, array_c, or array_d)?

That’s right. Even better still would be if any kind of string would be accepted (blabla, or car, etc)

Like this?

var myInput = document.getElementById("myInput"),
    el1 = document.getElementById("el1"),
    el2 = document.getElementById("el2"),   
    submit = document.getElementById("submit");

submit.addEventListener("click", function(){
  if(myInput.value === ""){
    alert("Please enter a value");   
  } else {
    var arr = myInput.value;
    window[arr] = [];
    window[arr].push(el1.value);
    window[arr].push(el2.value);
    alert("Array " + myInput.value + " contains: " + window[arr]);
  }
});

If it isn’t secret, what do you try to achieve filling these arrays?
I’m asking because this idea of “creating global arrays dynamically” sounds pretty… strange
I guess there exists a more “common” way to solve your task and we can help you to find it

1 Like

It creates new arrays based on the user input but can’t get more than one item into each new created array

As megazoid says, it might help if you told us what you are trying to achieve, as this task might be solved in a different way.

This is what I have so far

function test(){
if(typeof uld === "undefined"){ // CHECK IF ARRAY EXIST
	window.uld = []; // CREATE GLOBAL ARRAY IF NOT EXIST
}
 
pre = document.getElementById("prefix").value.toUpperCase();
ser = document.getElementById("serial").value;
suf = document.getElementById("suffix").value.toUpperCase();
	
nbrUld = uld.length + 1 //LENGTH OF ARRAY

if (nbrUld == 1 || nbrUld % 5 == 1){ // IF 1ST ULD OR REMAINDER OF DIVISION BY 5 IS 1
	uld.push(pre + "." + ser + suf); //APPEND ITEMS TO ARRAY
	uld2 = uld.join(''); //REPLACE COMMA FROM ARRAY LIST
} else if (nbrUld % 5 === 0){ // IF DIVISIBLE BY 5
	uld.push("/" + ser + suf + ".T" + "5\n"); //APPEND ITEMS TO ARRAY
	uld2 = uld.join(''); //REPLACE COMMA FROM ARRAY LIST
} else {
	uld.push("/" + ser + suf); //APPEND ITEMS TO ARRAY
	uld2 = uld.join(''); //REPLACE COMMA FROM ARRAY LIST
}
ttl = ".T" + nbrUld % 5;//TOTALS
if (nbrUld % 5 === 0){
	document.getElementById("scm").value = uld2;
} else {
	document.getElementById("scm").value = uld2+ttl
}

}

it produces the following result:

.AKE.15487QR/26545QR/26565QR/56546QR/15445QR.T05
.AKE.19547QR/00025QR/03574QR/00321QR/65454QR.T05
.AKE.56552QR/00656QR.T02

the “AKE” part is the result from the first input box.
I’d like however to put each container-type (the 3-letter codes at the beginning are types of containers) in a different array. they are always 3 letter codes, but it can’t be predicted which one the user is going to use.

Below an example of a possible result I am looking for

.PMC.12458QR/12458QR/12458QR/12458QR/12458QR.T05
.PMC.12458QR.T01
.AKE.15487QR/26545QR/26565QR/56546QR/15445QR.T05
.AKE.19547QR/00025QR/03574QR/00321QR/65454QR.T05
.AKE.56552QR/00656QR.T02
.PGA.00741QR/02354QR/01554QR.T03

I hope this al make sense :smile:

I didn’t provide all the code before because I wanted to find the solution on my own. However I got really stuck at this point and for that reason was trying to find a solution on this site but only for the part I got stuck on.

I was afraid that the solutions provided would also change the rest of my code into a better one.
The main goal is trying to learn more about javascript

That’s cool. I wish more people would. It’s also the best way to learn.

I’ve still not fully understood what you’re doing though. Could you describe what you are trying to accomplish in generic terms.

This is a stock message for all containers on stock as a particular station.
The user gives the container type into the first input box, the serial number in the second and the code of the owner in the third.

the code I just provided takes the values from the 3 input boxes and stack them into an array.
With some manipulation the outcome is as follows:

.AKE.15487QR/26545QR/26565QR/56546QR/15445QR.T05
.AKE.19547QR/00025QR/03574QR/00321QR/65454QR.T05
.AKE.56552QR/00656QR.T02

there are most of the time howver more than 1 type of containers (AKE, PMC, PGA etc).

When the user at this point changes the conatiner type in the first input box. it will not be placed on a new line, but added to the rest. Each container type needs to be placed on e new line.

.PMC.12458QR/12458QR/12458QR/12458QR/12458QR.T05
.PMC.12458QR.T01
.AKE.15487QR/26545QR/26565QR/56546QR/15445QR.T05
.AKE.19547QR/00025QR/03574QR/00321QR/65454QR.T05
.AKE.56552QR/00656QR.T02
.PGA.00741QR/02354QR/01554QR.T03

it can happen that a user after having provided the above data he needs to eneter a new PMC. in that case it needs to be added to the PMC array. etc.

Are you saving this data anywhere?

No, there is no saving

Ok. So you have three input boxes for a user to enter container type, serial number and owner code.

When the user enters these details for the first time, what should happen?

Then the result is shown in the output div.
Like:

.PMC.12345QR.T1