Solved

tab indexing with a dymanic form section

Posted on 2009-05-11
13
257 Views
Last Modified: 2012-05-06
I have this jsp form that collects data for oracle db.  the first 4 fields have tabinedex= ""/  the middle section has a javascript for multi entries, the last part has a validation script and a submit button.  
The tabbing is not working correctly and I have run out of things to try.  
URGENT HELP NEEDED
thanks
Noreen
<%-- 
    Document   : wgEntry
    Created on : Mar 18, 2008, 10:28:10 AM
    Author     : noreen.s.burke
    Notes:  this screen is for data entry of single wage record or multi
    records.  
--%>
 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.Vector"%>
<%@ page import="java.lang.*" %>
<%@ page import= "java.text.*" %>
<%@ include file="util.inc" %>
<%@ page import="java.util.*,java.lang.*" %>
 
<jsp:useBean id="login" class="beans.LoginValidation" scope="session" />
<jsp:useBean id="User" class="beans.UserValidation" scope="session" />
 
<link rel="stylesheet" href="wage.css" type="text/css">
 
<script language="javascript" type="text/javascript" src="Include/session.js"></script>
<script language="javascript" type="text/javascript" src="Include/clock.js"></script>
<%-- Attach the validation script to the file.  --%>
<script src="./scripts/wageValScrpt.js"> </script>
<!-- <script src="./scripts/berlinValScrpt.js"> </script> -->
<jsp:include page="/Include/NHES_Top.html"/>
 
<title>wgEntry.jsp</title>
<%
            out.println("<form method=POST action=" + response.encodeURL("/NH_Wage/MainServlet") //+ response.encodeURL("/NH_Wage/wgSelect.jsp")
                    + " name=frm1 autocomplete=off>");
%>
 
<% System.out.println("Entered wgEntry.jsp");
 
            String userAccess = login.getUserAccess();
            System.out.println("THE USER ACCESS is " + userAccess);
 
%>
<!-- //////////// ////////////////////////// TemplateBeginEditable name="content"////////////////////// ---->
 
 <table width="100%"  cellspacing="0" cellpadding="0">
        <tr>
            <td>&nbsp;</td>
            <td valign="middle" class="hdr"><img src="http://www.nh.gov/nhes/graphics/main-gold.gif" alt="bullet" width="13" height="13" hspace="10" vspace="3">
            <!-- TemplateBeginEditable name="title" -->NHES WAGE systems<!-- TemplateEndEditable --></td>    
        </tr>
 </table>
    <br><br><br>
 
<input type="hidden" name="page" value="Entry" alt="none">
 
    <!-- //////////// ////////////////////////// TemplateBeginEditable name="content"////////////////////// ---->
    <body  onLoad="timeIt()"> 
    <!-- HIDDEN VALUES FOR APPLICATION ---->
    <input type="hidden" name="clock" size="7" value="20:00"> 
   
    <script>
        var rownum = 1;
        var t = document.formname.IndexLoc;
        var tabx = indexTab++;
            
        function addRow(EmpTable) {
            //aRow = EmpTable.insertRow(EmpTable.rows.length);
            var aRow = document.createElement("tr");
            var aCell=document.createElement("td");
            var eCell=document.createElement("/td");            
            numCells=5
   
                var col_dir = ['<input type="button" class="three" value="Del" onClick="delete_this_row(this)" class="btn-submit3">',
                '<input type="text" tabindex='+tabx+'  name="p_ssn' + rownum + '"  id="p_ssn' + rownum + '"  size="9" maxlength="9" )>',
                '<input type="text" tabindex='+tabx+' name="p_Lname' + rownum + '" id="p_Lname' + rownum + '" size="20">',
                '<input type="text" tabindex='+tabx+' name="p_Fname' + rownum + '" id="p_Fname' + rownum + '" size="2">',
                '<input type="text" tabindex='+tabx+' name="p_wages' + rownum + '" id="p_wages' + rownum + '" size="10" onBlur="addRow(document.getElementById(\'EmpTable\'))">']
            
            rownum++;
            tabx++;
 
            aCell.innerHTML='<td width="67"><input type="button" class="three" onClick="delRow(this)" value="Delete"></td>'
            aRow.appendChild(aCell);
            for (i=1;i<numCells;i++){
              
                aCell=document.createElement("td");
                aCell.innerHTML= col_dir[i]
                aRow.appendChild(aCell);                      
                
            }
            document.getElementById("EmpTableTBody").appendChild(aRow);
                       
        }
      
    </script>
    <script>
        function delRow(row) {
            //alert("You entered: delRow ")
            //row.parentNode.parentNode.parentNode.deleteRow(row.parentNode.parentNode.rowIndex);
            var tbl = document.getElementById('EmpTable');
            var lastRow = tbl.rows.length;
            if (lastRow > 2) tbl.deleteRow(lastRow -1);
        } 
     
 
        function validate()
        {
            var i;
            var inputs = new Array();
            inputs = document.getElementsByTagName('input');
 
            for (i = 0; i < inputs.length; i++)
            {
                var name = inputs[i].name;
                var ssnregex = /[0-9.]/;
                var ssnname = /^p_ssn/;
                var inputregex = /^p_/;
                var validregex = /[A-Z]/;
                var wagesregex = /[0-9.]/;
                var wagename = /^p_wage/;
 
                if (name.match(inputregex))
                {
                    if (inputs[i].value.match(validregex) || inputs[i].value.length < 1)
                    {
                        alert(name + ' is invalid.');
                        inputs[i].style.backgroundColor = '#ff0';
                    }
 
                    if (inputs[i].name.match(ssnname))
                    {
                        if (!inputs[i].value.match(ssnregex) || inputs[i].value.length < 9)
                        {
                            alert('Invalid ssn.');
                            inputs[i].style.backgroundColor = '#ff0';
                        }
                    }
 
                    if (inputs[i].name.match(wagename))
                    {
                        if (!inputs[i].value.match(wagesregex) && inputs[i].value.length > 0)
                        {
                            alert('Invalid wage.');
                            inputs[i].style.backgroundColor = '#ff0';
                        }
                    }
                }
 
            }
 
        }
 
 
 
        function verifywages(wage)
        {
            var i;
            var inputs = new Array();
            var wagename = /^p_wage/;
            var sum = 0;
            inputs = document.getElementsByTagName('input');
 
            for (i = 0; i < inputs.length; i++)
            {
                if (inputs[i].name.match(wagename) && !isNaN(parseFloat(inputs[i].value)))
                {
                    sum += parseFloat(inputs[i].value);
                }
            }
 
            if (parseFloat(wage) != parseFloat(sum))
            {
                alert('Total wages entered: ' + wage + ' does not equal the sum of gross wages: ' + sum + '.');
            }
            else
            {
                alert('Total wages entered: MATCH.');
            }
 
        }
    </script> 
    
    <table  border="0" width="800" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td align="right">
                <%
            if (userAccess.equals("1")) {
                %>
                <a href="wgSelect.jsp">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="Index.jsp">LogOff</a>
                <%                } else if (userAccess.equals("2")) {
                %>
                <a href="wgSelect2.jsp">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="Index.jsp">LogOff</a>
                <%                } else if (userAccess.equals("3")) {
                %>
                <a href="wgSelect3.jsp">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="Index.jsp">LogOff</a>
                <%                } else if (userAccess.equals("3")) {
                %>
                <a href="wgSelect3.jsp">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="Index.jsp">LogOff</a>
                <%                }
                %>
            </td>
        </tr>
        
    </table>  
    
     <%-- This is the Begin  of trial line increment --%>
            
    <script>    
    
        function keyPressTest(e, obj)
        {
            var validateChkb = document.getElementById('chkValidateOnKeyPress');
            if (validateChkb.checked) {
                var displayObj = document.getElementById('spanOutput');
                var key;
                if(window.event) {
                    key = window.event.keyCode; 
                }
                else if(e.which) {
                    key = e.which;
                }
                var objId;
                if (obj != null) {
                    objId = obj.id;
                } else {
                    objId = this.id;
                }
                displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
            }
        }
        function removeRowFromEmpTable()
        {
            var tbl = document.getElementById('EmpTable');
            var lastRow = tbl.rows.length;
            if (lastRow > 2) tbl.deleteRow(lastRow -1);
        }
        function openInNewWindow(frm)
        {
            // open a blank window
            var aWindow = window.open('', 'TableAddRowNewWindow',
            'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
   
            // set the target to the blank window
            frm.target = 'TableAddRowNewWindow';
  
            // submit
            frm.submit();
        }
        function validateRow(frm)
        {
            var chkb = document.getElementById('chkValidate');
            if (chkb.checked) {
                var tbl = document.getElementById('EmpTable');
                var lastRow = tbl.rows.length - 1;
                var i;
                for (i=1; i<=lastRow; i++) {
                    var aRow = document.getElementById('txtRow' + i);
                    if (aRow.value.length <= 0) {
                        alert('Row ' + i + ' is empty');
                        return;
                    }
                }
            }
            //document.write("Social Sec #  is " +'p_ssn'+iteration);
            openInNewWindow(frm);
        }
        //document.write("Social Sec #  is " +'p_ssn'+iteration);    
    </script>     
    
    <div class="centhome" align="center">
    <%-- This is the end of trial line increment --%>
    <table align="center" width="800" border="0">      
    <form name="empdata" autocomplete=off>
        <tr>
            <td><B>Employer Data Entry</B><br><br></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        
        <tr>
            <td  align="right">Account #:</td>
            <td><input  type="text" tabindex="1" name="accNumb" size="9" align="left" maxlength="9"  alt="Account Number"><i></i></td>
            <td  align="right">Batch #:&nbsp;&nbsp;<input type="text" tabindex="2" name="batch_no" size="9" align="right" maxlength="9"  alt="Batch Number"><i></i></td>
            <td  align="right">Name Control:</td>
            <td><input type="text" tabindex="3" name="nameCtrl" size="9" align="left" maxlength="9"  alt="Name Control"><i></i></td>
            <td>&nbsp;</td>        
        </tr>
        <tr>
        </tr>
        
        <% String userId = login.getuserId();%>   
        <%System.out.println("Value of userId " + userId);%>
 
        <% String SourceCode = "W";%>
        <%System.out.println("Value of SourceCode " + SourceCode);%>
        
        <%/* String lineNum = "1" ; */%> 
        
        
        <tr>
            <td align="right">User Code:</td>
           <td><input type="text" tabindex="4" name="userCode" size="9" align="left" maxlength="9" value=<%=userId%> alt="User_Code" readonly></td>
            <td>Year/Quarter:&nbsp;&nbsp;<input type="text" tabindex="5" name="yrQtr" size="5" align="left" maxlength="5"  alt="Year/Quarter"></td>
            <td>Source Code:&nbsp;&nbsp;<input type="text" tabindex="6" name="SourceCode" size="5" align="left" maxlength="5" value = "W" alt="SourceCode" readonly></td>
            <td>&nbsp;</td>
             
        </tr>
        </form>
        </table>
        </div>
        <div class="centhome" align="center">
        <table align="center" width="800" border="0" id="EmpTable">
        <form name="empldata" autocomplete=off>
        <% //int TabI = indexTab + 1;%>
        <%//System.out.println("Value of indexTab " + TabI);%>
        <% int indexTab = 4;%>
        
        <tr>
            <td colspan="5"><b>Employee Quarterly Wage</b><br><br></td>
        </tr>
        
        <tbody id="EmpTableTBody" name="EmpTableTBody">
            
            <tr>
                <td>&nbsp;</td>
                <td>SSN</td>
                <td>Last<br> Name</td>
                <td>First<br> Name</td>
                <td>Gross<br>Wages</td>
            </tr>
            
           <tr> 
           
           <input type="hidden" name="SourceCode" value="<%=SourceCode%>">             
         
            <td><input  type="button"   align="right" value="Delete" onclick="delRow(this);" tabindex="tabx"  accesskey="w" /></td>
            <td><input type="text" tabindex="tabx"  name="p_ssn0"   id="ssn" value="" size="9" maxlength="9" alt="ssn"  /></td>
            <td><input type="text" tabindex="tabx"  name="p_Lname0" id="p_Lname0"  align="left" size="20" maxlength="20"  alt="Last Name"></td>
            <td><input type="text" tabindex="tabx"  name="p_Fname0" id="p_Fname0" align="left" size="2" maxlength="1"  alt="First Name"></td> 
            <td><input type="text" tabindex="tabx"  name="p_wages0" id="p_wages0"  align="left" size="10" maxlength="10" alt="wages" onBlur="addRow(document.getElementById('EmpTable'))"></);" ></td> 
            <%/* rownum= rownum + 1 */%> 
            <%indexTab++ ;%>    
         
        </tbody>
    </form>
<%-- This table holds the "ADD" and "REMOVE" buttons for the above "Typical Positions" table. --%>
 
<%--  The end of the first part of the new stuff  --%>
 
</table>
</div>
 
<div class="centhome" align="center">
<table  border="0" width="800">
      <form name="empldataVerify" autocomplete=off>
    <tr>
    <td colspan="5"><b>Enter Total Employer Wages</b><br><br></td>
    </tr>
    <tr>
    <td><input type="text" tabindex="tabx" name="totwages1" id="totwages1" align="left" size="20" maxlength="20"  alt="wages" > </td>
    <td><input type="button" tabindex="tabx" class="three"  value="Verify Employer Total" onClick="verifywages(totwages1.value);"></td>
    <td></td>
   
        <% System.out.println("JUST About to present Submit box");%>
        <td><input type="submit" tabindex="tabx" class="three"  value="Save Employer Data" name="action" onclick="return(WageVal(this.form))" alt="Save Employer Data" tabindex=112 accesskey="o" >
            <% System.out.println("Presented a Submit Box");%>
            <!-- <td> <input type="submit" class="three" id="saveRec" name="action" tabindex="10" value="Save Employer Data" onclick="return(WageVal(this.<))" alt="Save Employer Data" tabindex=112 accesskey="o" > -->
        </td>
        
    </tr>
    <% System.out.println("End of wgEntry.jsp");%>
    <% System.out.println("Awaiting data input or verification at end of wgEntry.jsp");%>
</form>
</table>
</div> 
  <%          out.println("</form>");%>
 
 <script language="JavaScript"> <!--
    document.frm1.p_Lname+rownum.focus();
 </script>
 
<br>
<!-- /////////////////////////////////////TemplateEndEditable /////////////////////////////////////-->
<jsp:include page="/Include/NHES_Bottom.html"/>

Open in new window

0
Comment
Question by:noreenburke
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
13 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24358695
noreenburke,

What does the resulting html code look like?  You can view it by looking at View Source in the browser (usually under the View menu).  Look at the tabindex attribute in the form fields.

JSP isn't my expertise but it seems you are going to have duplicate values for the index number.  That won't work.  If you specify the tabindex it should be unique on that page.  If this isn't enough to solve this or you need more details please provide the html source for that part of the page and be specific on what isn't working correctly.  It usually helps to know how it is working and what exactly isn't working right and what it does.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
LVL 13

Expert Comment

by:Murali Murugesan
ID: 24360758
Your indexing for tab is not unique. Make sure all the forms that you use in a single page has unique tabindex for the controls you use in them.

Just cross check the generated html output for the duplicates in index. Remember even having multiple tabIndex="" is a duplicate and control moves to those tab indexes first.

-Murali*
0
 

Author Comment

by:noreenburke
ID: 24367464
Below is a view source from the resulting page.  I have tried putting tabindex="1" etc in the first six fields of the form, then a indexTab counter for the dynmaic fields created by the javascript , and finally
tabindex='s in the last three elements, using 200, 201 and 202.  Which does not work.

so above is my problem,
as for the last comment, that should be kept between the two of you, as it in no way solves my coding issues.



 
 
 
 
 
<link rel="stylesheet" href="wage.css" type="text/css">
 
<script language="javascript" type="text/javascript" src="Include/session.js"></script>
<script language="javascript" type="text/javascript" src="Include/clock.js"></script>
 
<script src="./scripts/wageValScrpt.js"> </script>
 
<!-- 
    Document   : NHES_Top
    Created on : Mar 17, 2008, 10:39:53 AM
    Author     : noreen.s.burke
-->
 
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>NH Department of Employment Security</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="http://www.nh.gov/nhes/nhesstyle.css" rel="stylesheet" type="text/css">
 
<title>NH employment security UI WEB SITE pg1</title>
 
 
</head>
 
<body>
<table width="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr valign="top">
    <td>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="right" background="http://www.nh.gov/nhes/graphics/brand_bk.gif"><img src="http://www.nh.gov/nhes/graphics/400x25officialsiteBLUE.gif" alt="Official New Hampshire government website" width="400" height="25"></td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF"><img src="http://www.nh.gov/nhes/graphics/trans.gif" alt=" " width="1" height="1"></td>
      </tr>
      <tr>
        <td height="115" align="right" valign="top" bgcolor="#BDC6DA">
        <table width="100%" height="115"  border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td align="left"><img src="http://www.nh.gov/nhes/graphics/banner_home.gif" alt="NHES" width="550" height="115"></td>
            <td align="right"><A href="http://www.nh.gov/nhes"><img src="http://www.nh.gov/nhes/graphics/logo_home.gif" alt="NHES" width="200" height="115" border="0"></a></td>
          </tr>
        </table>
        </td>
      </tr>
      <tr>
          <td height="31" align="left" background="http://www.nh.gov/nhes/graphics/navbar_bk.gif"></td>
      </tr>
      </td>
  </tr>
</table>
 
 
<title>wgEntry.jsp</title>
<form method=POST action=/NH_Wage/MainServlet name=frm1 autocomplete=off>
 
 
 
<!-- //////////// ////////////////////////// TemplateBeginEditable name="content"////////////////////// ---->
    <script>
        var rownum = 1;
        var t = document.formname.IndexLoc;
        var tabx = indexTab++;
            
        function addRow(EmpTable) {
            //aRow = EmpTable.insertRow(EmpTable.rows.length);
            var aRow = document.createElement("tr");
            var aCell=document.createElement("td");
            var eCell=document.createElement("/td");            
            numCells=5
   
                var col_dir = ['<input type="button" class="three" value="Del" onClick="delete_this_row(this)" class="btn-submit3">',
                '<input type="text"  name="p_ssn' + rownum + '"  id="p_ssn' + rownum + '"  size="9" maxlength="9" )>',
                '<input type="text"  name="p_Lname' + rownum + '" id="p_Lname' + rownum + '" size="20">',
                '<input type="text"  name="p_Fname' + rownum + '" id="p_Fname' + rownum + '" size="2">',
                '<input type="text"  name="p_wages' + rownum + '" id="p_wages' + rownum + '" size="10" onBlur="addRow(document.getElementById(\'EmpTable\'))">']
            
            rownum++;
            tabx++;
 
            aCell.innerHTML='<td width="67"><input type="button" class="three" onClick="delRow(this)" value="Delete"></td>'
            aRow.appendChild(aCell);
            for (i=1;i<numCells;i++){
              
                aCell=document.createElement("td");
                aCell.innerHTML= col_dir[i]
                aRow.appendChild(aCell);                      
                
            }
            document.getElementById("EmpTableTBody").appendChild(aRow);
                       
        }
      
    </script>
    <script>
        function delRow(row) {
            //alert("You entered: delRow ")
            //row.parentNode.parentNode.parentNode.deleteRow(row.parentNode.parentNode.rowIndex);
            var tbl = document.getElementById('EmpTable');
            var lastRow = tbl.rows.length;
            if (lastRow > 2) tbl.deleteRow(lastRow -1);
        } 
     
 
        function validate()
        {
            var i;
            var inputs = new Array();
            inputs = document.getElementsByTagName('input');
 
            for (i = 0; i < inputs.length; i++)
            {
                var name = inputs[i].name;
                var ssnregex = /[0-9.]/;
                var ssnname = /^p_ssn/;
                var inputregex = /^p_/;
                var validregex = /[A-Z]/;
                var wagesregex = /[0-9.]/;
                var wagename = /^p_wage/;
 
                if (name.match(inputregex))
                {
                    if (inputs[i].value.match(validregex) || inputs[i].value.length < 1)
                    {
                        alert(name + ' is invalid.');
                        inputs[i].style.backgroundColor = '#ff0';
                    }
 
                    if (inputs[i].name.match(ssnname))
                    {
                        if (!inputs[i].value.match(ssnregex) || inputs[i].value.length < 9)
                        {
                            alert('Invalid ssn.');
                            inputs[i].style.backgroundColor = '#ff0';
                        }
                    }
 
                    if (inputs[i].name.match(wagename))
                    {
                        if (!inputs[i].value.match(wagesregex) && inputs[i].value.length > 0)
                        {
                            alert('Invalid wage.');
                            inputs[i].style.backgroundColor = '#ff0';
                        }
                    }
                }
 
            }
 
        }
 
 
 
        function verifywages(wage)
        {
            var i;
            var inputs = new Array();
            var wagename = /^p_wage/;
            var sum = 0;
            inputs = document.getElementsByTagName('input');
 
            for (i = 0; i < inputs.length; i++)
            {
                if (inputs[i].name.match(wagename) && !isNaN(parseFloat(inputs[i].value)))
                {
                    sum += parseFloat(inputs[i].value);
                }
            }
 
            if (parseFloat(wage) != parseFloat(sum))
            {
                alert('Total wages entered: ' + wage + ' does not equal the sum of gross wages: ' + sum + '.');
            }
            else
            {
                alert('Total wages entered: MATCH.');
            }
 
        }
    </script> 
 <table width="100%"  cellspacing="0" cellpadding="0">
        <tr>
            <td>&nbsp;</td>
            <td valign="middle" class="hdr"><img src="http://www.nh.gov/nhes/graphics/main-gold.gif" alt="bullet" width="13" height="13" hspace="10" vspace="3">
            <!-- TemplateBeginEditable name="title" -->NHES WAGE systems<!-- TemplateEndEditable --></td>    
        </tr>
 </table>
    <br><br><br>
 
<input type="hidden" name="page" value="Entry" alt="none">
 
    <!-- //////////// ////////////////////////// TemplateBeginEditable name="content"////////////////////// ---->
    <body  onLoad="timeIt();document.forms[0].elements[0].focus()"> 
    <!-- HIDDEN VALUES FOR APPLICATION ---->
    <input type="hidden" name="clock" size="7" value="20:00"> 
   
 
    
    <table  border="0" width="800" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td align="right">
                
                <a href="wgSelect.jsp">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="Index.jsp">LogOff</a>
                
            </td>
        </tr>
        
    </table>  
    
     
            
    <script>    
    
        function keyPressTest(e, obj)
        {
            var validateChkb = document.getElementById('chkValidateOnKeyPress');
            if (validateChkb.checked) {
                var displayObj = document.getElementById('spanOutput');
                var key;
                if(window.event) {
                    key = window.event.keyCode; 
                }
                else if(e.which) {
                    key = e.which;
                }
                var objId;
                if (obj != null) {
                    objId = obj.id;
                } else {
                    objId = this.id;
                }
                displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
            }
        }
        function removeRowFromEmpTable()
        {
            var tbl = document.getElementById('EmpTable');
            var lastRow = tbl.rows.length;
            if (lastRow > 2) tbl.deleteRow(lastRow -1);
        }
        function openInNewWindow(frm)
        {
            // open a blank window
            var aWindow = window.open('', 'TableAddRowNewWindow',
            'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
   
            // set the target to the blank window
            frm.target = 'TableAddRowNewWindow';
  
            // submit
            frm.submit();
        }
        function validateRow(frm)
        {
            var chkb = document.getElementById('chkValidate');
            if (chkb.checked) {
                var tbl = document.getElementById('EmpTable');
                var lastRow = tbl.rows.length - 1;
                var i;
                for (i=1; i<=lastRow; i++) {
                    var aRow = document.getElementById('txtRow' + i);
                    if (aRow.value.length <= 0) {
                        alert('Row ' + i + ' is empty');
                        return;
                    }
                }
            }
            //document.write("Social Sec #  is " +'p_ssn'+iteration);
            openInNewWindow(frm);
        }
        //document.write("Social Sec #  is " +'p_ssn'+iteration);    
    </script>     
    
    <div class="centhome" align="center">
    
    <table align="center" width="800" border="0">      
    <form name="empdata" autocomplete=off>
        <tr>
            <td><B>Employer Data Entry</B><br><br></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        
        <tr>
            <td  align="right">Account #:</td>
            <td><input  type="text" tabindex="1" name="accNumb" size="9" align="left" maxlength="9"  alt="Account Number"><i></i></td>
            <td  align="right">Batch #:&nbsp;&nbsp;<input type="text" tabindex="2" name="batch_no" size="9" align="right" maxlength="9"  alt="Batch Number"><i></i></td>
            <td  align="right">Name Control:</td>
            <td><input type="text" tabindex="3" name="nameCtrl" size="9" align="left" maxlength="9"  alt="Name Control"><i></i></td>
            <td>&nbsp;</td>        
        </tr>
        <tr>
        </tr>
        
           
        
 
        
        
        
         
        
        
        <tr>
            <td align="right">User Code:</td>
           <td><input type="text" tabindex="4" name="userCode" size="9" align="left" maxlength="9" value=0990597 alt="User_Code" readonly></td>
            <td>Year/Quarter:&nbsp;&nbsp;<input type="text" tabindex="5" name="yrQtr" size="5" align="left" maxlength="5"  alt="Year/Quarter"></td>
            <td>Source Code:&nbsp;&nbsp;<input type="text" tabindex="6" name="SourceCode" size="5" align="left" maxlength="5" value = "W" alt="SourceCode" readonly></td>
            <td>&nbsp;</td>
             
        </tr>
        </form>
        </table>
        </div>
        <div class="centhome" align="center">
        <table align="center" width="800" border="0" id="EmpTable">
        <form name="empldata" autocomplete=off>
        
        
       
        
        <tr>
            <td colspan="5"><b>Employee Quarterly Wage</b><br><br></td>
        </tr>
        
        <tbody id="EmpTableTBody" name="EmpTableTBody">
            
            <tr>
                <td>&nbsp;</td>
                <td>SSN</td>
                <td>Last<br> Name</td>
                <td>First<br> Name</td>
                <td>Gross<br>Wages</td>
            </tr>
            
           <tr> 
           
           <input type="hidden" name="SourceCode" value="W">             
            
            <td><input  type="button"   align="right" value="Delete" onclick="delRow(this);" tabindex="indexTab++"  accesskey="w" /></td>
            <td><input type="text" tabindex="tabx"  name="p_ssn0"   id="ssn" value="" size="9" maxlength="9" alt="ssn"  /></td>
            <td><input type="text" tabindex="tabx"  name="p_Lname0" id="p_Lname0"  align="left" size="20" maxlength="20"  alt="Last Name"></td>
            <td><input type="text" tabindex="tabx"  name="p_Fname0" id="p_Fname0" align="left" size="2" maxlength="1"  alt="First Name"></td> 
            <td><input type="text" tabindex="tabx"  name="p_wages0" id="p_wages0"  align="left" size="10" maxlength="10" alt="wages" onBlur="addRow(document.getElementById('EmpTable'))"></);" ></td> 
             
                
         
        </tbody>
    </form>
 
 
 
 
</table>
</div>
 
<div class="centhome" align="center">
<table  border="0" width="800">
      <form name="empldataVerify" autocomplete=off>
    <tr>
    <td colspan="5"><b>Enter Total Employer Wages</b><br><br></td>
    </tr>
    <tr>
    <td><input type="text" tabindex="200" name="totwages1" id="totwages1" align="left" size="20" maxlength="20"  alt="wages" > </td>
    <td><input type="button" tabindex="201" class="three"  value="Verify Employer Total" onClick="verifywages(totwages1.value);"></td>
    <td></td>
   
        
        <td><input type="submit" tabindex="202" class="three"  value="Save Employer Data" name="action" onclick="return(WageVal(this.form))" alt="Save Employer Data" tabindex=112 accesskey="o" >
            
            <!-- <td> <input type="submit" class="three" id="saveRec" name="action" tabindex="10" value="Save Employer Data" onclick="return(WageVal(this.<))" alt="Save Employer Data" tabindex=112 accesskey="o" > -->
        </td>
        
    </tr>
    
    
</form>
</table>
</div> 
  </form>
 
 
 <script language="JavaScript"> <!--
    document.frm1.p_Lname+rownum.focus();
 </script>
 
<br>
<!-- /////////////////////////////////////TemplateEndEditable /////////////////////////////////////-->
<!-- 
    Document   : NHES_Bottom
    Created on : Mar 17, 2008, 10:38:27 AM
    Author     : noreen.s.burke
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
</td>
</tr>
<tr>
    <td>&nbsp;</td>
</tr>
 
 
<tr>
 
</tr>
<br>
<br>
<br>
<br>
<tr>
    <td height="3"><img src="http://www.nh.gov/nhes/graphics/ds0.gif" width="100%" height="3" alt=" "></td>
</tr>
<tr>
    <td height="35"><table width="99%" height="35"  border="0" align="left" cellpadding="0" cellspacing="0">
            <tr>
                <td width="30"><img src="http://www.nh.gov/nhes/graphics/iconseal.gif" width="25" height="25" hspace="10" alt="NH State Seal"></td>
                <td><a href="http://www.nh.gov/">nh.gov</a> | <a href="http://www.nh.gov/disclaimer.html" >privacy policy</a> | <a href="http://www.nh.gov/wai/index.html">accessibility policy</a></td>
                <td><div align="right">Copyright (c) State of New Hampshire, 2009</div></td>
            </tr>
    </table></td>
</tr>
</table>
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24367548
I am looking at the code you posted in the snippet. Is that HTML just from one page? If so you need to first fix the html. There are multiple, serious issues in validation that would cause a browser problems. Just as an example the way the html and body tag is used. I can elaborate if you need and if that code is just from one page. Using an html validator like the one at http://validator.w3.org is a start to know what to fix and work on.
bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24367628
One other point in that code, if it is from different pages, then which is the form and part you are having the problem with.  Some of the html has a value of "indexTab++" or "tabx" for the tabindex attribute.  Those are not valid and, if that is where you are having the problem, they are what need to be fixed.
In the area you mentioned with the index values of 200, 201, and 202 I noticed the 202 element actually has a duplicate attribute that changes it to 112.  That value is also duplicated in another element (which also has a duplicate tabindex attribute).
What is the order you want and how does the form react when you use tab?
bol
0
 

Author Comment

by:noreenburke
ID: 24367672
It is html code is wrapped in jsp.  any help will be great
the code also hasincludes as well for the header and footer of the page.

I will check out the validator you suggested.
0
 

Author Comment

by:noreenburke
ID: 24367756
tab order = accNumb , batch_no, nameCtrl,  userCode, ytQtr, SourceCode (first 6)
then the dynamic rows,
last=  totwages1, then 2 buttons


removed the 112. thanks.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24367843
Thanks for letting me know that is what you got in your browser just from one page.  To see what I mean by validation issues notice how you have script and link tags above the html tag.  The html tag should be the first (with the exception of a doctype tag).
Also notice you have a title tag in the middle of the body (it is actually used more than once) when it should be just in the head tags of the html (and used only once).
The script you have should also all be in the head section of the html (i.e. between the opening and closing head tag) unless it has to be in a part of the html.  The script seems to mainly be functions so there is no reasons they can't be in the head section as normal.
The doctype tag you do have is almost at the end of the html code.
I didn't look at the use of the table and its tags but you should probably review those too.  Of course since the html is made by server pages it can be hard to fix and get them working together but you need to do that (and it can definitely be done).  The JSP code has to make good, valid html or the browser will just have a lot of problems with the page.
I hope this helps as a start.  If the issue isn't fixed after getting valid html then we can look into it more but you definitely should fix those major issues first.  Let me know if you have a question about any of this.  If what you find does require a new EE question then feel free to post the URL (of your new EE question) here and I will be glad to try to help in it too.
bol
0
 

Author Comment

by:noreenburke
ID: 24377321
I am presently working to get the html to render correctly.  still not having luck with the tabbing issues, but still looking at the good suggestions you have given me.
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 500 total points
ID: 24378296
noreenburke,
Thanks for the status.  I would not worry about the tabbing stuff until after you get the html to be valid (or at least get rid of the big issues).  It is OK to ignore some minor validation things that site may report but it really is pointless to try to work on tabbing or anything else before getting the html better.  It might be the issues will go away when the html is valid.  If not then at least we know that isn't the cause and can work on the tabindex values or whatever else to fix this.
bol
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How do I post more than 1 item to php backend 24 53
Word Press Fixes to Google Speed Test Issues 2 48
Pass a js value to an html form 5 40
Drag & Drop Error 5 24
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question