If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

The first column has the drop downs the options are name 1 & 2. The columns named '#' & 'S' are to be filled out by the user. The column named 'T' calculates the total of #+S and then the 2 output boxes are autofilled from a list of numbers that correspond to whatever the total is.

If the user selects dropdown 1 here is what could be filled into #&S from the user:

#

S

1

31

7

2

10

15

3

13

13

4

15

12

5

12

7

6

3

9

7

5

5

8

1

3

9

7

4

10

2

4

11

0

1

12

0

1

13

0

1

14

1

0

15

0

0

16

0

0

17

0

0

If the user selects dropdown 2 here is what could be filled into #&S from the user:

#

S

1

19

9

2

19

8

3

15

6

4

3

17

5

9

6

6

11

5

7

8

5

8

2

2

9

5

2

10

4

2

11

1

1

12

1

2

13

0

1

14

0

1

15

1

0

16

0

1

17

0

1

Ok so now that you know what the user can enter into boxes named '#' & 'S' and through selection of either dropdown 1 or 2 its time to calculate the next column which is Total. This column should simple be the #+S added together.

Next is the Output columns. Column one is described as if the total is a certain number then the output should autofill it with a number.

Here is a list of totals and what their outcome should be.

Total Equals

Outcome Is

1

0

2

1

3

3

4

1

5

2

6

1

7

1

8

10

9

7

10

9

11

6

12

4

13

5

14

3

15

4

16

3

17

7

18

3

19

14

20

7

21

13

22

6

23

3

24

9

25

14

26

4

27

8

28

7

29

0

30

0

31

1

32

1

33

0

34

0

35

1

36

8

37

0

38

5

39

0

40

0

41

0

42

0

43

4

44

2

45

0

46

1

The last column of the outcomes box is autofilled or calculated in order of the outcome, so for example lets say there are 5 outcomes of which are 8,9,9,12,14

It should be ordered highest to lowest so:

14-1
12-2
9-3
9-3
8-4

And thats all there is to it. Hope someone can help with this once again seems simple enough just hard to get my head around.

Before tackling how the table works, you need to create the actual table. Since it's large, you can either hard-code it or use JavaScript to create it. To create your drop-down menus, you'll need a <select> element, so something like this will create a select element and populate it. For example, this will create a new <select> and populate it. All you need to do is create a new row, then add in new <input /> tags. Or you can hard-code it.

Here's some JavaScript which creates the table dynamically without any hard-coding. Getting the values to what you want requires you to do some additional JavaScript but your explanation was a little confusing. You said that columns # and S are filled in by the user, however, then you said based on the selection from the drop-down menu, those fields are automatically filled in (or maybe that's the default if nothing is entered by the user?).

In any case, it should be a matter of using switch and case statements to get the logic to work the way you intend.

I'm not sure why you're using read-only text input boxes for columns that only output data since writing the results to the <td> alone would suffice and that's not what your example table showed but if that's what you want, then no problem.

Since column T is a sum of columns # and S, you can use simple JavaScript to display it and use an onChange listener. For example (UNTESTED):

You're only closing </tr> and never opening <tr>, I'm not sure how the above code would work. Since you only gave IDs to the T column, I created the code in such a way where you only have to copy and paste it for each T, then just adjust the ID accordingly.

I didn't fully incorporate the value of the drop-downs yet since I'm a bit confused on 1 thing. Are the values in the 2 tables where it showed the results if the user chose 1 or 2 meant to be the maximum range (i.e. for row 1, if the user chose 1, the maximum value for # is 31) or is that the value the user must enter? Also, I didn't get the value by ID since the IDs for the drop-down menus were not unique.

I didn't fully incorporate the value of the drop-downs yet since I'm a bit confused on 1 thing. Are the values in the 2 tables where it showed the results if the user chose 1 or 2 meant to be the maximum range (i.e. for row 1, if the user chose 1, the maximum value for # is 31) or is that the value the user must enter? Also, I didn't get the value by ID since the IDs for the drop-down menus were not unique.

As I said before Error404 I am no expert at javascript or html, I just tried to edit a previous code to make it look like what I wanted.

Also to answer your question in the tables question. The values and the exact values that the user can only enter. The data I have shown in the table is the exact values that a user must enter they cannot enter anything else. Hope this helps.

Here is the complete working code. It is just a single function and 2 dimensional array doing the trick

Working fine for row1 and row2 (as you only provided 2 tables for dropdown)

If you need to add this functionality to all the rows. for example you want it to work for 3rd row,
Copy the code for row1 in body of the html. Paste below 2nd row code. rename id of dropdown to 3 and ids all other text fields in the row to proper numbers. Add array3 with all the values of # and S field
It will work. Feel free to ask me if you need any help.

//Array for each table row You can add as many arrays as you like,next will be array3,array4 and so on
var array1 = [["",""],[31,7],[10,15],[13,13],[15,12],[12,7],[3,9],[5,5],[1,3],[7,4],[2,4],[0,1],[0,1],[0,1],[1,0],[0,0],[0,0],[0,0]];
var array2 = [["",""],[19,9],[19,8],[15,6],[3,17],[9,6],[11,5],[8,5],[2,2],[5,2],[4,2],[1,1],[1,2],[0,1],[0,1],[1,0],[0,1],[0,1]];
// more arrays go here like array3 = [["",""],[#,S]];

Here is the complete working code. It is just a single function and 2 dimensional array doing the trick

Working fine for row1 and row2 (as you only provided 2 tables for dropdown)

If you need to add this functionality to all the rows. for example you want it to work for 3rd row,
Copy the code for row1 in body of the html. Paste below 2nd row code. rename id of dropdown to 3 and ids all other text fields in the row to proper numbers. Add array3 with all the values of # and S field
It will work. Feel free to ask me if you need any help.

Hi zealouss, thanks for this but cant get it to work correctly.

First of the numbers down the left hand side should be 1-12
Second, the drop down values should only be 1 & 2.

If a user selects dropdown 1 and then enters a value in the next to boxes the javascript was to calculate this to a value as I shown in my tables above.

Is there anyway of adjusting the code you created to account for these changes?

First of the numbers down the left hand side should be 1-12
Second, the drop down values should only be 1 & 2.

If a user selects dropdown 1 and then enters a value in the next to boxes the javascript was to calculate this to a value as I shown in my tables above.

Is there anyway of adjusting the code you created to account for these changes?

Yes I can fix it but I am sorry to say, I still have not understood the logic of your program.
1 -user select "1" in first dropdown,
2- Now he puts a value in # textbox. This value can only be either 31 or 10 or 13 or 12 or 15 blah blah as you mentioned in the 1st table? (If value is not one of these he is prompted and textbox is set to empty)
3- Now user puts a value in S textbox that can only be 7 or 15 or 13 or 12 blah blah (1st table 3rd column)?

If this is what you want, I will prefer using 2 more dropdown boxes for # and S instead of text boxes.

I think u misunderstood the table a little. I will try to explain a but better.

A user will first select a dropdown with only number 1 or 2 in it which corresponds to the tables above, next a user will input the 1st box with a number between 1-17 then a user will input a number in the second box between 1-17.