www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 29 of 29

Thread: Need Help Coding (Problem 1)

  1. #16
    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. #17
    Join Date
    Mar 2014
    Posts
    47
    Quote Originally Posted by zealouss View Post
    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. #18
    Join Date
    Mar 2014
    Posts
    47
    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. #19
    Join Date
    Mar 2014
    Posts
    47
    zealouss do you need me to explain anything further?

  5. #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. #21
    Join Date
    Mar 2014
    Posts
    47
    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. #22
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Quote 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. #23
    Join Date
    Mar 2014
    Posts
    47
    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. #24
    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">
    <head>
       <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>
      </head>
    <body>
    <table>
    <thead>
       <tr>
        <th colspan="2"></th>
        <th>#</th>
        <th>S</th>
        <th>T</th>
        <th>Output</th>
                <th colspan="2"></th>
       </tr>
    </thead>
    <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. #25
    Join Date
    Mar 2014
    Posts
    47
    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. #26
    Quote Originally Posted by trifolium View Post
    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. #27
    Join Date
    Mar 2014
    Posts
    47
    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. #28
    Here is the updated Code

    Code:
    <!DOCTYPE html><html lang="en">
    <head>
       <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>
      </head>
    <body>
    <table>
    <thead>
       <tr>
        <th colspan="2"></th>
        <th>#</th>
        <th>S</th>
        <th>T</th>
        <th>Output</th>
                <th colspan="2"></th>
       </tr>
    </thead>
    <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. #29
    Join Date
    Mar 2014
    Posts
    47
    Quote Originally Posted by zealouss View Post
    Here is the updated Code

    Code:
    <!DOCTYPE html><html lang="en">
    <head>
       <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>
      </head>
    <body>
    <table>
    <thead>
       <tr>
        <th colspan="2"></th>
        <th>#</th>
        <th>S</th>
        <th>T</th>
        <th>Output</th>
                <th colspan="2"></th>
       </tr>
    </thead>
    <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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles