Solved

tab indexing with a dymanic form section

Posted on 2009-05-11
13
243 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
  • 5
  • 4
13 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
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
Comment Utility
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:noreenburke
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now