# Thread: Need Help Coding (Problem 1)

1. Member
Join Date
Jan 2014
Posts
20
Now what are those 1st Box and second box. Can you please be more specific regarding textbox names with reference to Row and Column numbers. Or Simple take a screen shot fill/edit it in microsoft paint and share here.

2. Registered User
Join Date
Mar 2014
Posts
50
Originally Posted by zealouss
Now what are those 1st Box and second box. Can you please be more specific regarding textbox names with reference to Row and Column numbers. Or Simple take a screen shot fill/edit it in microsoft paint and share here.
Here is a link to screenshot to show you what I mean.

HTML Code:
`http://imageshack.com/a/img401/8461/wm28.jpg`

3. Registered User
Join Date
Mar 2014
Posts
50
As I said before however, if it is easy I dont mind if the user doesnt enter anything but then it would need to be a dropdown box numberd 0-17 the 0 if there is no input to enter.

4. Registered User
Join Date
Mar 2014
Posts
50
zealouss do you need me to explain anything further?

5. Member
Join Date
Jan 2014
Posts
20
Ok. Lets suppose user select 1 from the first drop down. Then he enters/types 8 in # box and 9 in S box. What will be the value in T box?
If user select 2 from dropdown and enters 4 in # box and 5 in S box. What will be the value in T box?

6. Registered User
Join Date
Mar 2014
Posts
50
the T box is simply the total calculated from the values that corresponds in the table.

So a users selects dropdown value 1 then enters 8 in #box (this is equal to 1) then user enters 9 in Sbox (this is equal to 4) once this is complete the T box is simply the values added together which in this case is 1+4=5.

Now that we know the total =5 a value is given to this and put in the Output box which would be 2

7. Registered User
Join Date
Feb 2014
Location
Posts
155
Originally Posted by trifolium
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
...
Or if you don't want a user to type anything they could be dropdown boxes also but with options only 1-17
Hold on, I'm really getting confused now. From your most recent table image and from before you said the values the user can enter is based on whether they chose option 1 or 2 from the first column. For the S column, the values can be between 1-17, as you've also said in the quotes. The part I'm confused about is for the # column, where a user can also enter numbers as those tables show values between 0 to 31 for option 1 and 0 to 19 for option 2, not 1-17. Are you referring only to the S column right now or also the # column?

I think with all of this confusion regarding the logic of your tables, it would be really beneficial if you learn JavaScript, so at least you can show a sample of working code and will be a lot more helpful to others trying to understand the logic.

8. Registered User
Join Date
Mar 2014
Posts
50
Hi Error404 I understand what you mean, maybe I havent explained it correct or you misunderstood the table.

If user selects either dropdown 1 or 2 the values entered can only be between 1-17

Its the output that differs depending on each dropdown.

So for dropdown one 1-17 can be entered which equals values between 0-31 for the # column and values between 0-15 for the S Column
& for dropdown two 1-17 can be entered which equals values between 0-19 for the # column and values between 0-17 for the S Column

Hope this helps

9. Member
Join Date
Jan 2014
Posts
20
Here is the working file. You don't need to change any thing in javascript section. Just copy and paste table code in the body section and rename ids to proper number.

Hope this will help.

Code:
```<!DOCTYPE html><html lang="en">
<meta charset="UTF-8">
<title>Outputs</title>
<script type = "text/javascript">
// Start of javascript magic
// array for outputbox- Don't Edit it unless it is returning a wrong value
arrayOutput = ["",0,1,3,1,2,1,1,10,7,9,6,4,5,3,4,3,7,3,14,7,13,6,3,9,14,4,8,7,0,0,1,1,0,0,1,8,0,5,0,0,0,0,4,2,0,1];

//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]];

//this function will automatically add data - you don't need to edit it
function autoFillData(controlID, value){
var id = controlID.slice(4, controlID.length);

var optionbox = document.getElementById('selc' + id)

var fieldPound = document.getElementById('pond' + id);
var fieldS = document.getElementById('txtS' + id);
var fieldT = document.getElementById('txtT' + id);
var fieldOutput1 = document.getElementById('tOut' + id);
if (optionbox.value != 0) var arrayName = eval('array' + optionbox.value);

if (isLegal(optionbox.value,fieldPound.value,fieldS.value)){
var val1 = arrayName[fieldPound.value][0];
var val2 = arrayName[fieldS.value][1];

var valSum = val1 + val2;

fieldT.value = valSum;

(valSum > 0) ? fieldOutput1.value = arrayOutput[valSum] : fieldOutput1.value = "";
}else{
fieldT.value = "";
fieldOutput1.value = "";
}

}

function isLegal(opt,fielda, fieldb){

if ((opt > 0) && (fielda < 17 && fielda > 0) && (fieldb < 17 && fieldb > 0)){
return true;
}else{
return false;
}
}
</script>
<body>
<table>
<tr>
<th colspan="2"></th>
<th>#</th>
<th>S</th>
<th>T</th>
<th>Output</th>
<th colspan="2"></th>
</tr>
<td style="text-align:right;">1:</td>
<td><select id="selc1" name="wordname" onchange = 'autoFillData(id,value)'>
<option value="0">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>

</select></td>

<td><input type="text" size="3" id = "pond1" class="#" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" id = "txtS1"class="S" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" readonly id="txtT1" class="T" /></td>
<td><input type="text" size="3" readonly id="tOut1" class="Output 1" /></td>
<td><input type="text" size="3" readonly id="last1" class="Output 2" /></td>
</tr>
<td style="text-align:right;">2:</td>
<td><select id="selc2" name="wordname" onchange = 'autoFillData(id,value)'>
<option value="0">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>

</select></td>

<td><input type="text" size="3" id = "pond2"class="#" /></td>
<td><input type="text" size="3" id = "txtS2"class="S" /></td>
<td><input type="text" size="3" readonly id="txtT2" class="T" /></td>
<td><input type="text" size="3" readonly id="tOut2" class="Output 1" /></td>
<td><input type="text" size="3" readonly id="last2" class="Output 2" /></td>
</tr>

<td style="text-align:right;">3:</td>
<td><select id="selc3" name="wordname" onchange = 'autoFillData(id,value)'>
<option value="0">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>

</select></td>

<td><input type="text" size="3" id = "pond3"class="#" /></td>
<td><input type="text" size="3" id = "txtS3"class="S" /></td>
<td><input type="text" size="3" readonly id="txtT3" class="T" /></td>
<td><input type="text" size="3" readonly id="tOut3" class="Output 1" /></td>
<td><input type="text" size="3" readonly id="last3" class="Output 2" /></td>
</tr>

<tr><td colspan="11"><hr /></td></tr>
</tbody>
</table>
</body>
</html>```

10. Registered User
Join Date
Mar 2014
Posts
50
This exactly what I was talking about, it works exactly as required, just one small problem if a user types the value in box 2 as 0 it doesn't show anything in total or output?

How can I fix this

11. Member
Join Date
Jan 2014
Posts
20
Originally Posted by trifolium
This exactly what I was talking about, it works exactly as required, just one small problem if a user types the value in box 2 as 0 it doesn't show anything in total or output?

How can I fix this
0 & any number grater than 17 is not a part of any of our tables. If value in box1 or box2 is not between 1-17 or no selection in drpdown, the value in total and output will remainn blank that is aesthetically more pleasing than a zero.

12. Registered User
Join Date
Mar 2014
Posts
50
If no value is added in box 2 the script must still show an output then based on what a user has input in box 1, how can I fix

13. Member
Join Date
Jan 2014
Posts
20
Here is the updated Code

Code:
```<!DOCTYPE html><html lang="en">
<meta charset="UTF-8">
<title>Outputs</title>
<script type = "text/javascript">
// Start of javascript magic
// array for outputbox- Don't Edit it unless it is returning a wrong value
arrayOutput = ["",0,1,3,1,2,1,1,10,7,9,6,4,5,3,4,3,7,3,14,7,13,6,3,9,14,4,8,7,0,0,1,1,0,0,1,8,0,5,0,0,0,0,4,2,0,1];

//Array for each table row You can add as many arrays as you like,next will be array3,array4 and so on
var array1 = [[0,0],[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 = [[0,0],[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]];

//this function will automatically add data - you don't need to edit it
function autoFillData(controlID, value){
var id = controlID.slice(4, controlID.length);

var optionbox = document.getElementById('selc' + id)

var fieldPound = document.getElementById('pond' + id);
var fieldS = document.getElementById('txtS' + id);
var fieldT = document.getElementById('txtT' + id);
var fieldOutput1 = document.getElementById('tOut' + id);
if (optionbox.value != 0) var arrayName = eval('array' + optionbox.value);

if (isLegal(optionbox.value,fieldPound.value,fieldS.value)){
var val1 = arrayName[fieldPound.value][0];
var val2 = arrayName[fieldS.value][1];

var valSum = val1 + val2;

fieldT.value = valSum;

(valSum > 0) ? fieldOutput1.value = arrayOutput[valSum] : fieldOutput1.value = "";
}else{
fieldT.value = "";
fieldOutput1.value = "";
}

}

function isLegal(opt,fielda, fieldb){

if (isBetween(1,2,opt) && isBetween(0,17,fielda) && isBetween(0,17,fieldb))return true;

}

function isBetween(first, last, value){
if ((isNaN(value)) || value == null || value == ""){
return false;
}else{
if (value >= first && value <= last){
return true;
}else{
return false;
}
}

}
</script>
<body>
<table>
<tr>
<th colspan="2"></th>
<th>#</th>
<th>S</th>
<th>T</th>
<th>Output</th>
<th colspan="2"></th>
</tr>
<td style="text-align:right;">1:</td>
<td><select id="selc1" name="wordname" onchange = 'autoFillData(id,value)'>
<option value="0">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>

</select></td>

<td><input type="text" size="3" id = "pond1" class="#" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" id = "txtS1"class="S" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" readonly id="txtT1" class="T" /></td>
<td><input type="text" size="3" readonly id="tOut1" class="Output 1" /></td>
<td><input type="text" size="3" readonly id="last1" class="Output 2" /></td>
</tr>
<td style="text-align:right;">2:</td>
<td><select id="selc2" name="wordname" onchange = 'autoFillData(id,value)'>
<option value="0">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>

</select></td>

<td><input type="text" size="3" id = "pond2"class="#" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" id = "txtS2"class="S" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" readonly id="txtT2" class="T" /></td>
<td><input type="text" size="3" readonly id="tOut2" class="Output 1" /></td>
<td><input type="text" size="3" readonly id="last2" class="Output 2" /></td>
</tr>

<td style="text-align:right;">3:</td>
<td><select id="selc3" name="wordname" onchange = 'autoFillData(id,value)'>
<option value="0">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>

</select></td>

<td><input type="text" size="3" id = "pond3"class="#" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" id = "txtS3"class="S" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" readonly id="txtT3" class="T" /></td>
<td><input type="text" size="3" readonly id="tOut3" class="Output 1" /></td>
<td><input type="text" size="3" readonly id="last3" class="Output 2" /></td>
</tr>

<tr><td colspan="11"><hr /></td></tr>
</tbody>
</table>
</body>
</html>```
Hope it will help

14. Registered User
Join Date
Mar 2014
Posts
50
Originally Posted by zealouss
Here is the updated Code

Code:
```<!DOCTYPE html><html lang="en">
<meta charset="UTF-8">
<title>Outputs</title>
<script type = "text/javascript">
// Start of javascript magic
// array for outputbox- Don't Edit it unless it is returning a wrong value
arrayOutput = ["",0,1,3,1,2,1,1,10,7,9,6,4,5,3,4,3,7,3,14,7,13,6,3,9,14,4,8,7,0,0,1,1,0,0,1,8,0,5,0,0,0,0,4,2,0,1];

//Array for each table row You can add as many arrays as you like,next will be array3,array4 and so on
var array1 = [[0,0],[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 = [[0,0],[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]];

//this function will automatically add data - you don't need to edit it
function autoFillData(controlID, value){
var id = controlID.slice(4, controlID.length);

var optionbox = document.getElementById('selc' + id)

var fieldPound = document.getElementById('pond' + id);
var fieldS = document.getElementById('txtS' + id);
var fieldT = document.getElementById('txtT' + id);
var fieldOutput1 = document.getElementById('tOut' + id);
if (optionbox.value != 0) var arrayName = eval('array' + optionbox.value);

if (isLegal(optionbox.value,fieldPound.value,fieldS.value)){
var val1 = arrayName[fieldPound.value][0];
var val2 = arrayName[fieldS.value][1];

var valSum = val1 + val2;

fieldT.value = valSum;

(valSum > 0) ? fieldOutput1.value = arrayOutput[valSum] : fieldOutput1.value = "";
}else{
fieldT.value = "";
fieldOutput1.value = "";
}

}

function isLegal(opt,fielda, fieldb){

if (isBetween(1,2,opt) && isBetween(0,17,fielda) && isBetween(0,17,fieldb))return true;

}

function isBetween(first, last, value){
if ((isNaN(value)) || value == null || value == ""){
return false;
}else{
if (value >= first && value <= last){
return true;
}else{
return false;
}
}

}
</script>
<body>
<table>
<tr>
<th colspan="2"></th>
<th>#</th>
<th>S</th>
<th>T</th>
<th>Output</th>
<th colspan="2"></th>
</tr>
<td style="text-align:right;">1:</td>
<td><select id="selc1" name="wordname" onchange = 'autoFillData(id,value)'>
<option value="0">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>

</select></td>

<td><input type="text" size="3" id = "pond1" class="#" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" id = "txtS1"class="S" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" readonly id="txtT1" class="T" /></td>
<td><input type="text" size="3" readonly id="tOut1" class="Output 1" /></td>
<td><input type="text" size="3" readonly id="last1" class="Output 2" /></td>
</tr>
<td style="text-align:right;">2:</td>
<td><select id="selc2" name="wordname" onchange = 'autoFillData(id,value)'>
<option value="0">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>

</select></td>

<td><input type="text" size="3" id = "pond2"class="#" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" id = "txtS2"class="S" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" readonly id="txtT2" class="T" /></td>
<td><input type="text" size="3" readonly id="tOut2" class="Output 1" /></td>
<td><input type="text" size="3" readonly id="last2" class="Output 2" /></td>
</tr>

<td style="text-align:right;">3:</td>
<td><select id="selc3" name="wordname" onchange = 'autoFillData(id,value)'>
<option value="0">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>

</select></td>

<td><input type="text" size="3" id = "pond3"class="#" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" id = "txtS3"class="S" onkeyup = 'autoFillData(id, value)'/></td>
<td><input type="text" size="3" readonly id="txtT3" class="T" /></td>
<td><input type="text" size="3" readonly id="tOut3" class="Output 1" /></td>
<td><input type="text" size="3" readonly id="last3" class="Output 2" /></td>
</tr>

<tr><td colspan="11"><hr /></td></tr>
</tbody>
</table>
</body>
</html>```
Hope it will help

This is fantastic, how difficult would it be to have the # input box and the S input box change to dropdown options instead as I think this would save time for the user instead of typing in?

Just a question.