How do you set focus to the first button of a radio group 2

LyndonOHRC · Mar 9, 2011

I've tried several methods to give focus to a radio group and the focus pauses there for a second and then jumps to the next element in the tabindex. I've tried setting focus to the RB using the onblur method in the preceeding element and also set the tabindex of the RB in an onload function.

Is this the default behavior in windows/IE8? I even tried making the elements into check boxes but I get the same behavior. The tab doesn't want to stop on these type of elements...

The form I'm working on is a lot of data entry, in house intranet use only, and they want to keep their hands on the keyboard (not the mouse) as much as possible. If the tab would stop on the radio button they could make their selection with the arrow key.

I've googled this subject a lot and found very little useful information.

Thanks

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

vacunita · Mar 9, 2011

Unless, you have something that removes focus from the radio button when it receives it, the default behavior is to focus it.

I don't have access to IE8 right now, being on a Mac, but Have you tried just building a simple test harness and see if it works there?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

LyndonOHRC · Mar 15, 2011

I built a simple test form and it works as expected??? I am trying to find what I may be doing elsewhere in the application that would be causing this behavior. All I can see is that I am setting the tabIndex as such:

Code:

document.getElementById('Track').focus(); //This focus() works
document.getElementById('Track').tabIndex="1"; //radio button group
document.getElementById('RaceDate').tabIndex="2";
document.getElementById('RaceType').tabIndex="3"; //radio button group; focus() skips over this element when tabbing from element RaceDate???
document.getElementById('RaceNo').tabIndex="4";
document.getElementById('Breed').tabIndex="5";
document.getElementById('TrackPurse').tabIndex="6";
document.getElementById('OKSupp').tabIndex="7";
....

I'm setting the tabIndex values this way as several elements need to be skipped as their vaule is being automatically populated.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

vacunita · Mar 15, 2011

After searching this a bit more, yes, its a default behavior. If the Radio buttons have the same name (so they are a radio group) IE treats them as a single control element and so tabbing moves you out of the entire control.

Using the arrow keys will let you move around the radio buttons once you tab into the group.

With that said, i built this test, and it works:

Code:

<form>
<input type="text" name="partNo" tabindex='1'><br>
<input type="radio" name="radiogroup1" value="1" tabindex='2' [red]onblur="document.getElementsByName('radiogroup1')[1].focus();[/red]"><input type="radio" name="radiogroup1" value="2" tabindex='3' [red]onblur="document.getElementsByName('radiogroup1')[2].focus();[/red]"><input type="radio" name="radiogroup1" value="3" tabindex='4'>
<br><input type="text" name="partDesc" tabindex='5'>
<br>
<input type="text" name="partType" tabindex='4'>
<input type="submit" name="submit" value="Send It"tabindex='6'>
</form>

Onblur of the first 2 items to set the focus to the correct radio button that follows. Of course if the user uses the mouse and clicks outside the radio buttons it will also return him to the next radio button in order. Once the last radio button is reached it will let the user leave he radio button control.

Perhaps if you show me your html code for your radio buttons we can debug further. All I can gather from your JS is that you elements with different ID's. I'm assuming you radio buttons Type, RaceDate and RaceType correct?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

LyndonOHRC · Mar 15, 2011

The radio buttons have the same id and name, they are: Track , RaceType, and breed.

The curious thing is focus will not stop on the RaceType radio group so the solution you offered has no impact. Focus just jumps across RaceType and stops at the next element, RaceNo.

Sorry the html is so much, it is really a big project... I'll put the js too as my beginner skill level there may be the culprit. And thanks for your help!

html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[/URL] />
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Chart Add Edit</title>
	<link rel="stylesheet" type="text/css" href="Chart.css" />
	<script type="text/javascript">
			var WinRowList='Win,DHWin,Fourth Place,Seventh Place,Tenth Place'
			var PlaceRowList='Place,DHWin,DHPlace,Fifth Place,Eighth Place'
			var ShowRowList='Show,DHPlace,DHShow,Sixth Place,Ninth Place'
	</script>
</head>
<body>
<FORM NAME="ChartForm" ACTION="ChartUpdate.cfm" METHOD=POST onSubmit="return _CF_checkChartForm(this)" ID="ChartForm">
		<input type="hidden" name="RSWinPayLinehidden" id="RSWinPayLinehidden" value="Win" />
		<input type="hidden" name="DMWinPayLinehidden" id="DMWinPayLinehidden" value="Win" />
		<input type="hidden" name="SRWinPayLinehidden" id="SRWinPayLinehidden" value="Win" />
		<input type="hidden" name="RSPlacePayLinehidden" id="RSPlacePayLinehidden" value="Place" />
		<input type="hidden" name="DMPlacePayLinehidden" id="DMPlacePayLinehidden" value="Place" />
		<input type="hidden" name="SRPlacePayLinehidden" id="SRPlacePayLinehidden" value="Place" />
		<input type="hidden" name="RSShowPayLinehidden" id="RSShowPayLinehidden" value="Show" />
		<input type="hidden" name="DMShowPayLinehidden" id="DMShowPayLinehidden" value="Show" />
		<input type="hidden" name="SRShowPayLinehidden" id="SRShowPayLinehidden" value="Show" />
		<input type="hidden" name="DMWinToDatePresent" id="DMWinToDatePresent" value="" />
		<input type="hidden" name="SRWinToDatePresent" id="SRWinToDatePresent" value="" />
		<input type="hidden" name="DMPlaceToDatePresent" id="DMPlaceToDatePresent" value="" />
		<input type="hidden" name="SRPlaceToDatePresent" id="SRPlaceToDatePresent" value="" />
		<input type="hidden" name="DMShowToDatePresent" id="DMShowToDatePresent" value="" />
		<input type="hidden" name="SRShowToDatePresent" id="SRShowToDatePresent" value="" />
		<input type="Hidden" name="MultiWinTop" id="MultiWinTop" value="650" /> 
		<input type="Hidden" name="MultiWinLeft" id="MultiWinLeft" value="375" /> 
		<input type="Hidden" name="MultiWinWidth" id="MultiWinWidth" value="875" /> 
		<input type="Hidden" name="MultiWinHeight" id="MultiWinHeight" value="300" /> 
		<input type="Hidden" name="RSWinPrintAddress" id="RSWinPrintAddress" value="No" />
		<input type="Hidden" name="DMWinPrintAddress" id="DMWinPrintAddress" value="No" />
		<input type="Hidden" name="SRWinPrintAddress" id="SRWinPrintAddress" value="No" />
		<input type="Hidden" name="RSPlacePrintAddress" id="RSPlacePrintAddress" value="No" />
		<input type="Hidden" name="DMPlacePrintAddress" id="DMPlacePrintAddress" value="No" />
		<input type="Hidden" name="SRPlacePrintAddress" id="SRPlacePrintAddress" value="No" />
		<input type="Hidden" name="RSShowPrintAddress" id="RSShowPrintAddress" value="No" />
		<input type="Hidden" name="DMShowPrintAddress" id="DMShowPrintAddress" value="No" />
		<input type="Hidden" name="SRShowPrintAddress" id="SRShowPrintAddress" value="No" />
		<input type="Hidden" name="HiddenRSWinBreed" id="HiddenRSWinBreed" value="" />
		<input type="Hidden" name="HiddenRSPlaceBreed" id="HiddenRSPlaceBreed" value="" />
		<input type="Hidden" name="HiddenRSShowBreed" id="HiddenRSShowBreed" value="" />
		<table class="BinkleyTable" align="center">
			<tr>
				<td colspan="5" style="font-size:10px" align="center">
					<a href="[URL unfurl="true"]http://www.ohrc.org/registry/ChartsMenu.cfm"[/URL] class="special">Chart Menu</a>
				</td>
			</tr>
			<tr>
				<td colspan="5" class="ColumnHeadingCell">
					<div align="center" style="font-size: 10px;">
						
							<input type="hidden" name="InsertUpdateFlag" id="InsertUpdateFlag" value="insert" />
							Add a New Chart [lpatton]
						
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="5"><div align="center"><input name="topSubmitBtn" type="submit" value=" Save " style="vertical-align: top;" /></div></td></tr>
			<tr>
				<td colspan="5">
					<table class="BinkleyTable" width="100%">
						<tr>
							<td>
								<div align="right">Race Date</div>
							</td>
							<td>
								<INPUT TYPE="Text" NAME="RaceDate" ID="RaceDate" SIZE="10" MAXLENGTH="10" VALUE="">
							</td>
							<td width="300px;">
								<div align="center">Oklahoma-Bred Award Chart</div>
							</td>
							<td>
								<div align="right">OKB Auth</div>
							</td>
							<td>
								<input onkeypress="noEntry();" name="TotalOKBAuth" id="TotalOKBAuth" size="10" maxlength="10" value="" />
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">Race Type</div>
							</td>
							<td colspan="2">
								
										<input checked 
												onKeyup="keyPressed('RaceNo',window.event);" 
												type="radio"   
												name="RaceType" 
												id="RaceType" 
												value="MDN">MDN
									
								
										<input 
												onKeyup="keyPressed('RaceNo',window.event);" 
												type="radio"   
												name="RaceType" 
												id="RaceType" 
												value="MDNClm">MDNClm
									
								
										<input 
												onKeyup="keyPressed('RaceNo',window.event);" 
												type="radio"   
												name="RaceType" 
												id="RaceType" 
												value="Clm1">Clm1
									
								
										<input 
												onKeyup="keyPressed('RaceNo',window.event);" 
												type="radio"   
												name="RaceType" 
												id="RaceType" 
												value="Cml2">Cml2
									
								
										<input 
												onKeyup="keyPressed('RaceNo',window.event);" 
												type="radio"   
												name="RaceType" 
												id="RaceType" 
												value="Alw">Alw
									
								
										<input 
												onKeyup="keyPressed('RaceNo',window.event);" 
												type="radio"   
												name="RaceType" 
												id="RaceType" 
												value="Stks">Stks
									
								
							</td>
							<td>
								<div align="right">Purse Sup</div>
							</td>
							<td>
								<input onkeypress="noEntry();" name="AddedPurseSupp" id="AddedPurseSupp" size="10" maxlength="10" value="" />
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">Race</div>
							</td>
							<td>
								<INPUT TYPE="Text" NAME="RaceNo" ID="RaceNo" SIZE="3" MAXLENGTH="3" VALUE=""> 
								Page
								<input name="PageNo" id="PageNo" size="2"  maxlength="3" value="1">
							</td>
							<td>
								&nbsp;
							</td>
							<td>
								<div align="right">Total Paid</div>
							</td>
							<td>
								<input onkeypress="noEntry();" name="TotalAwardPaid" id="TotalAwardPaid" size="12" maxlength="12" value="" />
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">Breed</div>
							</td>
							<td colspan="2">
								
										<input checked 
												onKeyup="keyPressed('TrackPurse',window.event);" 
												type="radio" 
												name="Breed" 
												id="Breed" 
												value="TB">TB
									
								
										<input 
												onKeyup="keyPressed('TrackPurse',window.event);" 
												type="radio" 
												name="Breed" 
												id="Breed" 
												value="QH">QH
									
								
										<input 
												onKeyup="keyPressed('TrackPurse',window.event);" 
												type="radio" 
												name="Breed" 
												id="Breed" 
												value="PT/AP">PT/AP
									
								
										<input 
												onKeyup="keyPressed('TrackPurse',window.event);" 
												type="radio" 
												name="Breed" 
												id="Breed" 
												value="P/A/Q">P/A/Q
									
								
										<input 
												onKeyup="keyPressed('TrackPurse',window.event);" 
												type="radio" 
												name="Breed" 
												id="Breed" 
												value="PT">PT
									
								
										<input 
												onKeyup="keyPressed('TrackPurse',window.event);" 
												type="radio" 
												name="Breed" 
												id="Breed" 
												value="AP">AP
									
								
							</td>
							<td>
								<div align="right">&nbsp;</div>
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">Trk Purse</div> 
							</td>
							<td>
								<INPUT TYPE="Text" NAME="TrackPurse" ID="TrackPurse" SIZE="10" MAXLENGTH="10" VALUE="">
							</td>
							<td>
								<div align="center">
									Meet 
									
											<input checked 
													onKeyup="keyPressed('RaceDate',window.event);" 
													name="Track" 
													id="Track" 
													type="radio" 
													value="RPT" >RPT
											
										
									
											<input 
													onKeyup="keyPressed('RaceDate',window.event);" 
													name="Track" 
													id="Track" 
													type="radio" 
													value="RPM" >RPM
											
										
									
											<input 
													onKeyup="keyPressed('RaceDate',window.event);" 
													name="Track" 
													id="Track" 
													type="radio" 
													value="WRD" >WRD
											
										
									
											<input 
													onKeyup="keyPressed('RaceDate',window.event);" 
													name="Track" 
													id="Track" 
													type="radio" 
													value="WRM" >WRM
											
										
									
											<input 
													onKeyup="keyPressed('RaceDate',window.event);" 
													name="Track" 
													id="Track" 
													type="radio" 
													value="FMT" >FMT
											
										
									
								</div>
							</td>
							<td>
								<div align="right">OK Sup</div>
							</td>
							<td>
								<input name="OKSupp" id="OKSupp" size="10" maxlength="10" value="" onblur="return validateDataRealTime('OKSupp');" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan="5">
					<table border="0">
						<tr>
							<td id="rswin" >
								Race Stock <span id='RSWinPayLine' onclick="incrementPayLine('win');">&nbsp;&nbsp;Win&nbsp;&nbsp;&nbsp;</span>
								<table class="BinkleyTable" align="left">
									<tr>
										<td>
											<div align="right">Award</div>
										</td>
										<td>
											<input name="RSWinAward" id="RSWinAward" size="10" maxlength="10" value="" onchange="return validateDataRealTime(this.id);" />
										</td>
										<td>
											<div align="right">Foaled</div>
										</td>
										<td>
											<INPUT TYPE="Text" NAME="RSWinFoaled" ID="RSWinFoaled" SIZE="10" MAXLENGTH="10" VALUE="">
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">Horse</div>
										</td>
										<td>
											<input name="RSWinHorseName" 
													id="RSWinHorseName" 
													size="30" 
													maxlength="100" 
													value="" 
													onkeyup="FoalNameSuggestList(this.id,'RSWinHorseTableData')"  autocomplete="off"
													onchange="clearRow('RSWin');" /> <span id="RSWinBreed"></span>
										</td>
										<td>
											<div align="right">OBN</div>
										</td>
										<td>
											<input name="RSWinOBN" id="RSWinOBN" size="7" maxlength="7" value="" />
										</td>
									</tr>
									<tr>
										<td></td>
										<td id="RSWinHorseTableData" colspan="3" style="display:none;"></td>
									</tr>
									<tr>
										<td>
											<div align="right">Sex</div>
										</td>
										<td>
											<input name="RSWinSex" id="RSWinSex" size="10" maxlength="10" value="" />
										</td>
										<td>
											<div align="right">SSN/TIN</div>
										</td>
										<td>
											<input name="RSWinSSN" id="RSWinSSN" size="11" maxlength="11" value="" />
										</td>
									</tr>
									<tr>
										<td style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" onclick="LicOwner('RSWin');">
											<div align="right">Owner</div>
										</td>
										<td colspan="3">
											<input name="RSWinOwnerFirstName" id="RSWinOwnerFirstName" size="20" maxlength="100" value="" />
											<input name="RSWinOwnerLastName" id="RSWinOwnerLastName" size="20" maxlength="100" value="" />
											<span id="RSWinMulti" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td id="RSWinOwnerList" colspan="4" style="display: none;"></td>
									</tr>
									<tr>
										<td>
											<div align="right">C/O</div>
										</td>
										<td colspan="3">
											<input name="RSWinCOOwnerName" id="RSWinCOOwnerName" size="50" maxlength="100" value="" />
											
										</td>
									</tr>
									<tr>
										<td>
											<div style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" align="right" onclick="toggleClassName('RSWin');">Add1</div>
										</td>
										<td colspan="2">
											<input name="RSWinAddr1" id="RSWinAddr1" size="50" maxlength="50"  value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											New 
											
												<input name="RSWinNewAdd" id="RSWinNewAdd" type="Checkbox">	
											
											Hold 
											
												<input name="RSWinHold" id="RSWinHold" type="Checkbox">
											
										</td>
									</tr>
 
									<tr>
										<td>
											<div align="right">C/S/Z</div>
										</td>
										<td colspan="2">
											<input name="RSWinCity" id="RSWinCity" size="25" maxlength="50" value="" class="PrintAddressNo" />
											<input name="RSWinState" id="RSWinState" size="3" maxlength="3" value="" class="PrintAddressNo" />
											<input name="RSWinZip" id="RSWinZip" size="10" maxlength="10" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											First Pay 
											
												<input name="RSWinFirstPay" id="RSWinFirstPay" type="Checkbox">
											
										</td>
									</tr>
								</table>
							</td>
							<td id="dmwin" >
								Dam  <span id='DMWinPayLine' onclick="incrementPayLine('win');" style="font-weight: bold;">&nbsp;&nbsp;Win&nbsp;&nbsp;&nbsp;</span> 
								<table class="BinkleyTable">
									<tr>
										<td>
											<div align="right" onclick="splitAward('DMWinAward');" style="color:541eff; background-color:WhiteSmoke;cursor:pointer;">Award</div>
										</td>
										<td colspan="2">
											<input name="DMWinAward" id="DMWinAward" size="10" maxlength="10" value="" onchange="return validateDataRealTime(this.id);" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">From</div>
										</td>
										<td colspan="2">
											<INPUT TYPE="Text" NAME="DMWinFromDate" ID="DMWinFromDate" SIZE="10" MAXLENGTH="10" VALUE="">
											To
											
												<span id="cellDMWinToDate">
													<INPUT TYPE="Text" NAME="DMWinToDate" ONBLUR="toPresent('DMWinToDate','DMWinFromDate','cellDMWinToDate','presentDMWinToDate','DMWinPresent');" ID="DMWinToDate" SIZE="10" MAXLENGTH="10" VALUE="">
												</span>
											
												<span id="presentDMWinToDate" style="display:none">
													<input 
														name="DMWinPresent" 
														id="DMWinPresent" 
														value="Present" 
														size="10" 
														onfocus="swapToDateDisplay('presentDMWinToDate','cellDMWinToDate','DMWinPresent');" 
														style="background-color:LightPink;" />
												</span>
											
											
											SSN/TIN
											<input name="DMWinSSN" id="DMWinSSN" size="11" maxlength="11" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">Dam</div>
										</td>
										<td colspan="2">
											<input name="DMWinHorseName" id="DMWinHorseName" size="20" maxlength="100" value="" />
											OBN
											<input name="DMWinOBN" id="DMWinOBN" size="7" maxlength="7" value="" />
											<span id="DMWinXfer" style="Color:Red;cursor:pointer;"> 
												
											</span>
											First Foal 
											
												<input type="Checkbox" name="RSWinFirstFoal" id="RSWinFirstFoal">
											
										</td>
									</tr>
									<tr>
										<td style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" onclick="LicOwner('DMWin');">
											<div align="right">Owner</div>
										</td>
										<td colspan="2">
											<input name="DMWinOwnerFirstName" id="DMWinOwnerFirstName" size="20" maxlength="50" value="" />
											<input name="DMWinOwnerLastName" id="DMWinOwnerLastName" size="20" maxlength="50" value="" />
											<span id="DMWinMulti" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td></td>
										<td id="DMWinOwnerList" colspan="2" style="display: none;">List Goes Here</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/O</div>
										</td>
										<td colspan="2">
											<input name="DMWinCOOwnerName" id="DMWinCOOwnerName" size="50" maxlength="100" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" align="right" onclick="toggleClassName('DMWin');">Add1</div>
										</td>
										<td>
											<input name="DMWinAddr1" id="DMWinAddr1" size="50" maxlength="50" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											New 
											
												<input name="DMWinNewAdd" id="DMWinNewAdd" type="Checkbox">	
											
											Hold 
											
												<input name="DMWinHold" id="DMWinHold" type="Checkbox">
											
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/S/Z</div>
										</td>
										<td>
											<input name="DMWinCity" id="DMWinCity" size="25" maxlength="50" value="" class="PrintAddressNo" />
											<input name="DMWinState" id="DMWinState" size="3" maxlength="3" value="" class="PrintAddressNo" />
											<input name="DMWinZip" id="DMWinZip" size="10" maxlength="10" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											First Pay 
											
												<input name="DMWinFirstPay" id="DMWinFirstPay" type="Checkbox">
											
										</td>
									</tr>
								</table>
							</td>
							<td id="srwin" >
								Sire <span id='SRWinPayLine' onclick="incrementPayLine('win');">&nbsp;&nbsp;Win&nbsp;&nbsp;&nbsp;</span> 
								<table class="BinkleyTable">
									<tr>
										<td>
											<div align="right">Award</div>
										</td>
										<td colspan="2">
											<input name="SRWinAward" id="SRWinAward" size="10" maxlength="10" value="" onchange="return validateDataRealTime(this.id);" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">From</div>
										</td>
										<td colspan="2">
											<INPUT TYPE="Text" NAME="SRWinFromDate" ID="SRWinFromDate" SIZE="10" MAXLENGTH="10" VALUE="">
											To
											
												<span id="cellSRWinToDate">
													<INPUT TYPE="Text" NAME="SRWinToDate" ONBLUR="toPresent('SRWinToDate','SRWinFromDate','cellSRWinToDate','presentSRWinToDate','SRWinPresent');" ID="SRWinToDate" SIZE="10" MAXLENGTH="10" VALUE="">
												</span>
											
											<span id="presentSRWinToDate" style="display:none">
												<input 
													name="SRWinPresent" 
													id="SRWinPresent" 
													value="Present" 
													size="10" 
													onfocus="swapToDateDisplay('presentSRWinToDate','cellSRWinToDate','SRWinPresent');" 
													style="background-color:LightPink;" />
											</span>
										
										SSN/TIN
										<input name="SRWinSSN" id="SRWinSSN" size="11" maxlength="11" value="" />
									</td>
								</tr>
								<tr>
									<td>
										<div align="right">Sire</div>
									</td>
									<td colspan="2">
										<input name="SRWinHorseName" id="SRWinHorseName" size="20" maxlength="100" value="" />
										OBN
										<input name="SRWinOBN" id="SRWinOBN" size="7" maxlength="7" value="" />
										<span id="SRWinXfer" style="Color:Red;cursor:pointer;"> 
											
										</span>
									</td>
								</tr>
								<tr>
									<td style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" onclick="LicOwner('SRWin');">
										<div align="right">Owner</div>
									</td>
									<td colspan="2">
										<input name="SRWinOwnerFirstName" id="SRWinOwnerFirstName" size="20" maxlength="50" value="" />
										<input name="SRWinOwnerLastName" id="SRWinOwnerLastName" size="20" maxlength="50" value="" />
										<span id="SRWinMulti" style="Color:Red;cursor:pointer;"> 
											
										</span>
									</td>
								</tr>
								<tr>
									<td></td>
									<td id="SRWinOwnerList" colspan="2" style="display: none;">List Goes Here</td>
								</tr>
								<tr>
									<td>
										<div align="right">C/O</div>
									</td>
									<td colspan="2">
										<input name="SRWinCOOwnerName" id="SRWinCOOwnerName" size="50" maxlength="100" value="" />
									</td>
								</tr>
								<tr>
									<td>
										<div style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" align="right" onclick="toggleClassName('SRWin');">Add1</div>
									</td>
									<td>
										<input name="SRWinAddr1" id="SRWinAddr1" size="50" maxlength="50" value="" class="PrintAddressNo" />
									</td>
									<td align="right">
										New 
										
											<input name="SRWinNewAdd" id="SRWinNewAdd" type="Checkbox">	
										
										Hold 
										
											<input name="SRWinHold" id="SRWinHold" type="Checkbox">
										
									</td>
								</tr>
								<tr>
									<td>
										<div align="right">C/S/Z</div>
									</td>
									<td>
										<input name="SRWinCity" id="SRWinCity" size="25" maxlength="50" value="" class="PrintAddressNo" />
										<input name="SRWinState" id="SRWinState" size="3" maxlength="3" value="" class="PrintAddressNo" />
										<input name="SRWinZip" id="SRWinZip" size="10" maxlength="10" value="" class="PrintAddressNo" />
									</td>
									<td align="right">
										First Pay 
										
											<input name="SRWinFirstPay" id="SRWinFirstPay" type="Checkbox">
										
									</td>
								</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td id="rsplace" >
								<span id='RSPlacePayLine' onclick="incrementPayLine('place');">&nbsp;&nbsp;Place&nbsp;&nbsp;&nbsp;</span> 
								<table class="BinkleyTable">
									<tr>
										<td>
											<div align="right">Award</div>
										</td>
										<td>
											<input name="RSPlaceAward" id="RSPlaceAward" size="10" maxlength="10" value="" onchange="return validateDataRealTime(this.id);" />
										</td>
										<td>
											<div align="right">Foaled</div>
										</td>
										<td>
											<INPUT TYPE="Text" NAME="RSPlaceFoaled" ID="RSPlaceFoaled" SIZE="10" MAXLENGTH="10" VALUE="">
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">Horse</div>
										</td>
										<td>
											<input name="RSPlaceHorseName" 
													id="RSPlaceHorseName" 
													size="30" 
													maxlength="100" 
													value="" 
													onkeyup="FoalNameSuggestList(this.id,'RSPlaceHorseTableData')"  autocomplete="off"
													 /> <span id="RSPlaceBreed"></span>
										</td>
											
										<td><div align="right">OBN</div>
										</td>
										<td>
											<input name="RSPlaceOBN" id="RSPlaceOBN" size="7" maxlength="7" value="" />
										</td>
										
									</tr>
									<tr>
										<td></td>
										<td id="RSPlaceHorseTableData" colspan="3" style="display: none;"></td>
									</tr>
									<tr>
										<td>
											<div align="right">Sex</div>
										</td>
										<td>
											<input name="RSPlaceSex" id="RSPlaceSex" size="10" maxlength="10" value="" />
										</td>
										<td>
											<div align="right">SSN/TIN</div>
										</td>
										<td>
											<input name="RSPlaceSSN" id="RSPlaceSSN" size="11" maxlength="11" value="" />
										</td>
									</tr>
									<tr>
										<td style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" onclick="LicOwner('RSPlace');">
											<div align="right">Owner</div>
										</td>
										<td colspan="3">
											<input name="RSPlaceOwnerFirstName" id="RSPlaceOwnerFirstName" size="25" maxlength="50" value="" />
											<input name="RSPlaceOwnerLastName" id="RSPlaceOwnerLastName" size="25" maxlength="50" value="" />
											<span id="RSPlaceMulti" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td></td>
										<td id="RSPlaceOwnerList" colspan="3" style="display: none;">List Goes Here</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/O</div>
										</td>
										<td colspan="3">
											<input name="RSPlaceCOOwnerName" id="RSPlaceCOOwnerName" size="50" maxlength="100" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" align="right" onclick="toggleClassName('RSPlace');">Add1</div>
										</td>
										<td colspan="2">
											<input name="RSPlaceAddr1" id="RSPlaceAddr1" size="50" maxlength="50" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											New 
											
												<input name="RSPlaceNewAdd" id="RSPlaceNewAdd" type="Checkbox">	
											
											Hold 
											
												<input name="RSPlaceHold" id="RSPlaceHold" type="Checkbox">
											
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/S/Z</div>
										</td>
										<td colspan="2">
											<input name="RSPlaceCity" id="RSPlaceCity" size="25" maxlength="50" value="" class="PrintAddressNo" />
											<input name="RSPlaceState" id="RSPlaceState" size="3" maxlength="3" value="" class="PrintAddressNo" />
											<input name="RSPlaceZip" id="RSPlaceZip" size="10" maxlength="10" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											First Pay 
											
												<input name="RSPlaceFirstPay" id="RSPlaceFirstPay" type="Checkbox">
											
										</td>
									</tr>
								</table>
							</td>
							<td id="dmplace" >
								<span id='DMPlacePayLine' onclick="incrementPayLine('place');">&nbsp;&nbsp;Place&nbsp;&nbsp;&nbsp;</span> 
								<table class="BinkleyTable">
									<table class="BinkleyTable">
									<tr>
										<td>
											<div align="right" onclick="splitAward('DMPlaceAward');" style="color:541eff; background-color:WhiteSmoke;cursor:pointer;">Award</div>
										</td>
										<td colspan="2">
											<input name="DMPlaceAward" id="DMPlaceAward" size="10" maxlength="10" value="" onchange="return validateDataRealTime(this.id);" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">From</div>
										</td>
										<td colspan="2">
											<INPUT TYPE="Text" NAME="DMPlaceFromDate" ID="DMPlaceFromDate" SIZE="10" MAXLENGTH="10" VALUE="">
											To
											
												<span id="cellDMPlaceToDate">
													<INPUT TYPE="Text" NAME="DMPlaceToDate" ONBLUR="toPresent('DMPlaceToDate','DMPlaceFromDate','cellDMPlaceToDate','presentDMPlaceToDate','DMPlacePresent');" ID="DMPlaceToDate" SIZE="10" MAXLENGTH="10" VALUE="">
												</span>
											
												<span id="presentDMPlaceToDate" style="display:none">
													<input 
														name="DMPlacePresent" 
														id="DMPlacePresent" 
														value="Present" 
														size="10" 
														onfocus="swapToDateDisplay('presentDMPlaceToDate','cellDMPlaceToDate','DMPlacePresent');" 
														style="background-color:LightPink;" />
												</span>
											
											
											SSN/TIN
											<input name="DMPlaceSSN" id="DMPlaceSSN" size="11" maxlength="11" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">Dam</div>
										</td>
										<td colspan="2">
											<input name="DMPlaceHorseName" id="DMPlaceHorseName" size="20" maxlength="100" value="" />
											OBN
											<input name="DMPlaceOBN" id="DMPlaceOBN" size="7" maxlength="7" value="" />
											<span id="DMPlaceXfer" style="Color:Red;cursor:pointer;"> 
												
											</span>
											First Foal 
											
												<input type="Checkbox" name="RSPlaceFirstFoal" id="RSPlaceFirstFoal">
											
										</td>
									</tr>
									<tr>
										<td style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" onclick="LicOwner('DMPlace');">
											<div align="right">Owner</div>
										</td>
										<td colspan="2">
											<input name="DMPlaceOwnerFirstName" id="DMPlaceOwnerFirstName" size="20" maxlength="50" value="" />
											<input name="DMPlaceOwnerLastName" id="DMPlaceOwnerLastName" size="20" maxlength="50" value="" />
											<span id="DMPlaceMulti" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td></td>
										<td id="DMPlaceOwnerList" colspan="2" style="display: none;">List Goes Here</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/O</div>
										</td>
										<td colspan="2">
											<input name="DMPlaceCOOwnerName" id="DMPlaceCOOwnerName" size="50" maxlength="100" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" align="right" onclick="toggleClassName('DMPlace');">Add1</div>
										</td>
										<td>
											<input name="DMPlaceAddr1" id="DMPlaceAddr1" size="50" maxlength="50" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											New 
											
												<input name="DMPlaceNewAdd" id="DMPlaceNewAdd" type="Checkbox">	
											
											Hold 
											
												<input name="DMPlaceHold" id="DMPlaceHold" type="Checkbox">
											
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/S/Z</div>
										</td>
										<td>
											<input name="DMPlaceCity" id="DMPlaceCity" size="25" maxlength="50" value="" class="PrintAddressNo" />
											<input name="DMPlaceState" id="DMPlaceState" size="3" maxlength="3" value="" class="PrintAddressNo" />
											<input name="DMPlaceZip" id="DMPlaceZip" size="10" maxlength="10" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											First Pay 
											
												<input name="DMPlaceFirstPay" id="DMPlaceFirstPay" type="Checkbox">
											
										</td>
									</tr>
								</table>
							</td>
							<td id="srplace" >
								<span id='SRPlacePayLine' onclick="incrementPayLine('place');">&nbsp;&nbsp;Place&nbsp;&nbsp;&nbsp;</span> 
								<table class="BinkleyTable">
									<tr>
										<td>
											<div align="right">Award</div>
										</td>
										<td colspan="2">
											<input name="SRPlaceAward" id="SRPlaceAward" size="10" maxlength="10" value="" onchange="return validateDataRealTime(this.id);" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">From</div>
										</td>
										<td colspan="2">
											<INPUT TYPE="Text" NAME="SRPlaceFromDate" ID="SRPlaceFromDate" SIZE="10" MAXLENGTH="10" VALUE="">
											To
											
												<span id="cellSRPlaceToDate">
													<INPUT TYPE="Text" NAME="SRPlaceToDate" ONBLUR="toPresent('SRPlaceToDate','SRPlaceFromDate','cellSRPlaceToDate','presentSRPlaceToDate','SRPlacePresent');" ID="SRPlaceToDate" SIZE="10" MAXLENGTH="10" VALUE="">
												</span>
											
												<span id="presentSRPlaceToDate" style="display:none">
													<input 
														name="SRPlacePresent" 
														id="SRPlacePresent" 
														value="Present" 
														size="10" 
														onfocus="swapToDateDisplay('presentSRPlaceToDate','cellSRPlaceToDate','SRPlacePresent');" 
														style="background-color:LightPink;" />
												</span>
											
											
											SSN/TIN
											<input name="SRPlaceSSN" id="SRPlaceSSN" size="11" maxlength="11" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">Sire</div>
										</td>
										<td colspan="2">
											<input name="SRPlaceHorseName" id="SRPlaceHorseName" size="20" maxlength="100" value="" />
											OBN
											<input name="SRPlaceOBN" id="SRPlaceOBN" size="7" maxlength="7" value="" />
											<span id="SRPlaceXfer" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" onclick="LicOwner('SRPlace');">
											<div align="right">Owner</div>
										</td>
										<td colspan="2">
											<input name="SRPlaceOwnerFirstName" id="SRPlaceOwnerFirstName" size="20" maxlength="50" value="" />
											<input name="SRPlaceOwnerLastName" id="SRPlaceOwnerLastName" size="20" maxlength="50" value="" />
											<span id="SRPlaceMulti" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td></td>
										<td id="SRPlaceOwnerList" colspan="2" style="display: none;">List Goes Here</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/O</div>
										</td>
										<td colspan="2">
											<input name="SRPlaceCOOwnerName" id="SRPlaceCOOwnerName" size="50" maxlength="100" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" align="right" onclick="toggleClassName('SRPlace');">Add1</div>
										</td>
										<td>
											<input name="SRPlaceAddr1" id="SRPlaceAddr1" size="50" maxlength="50" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											New 
											
												<input name="SRPlaceNewAdd" id="SRPlaceNewAdd" type="Checkbox">	
											
											Hold 
											
												<input name="SRPlaceHold" id="SRPlaceHold" type="Checkbox">
											
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/S/Z</div>
										</td>
										<td>
											<input name="SRPlaceCity" id="SRPlaceCity" size="25" maxlength="50" value="" class="PrintAddressNo" />
											<input name="SRPlaceState" id="SRPlaceState" size="3" maxlength="3" value="" class="PrintAddressNo" />
											<input name="SRPlaceZip" id="SRPlaceZip" size="10" maxlength="10" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											First Pay 
											
												<input name="SRPlaceFirstPay" id="SRPlaceFirstPay" type="Checkbox">
											
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td id="rsshow" >
								<span id='RSShowPayLine' onclick="incrementPayLine('show');">&nbsp;&nbsp;Show&nbsp;&nbsp;&nbsp;</span> 
								<table class="BinkleyTable">
									<tr>
										<td>
											<div align="right">Award</div>
										</td>
										<td>
											<input name="RSShowAward" id="RSShowAward" size="10" maxlength="10" value="" onchange="return validateDataRealTime(this.id);" />
										</td>
										<td>
											<div align="right">Foaled</div>
										</td>
										<td>
											<INPUT TYPE="Text" NAME="RSShowFoaled" ID="RSShowFoaled" SIZE="10" MAXLENGTH="10" VALUE="">
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">Horse</div>
										</td>
										<td>
											<input name="RSShowHorseName" 
													id="RSShowHorseName" 
													size="30" 
													maxlength="100" 
													value="" 
													onkeyup="FoalNameSuggestList(this.id,'RSShowHorseTableData')"  autocomplete="off"
													 /> <span id="RSShowBreed"></span>
										</td>
										<td>
											<div align="right">OBN</div>
										</td>
										<td>
											<input name="RSShowOBN" id="RSShowOBN" size="7" maxlength="7" value="" />
										</td>
									</tr>
									<tr>
										<td></td>
										<td id="RSShowHorseTableData" colspan="3" style="display: none;"></td>
									</tr>
									<tr>
										<td>
											<div align="right">Sex</div>
										</td>
										<td>
											<input name="RSShowSex" id="RSShowSex" size="10" maxlength="10" value="" /> 
										</td>
										<td>
											<div align="right">SSN/TIN</div>
										</td>
										<td>
											<input name="RSShowSSN" id="RSShowSSN" size="11" maxlength="11" value="" />
										</td>
									</tr>
									<tr>
										<td style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" onclick="LicOwner('RSShow');">
											<div align="right">Owner</div>
										</td>
										<td colspan="3">
											<input name="RSShowOwnerFirstName" id="RSShowOwnerFirstName" size="25" maxlength="50" value="" />
											<input name="RSShowOwnerLastName" id="RSShowOwnerLastName" size="25" maxlength="50" value="" />
											<span id="RSShowMulti" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td></td>
										<td id="RSShowOwnerList" colspan="3" style="display: none;">List Goes Here</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/O</div>
										</td>
										<td colspan="3">
											<input name="RSShowCOOwnerName" id="RSShowCOOwnerName" size="50" maxlength="100" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" align="right" onclick="toggleClassName('RSShow');">Add1</div>
										</td>
										<td colspan="2">
											<input name="RSShowAddr1" id="RSShowAddr1" size="50" maxlength="50" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											New 
											
												<input name="RSShowNewAdd" id="RSShowNewAdd" type="Checkbox">	
											
											Hold 
											
												<input name="RSShowHold" id="RSShowHold" type="Checkbox">
											
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/S/Z</div>
										</td>
										<td colspan="2">
											<input name="RSShowCity" id="RSShowCity" size="25" maxlength="50" value="" class="PrintAddressNo" />
											<input name="RSShowState" id="RSShowState" size="3" maxlength="3" value="" class="PrintAddressNo" />
											<input name="RSShowZip" id="RSShowZip" size="10" maxlength="10" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											First Pay 
											
												<input name="RSShowFirstPay" id="RSShowFirstPay" type="Checkbox">
											
										</td>
									</tr>
								</table>
							</td>
							<td id="dmshow" >
								<span id='DMShowPayLine' onclick="incrementPayLine('show');">&nbsp;&nbsp;Show&nbsp;&nbsp;&nbsp;</span> 
								<table class="BinkleyTable">
									<table class="BinkleyTable">
									<tr>
										<td>
											<div align="right" onclick="splitAward('DMShowAward');" style="color:541eff; background-color:WhiteSmoke;cursor:pointer;">Award</div>
										</td>
										<td colspan="2">
											<input name="DMShowAward" id="DMShowAward" size="10" maxlength="10" value="" onchange="return validateDataRealTime(this.id);" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">From</div>
										</td>
										<td colspan="2">
											<INPUT TYPE="Text" NAME="DMShowFromDate" ID="DMShowFromDate" SIZE="10" MAXLENGTH="10" VALUE="">
											To
											
												<span id="cellDMShowToDate">
													<INPUT TYPE="Text" NAME="DMShowToDate" ONBLUR="toPresent('DMShowToDate','DMShowFromDate','cellDMShowToDate','presentDMShowToDate','DMShowPresent');" ID="DMShowToDate" SIZE="10" MAXLENGTH="10" VALUE="">
												</span>
											
												<span id="presentDMShowToDate" style="display:none">
													<input 
														name="DMShowPresent" 
														id="DMShowPresent" 
														value="Present" 
														size="10" 
														onfocus="swapToDateDisplay('presentDMShowToDate','cellDMShowToDate','DMShowPresent');" 
														style="background-color:LightPink;" />
												</span>
											
											
											SSN/TIN
											<input name="DMShowSSN" id="DMShowSSN" size="11" maxlength="11" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">Dam</div>
										</td>
										<td colspan="2">
											<input name="DMShowHorseName" id="DMShowHorseName" size="20" maxlength="100" value="" />
											OBN
											<input name="DMShowOBN" id="DMShowOBN" size="7" maxlength="7" value="" />
											<span id="DMShowXfer" style="Color:Red;cursor:pointer;"> 
												
											</span>
											First Foal 
											
												<input type="Checkbox" name="RSShowFirstFoal" id="RSShowFirstFoal">
											
										</td>
									</tr>
									<tr>
										<td style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" onclick="LicOwner('DMShow');">
											<div align="right">Owner</div>
										</td>
										<td colspan="2">
											<input name="DMShowOwnerFirstName" id="DMShowOwnerFirstName" size="20" maxlength="50" value="" />
											<input name="DMShowOwnerLastName" id="DMShowOwnerLastName" size="20" maxlength="50" value="" />
											<span id="DMShowMulti" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td></td>
										<td id="DMShowOwnerList" colspan="3" style="display: none;">List Goes Here</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/O</div>
										</td>
										<td colspan="2">
											<input name="DMShowCOOwnerName" id="DMShowCOOwnerName" size="50" maxlength="100" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" align="right" onclick="toggleClassName('DMShow');">Add1</div>
										</td>
										<td>
											<input name="DMShowAddr1" id="DMShowAddr1" size="50" maxlength="50" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											New 
											
												<input name="DMShowNewAdd" id="DMShowNewAdd" type="Checkbox">	
											
											Hold 
											
												<input name="DMShowHold" id="DMShowHold" type="Checkbox">
											
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/S/Z</div>
										</td>
										<td>
											<input name="DMShowCity" id="DMShowCity" size="25" maxlength="50" value="" class="PrintAddressNo" />
											<input name="DMShowState" id="DMShowState" size="3" maxlength="3" value="" class="PrintAddressNo" />
											<input name="DMShowZip" id="DMShowZip" size="10" maxlength="10" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											First Pay 
											
												<input name="DMShowFirstPay" id="DMShowFirstPay" type="Checkbox">
											
										</td>
									</tr>
								</table>
							</td>
							<td id="srshow" >
								<span id='SRShowPayLine' onclick="incrementPayLine('show');">&nbsp;&nbsp;Show&nbsp;&nbsp;&nbsp;</span> 
								<table class="BinkleyTable">
									<tr>
										<td>
											<div align="right">Award</div>
										</td>
										<td colspan="2">
											<input name="SRShowAward" id="SRShowAward" size="10" maxlength="10" value="" onchange="return validateDataRealTime(this.id);" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">From</div>
										</td>
										<td colspan="2">
											<INPUT TYPE="Text" NAME="SRShowFromDate" ID="SRShowFromDate" SIZE="10" MAXLENGTH="10" VALUE="">
											To
											
												<span id="cellSRShowToDate">
													<INPUT TYPE="Text" NAME="SRShowToDate" ONBLUR="toPresent('SRShowToDate','SRShowFromDate','cellSRShowToDate','presentSRShowToDate','SRShowPresent');" ID="SRShowToDate" SIZE="10" MAXLENGTH="10" VALUE="">
												</span>
											
												<span id="presentSRShowToDate" style="display:none">
													<input 
														name="SRShowPresent" 
														id="SRShowPresent" 
														value="Present" 
														size="10" 
														onfocus="swapToDateDisplay('presentSRShowToDate','cellSRShowToDate','SRShowPresent');" 
														style="background-color:LightPink;" />
												</span>
											
											
											SSN/TIN
											<input name="SRShowSSN" id="SRShowSSN" size="11" maxlength="11" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">Sire</div>
										</td>
										<td colspan="2">
											<input name="SRShowHorseName" id="SRShowHorseName" size="20" maxlength="100" value="" />
											OBN
											<input name="SRShowOBN" id="SRShowOBN" size="7" maxlength="7" value="" />
											<span id="SRShowXfer" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" onclick="LicOwner('SRShow');">
											<div align="right">Owner</div>
										</td>
										<td colspan="2">
											<input name="SRShowOwnerFirstName" id="SRShowOwnerFirstName" size="20" maxlength="50" value="" />
											<input name="SRShowOwnerLastName" id="SRShowOwnerLastName" size="20" maxlength="50" value="" />
											<span id="SRShowMulti" style="Color:Red;cursor:pointer;"> 
												
											</span>
										</td>
									</tr>
									<tr>
										<td></td>
										<td id="SRShowOwnerList" colspan="2" style="display: none;">List Goes Here</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/O</div>
										</td>
										<td colspan="2">
											<input name="SRShowCOOwnerName" id="SRShowCOOwnerName" size="50" maxlength="100" value="" />
										</td>
									</tr>
									<tr>
										<td>
											<div style="color:541eff; background-color:WhiteSmoke;cursor:pointer;" align="right" onclick="toggleClassName('SRShow');">Add1</div>
										</td>
										<td>
											<input name="SRShowAddr1" id="SRShowAddr1" size="50" maxlength="50" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											New 
											
												<input name="SRShowNewAdd" id="SRShowNewAdd" type="Checkbox">	
											
											Hold 
											
												<input name="SRShowHold" id="SRShowHold" type="Checkbox">
											
										</td>
									</tr>
									<tr>
										<td>
											<div align="right">C/S/Z</div>
										</td>
										<td>
											<input name="SRShowCity" id="SRShowCity" size="25" maxlength="50" value="" class="PrintAddressNo" />
											<input name="SRShowState" id="SRShowState" size="3" maxlength="3" value="" class="PrintAddressNo" />
											<input name="SRShowZip" id="SRShowZip" size="10" maxlength="10" value="" class="PrintAddressNo" />
										</td>
										<td align="right">
											First Pay 
											
												<input name="SRShowFirstPay" id="SRShowFirstPay" type="Checkbox">
											
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr><td colspan="5"><div align="center"><input name="bottomSubmitBtn" id="bottomSubmitBtn" type="submit" value="Save" /></div></td></tr>
		</table>
	</FORM>
<script type="text/javascript" src="Chart.js"></script>
</body>
</html>

js:

Code:

var node = document.getElementById("HeadingOne");
node.parentNode.removeChild(node);
var node = document.getElementById("HeadingTwo");
node.parentNode.removeChild(node);
var padTwo='&nbsp;&nbsp;';
var padThree='&nbsp;&nbsp;&nbsp;';
var WinRowCounter=0;
var PlaceRowCounter=0;
var ShowRowCounter=0;
//split() converts comma-delimited list (ie Chart.WinRowPayLineCodes) to JavaScript 1dim array
var jsWinRowList = WinRowList.split(',');
var jsPlaceRowList = PlaceRowList.split(',');
var jsShowRowList = ShowRowList.split(',');
//Starting Tab Order

document.getElementById('Track').focus();
document.getElementById('Track').tabIndex="1";
document.getElementById('RaceDate').tabIndex="2";
document.getElementById('RaceType').tabIndex="3";
document.getElementById('RaceNo').tabIndex="4";
document.getElementById('Breed').tabIndex="5";
document.getElementById('TrackPurse').tabIndex="6";
document.getElementById('OKSupp').tabIndex="7";

document.getElementById('RSWinHorseName').tabIndex="8";
//document.getElementById('RSWinSex').tabIndex="9";
document.getElementById('RSWinOwnerFirstName').tabIndex="9";
document.getElementById('RSWinOwnerLastName').tabIndex="10";
document.getElementById('RSWinCOOwnerName').tabIndex="11";
document.getElementById('RSWinAddr1').tabIndex="12";
document.getElementById('RSWinCity').tabIndex="13";
document.getElementById('RSWinState').tabIndex="14";
document.getElementById('RSWinZip').tabIndex="15";
document.getElementById('RSWinSSN').tabIndex="16";
//document.getElementById('RSWinFoaled').tabIndex="17";
//document.getElementById('RSWinOBN').tabIndex="18";

document.getElementById('DMWinHorseName').tabIndex="17";
document.getElementById('DMWinOwnerFirstName').tabIndex="18";
document.getElementById('DMWinOwnerLastName').tabIndex="19";
document.getElementById('DMWinCOOwnerName').tabIndex="20";
document.getElementById('DMWinAddr1').tabIndex="22";
document.getElementById('DMWinCity').tabIndex="23";
document.getElementById('DMWinState').tabIndex="24";
document.getElementById('DMWinZip').tabIndex="25";
document.getElementById('DMWinSSN').tabIndex="26";
document.getElementById('DMWinFromDate').tabIndex="27";
if (trim(document.getElementById('DMWinToDate').value)>''){
	document.getElementById('DMWinToDate').tabIndex="28";
}
else {
	document.getElementById('DMWinPresent').tabIndex="28";
}

//document.getElementById('DMWinOBN').tabIndex="28";

document.getElementById('SRWinHorseName').tabIndex="29";
document.getElementById('SRWinOwnerFirstName').tabIndex="30";
document.getElementById('SRWinOwnerLastName').tabIndex="31";
document.getElementById('SRWinCOOwnerName').tabIndex="32";
document.getElementById('SRWinAddr1').tabIndex="33";
document.getElementById('SRWinCity').tabIndex="34";
document.getElementById('SRWinState').tabIndex="35";
document.getElementById('SRWinZip').tabIndex="36";
document.getElementById('SRWinSSN').tabIndex="37";
document.getElementById('SRWinFromDate').tabIndex="38";
document.getElementById('SRWinToDate').tabIndex="39";
//document.getElementById('SRWinOBN').tabIndex="39";

document.getElementById('RSPlaceHorseName').tabIndex="40";
//document.getElementById('RSPlaceSex').tabIndex="42";
document.getElementById('RSPlaceOwnerFirstName').tabIndex="41";
document.getElementById('RSPlaceOwnerLastName').tabIndex="42";
document.getElementById('RSPlaceCOOwnerName').tabIndex="43";
document.getElementById('RSPlaceAddr1').tabIndex="44";
document.getElementById('RSPlaceCity').tabIndex="45";
document.getElementById('RSPlaceState').tabIndex="46";
document.getElementById('RSPlaceZip').tabIndex="47";
document.getElementById('RSPlaceSSN').tabIndex="48";
//document.getElementById('RSPlaceFoaled').tabIndex="50";
//document.getElementById('RSPlaceOBN').tabIndex="51";

document.getElementById('DMPlaceHorseName').tabIndex="49";
document.getElementById('DMPlaceOwnerFirstName').tabIndex="50";
document.getElementById('DMPlaceOwnerLastName').tabIndex="51";
document.getElementById('DMPlaceCOOwnerName').tabIndex="52";
document.getElementById('DMPlaceAddr1').tabIndex="53";
document.getElementById('DMPlaceCity').tabIndex="54";
document.getElementById('DMPlaceState').tabIndex="55";
document.getElementById('DMPlaceZip').tabIndex="56";
document.getElementById('DMPlaceSSN').tabIndex="57";
document.getElementById('DMPlaceFromDate').tabIndex="58";
document.getElementById('DMPlaceToDate').tabIndex="59";
//document.getElementById('DMPlaceOBN').tabIndex="61";

document.getElementById('SRPlaceHorseName').tabIndex="60";
document.getElementById('SRPlaceOwnerFirstName').tabIndex="61";
document.getElementById('SRPlaceOwnerLastName').tabIndex="62";
document.getElementById('SRPlaceCOOwnerName').tabIndex="63";
document.getElementById('SRPlaceAddr1').tabIndex="64";
document.getElementById('SRPlaceCity').tabIndex="65";
document.getElementById('SRPlaceState').tabIndex="66";
document.getElementById('SRPlaceZip').tabIndex="67";
document.getElementById('SRPlaceSSN').tabIndex="68";
document.getElementById('SRPlaceFromDate').tabIndex="69";
document.getElementById('SRPlaceToDate').tabIndex="70";
//document.getElementById('SRPlaceOBN').tabIndex="72";

document.getElementById('RSShowHorseName').tabIndex="71";
//document.getElementById('RSShowSex').tabIndex="75";
document.getElementById('RSShowOwnerFirstName').tabIndex="72";
document.getElementById('RSShowOwnerLastName').tabIndex="73";
document.getElementById('RSShowCOOwnerName').tabIndex="74";
document.getElementById('RSShowAddr1').tabIndex="75";
document.getElementById('RSShowCity').tabIndex="76";
document.getElementById('RSShowState').tabIndex="77";
document.getElementById('RSShowZip').tabIndex="78";
document.getElementById('RSShowSSN').tabIndex="79";
//document.getElementById('RSShowFoaled').tabIndex="83";
//document.getElementById('RSShowOBN').tabIndex="84";

document.getElementById('DMShowHorseName').tabIndex="80";
document.getElementById('DMShowOwnerFirstName').tabIndex="81";
document.getElementById('DMShowOwnerFirstName').tabIndex="82";
document.getElementById('DMShowCOOwnerName').tabIndex="83";
document.getElementById('DMShowAddr1').tabIndex="84";
document.getElementById('DMShowCity').tabIndex="85";
document.getElementById('DMShowState').tabIndex="86";
document.getElementById('DMShowZip').tabIndex="87";
document.getElementById('DMShowSSN').tabIndex="88";
document.getElementById('DMShowFromDate').tabIndex="89";
document.getElementById('DMShowToDate').tabIndex="90";
//document.getElementById('DMShowOBN').tabIndex="94";


document.getElementById('SRShowHorseName').tabIndex="91";
document.getElementById('SRShowOwnerFirstName').tabIndex="92";
document.getElementById('SRShowOwnerLastName').tabIndex="93";
document.getElementById('SRShowCOOwnerName').tabIndex="94";
document.getElementById('SRShowAddr1').tabIndex="95";
document.getElementById('SRShowCity').tabIndex="96";
document.getElementById('SRShowState').tabIndex="97";
document.getElementById('SRShowZip').tabIndex="98";
document.getElementById('SRShowSSN').tabIndex="99";
document.getElementById('SRShowFromDate').tabIndex="100";
document.getElementById('SRShowToDate').tabIndex="101";
//document.getElementById('SRShowOBN').tabIndex="106";

document.getElementById('bottomSubmitBtn').tabIndex="102";
document.getElementById('AddedPurseSupp').tabIndex="103";
document.getElementById('TotalOKBAuth').tabIndex="104";
document.getElementById('TotalAwardPaid').tabIndex="105";
document.getElementById('RSWinAward').tabIndex="106";
document.getElementById('RSPlaceAward').tabIndex="107";
document.getElementById('RSShowAward').tabIndex="108";
document.getElementById('DMWinAward').tabIndex="109";
document.getElementById('DMPlaceAward').tabIndex="110";
document.getElementById('DMShowAward').tabIndex="111";
document.getElementById('SRWinAward').tabIndex="112";
document.getElementById('SRPlaceAward').tabIndex="113";
document.getElementById('SRShowAward').tabIndex="114";
document.getElementById('PageNo').tabIndex="115";

function IsNumeric(sText){
	var ValidChars = "0123456789.";
	var IsNumber=true;
	var Char;
	for (i = 0; i < sText.length && IsNumber == true; i++){ 
		Char = sText.charAt(i); 
		if (ValidChars.indexOf(Char) == -1){
			IsNumber = false;
		}
	}
	return IsNumber;
}

function trim(str){
	return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

function splitAward(elem){
	var award=document.getElementById(elem).value;
	if (trim(award)>''){
		if (IsNumeric(award)){
			var newAward=Math.round(parseFloat(award)/2);
			document.getElementById(elem).value=newAward;
			validateDataRealTime(elem);
		}
		else {
			alert('Award amount must be a valid number!');
			document.getElementById(elem).value='';
			document.getElementById(elem).focus();
		}
	}
}

function keyPressed(elem,e){
	if (e.keyCode==32 || e.keyCode==9){
		document.getElementById(elem).select();
		document.getElementById(elem).focus();
		
	}
}

function toggleClassName(elem){
	if (document.getElementById(elem+'Addr1').className=='PrintAddressYes'){
		document.getElementById(elem+'Addr1').className='PrintAddressNo';
		document.getElementById(elem+'City').className='PrintAddressNo';
		document.getElementById(elem+'State').className='PrintAddressNo';
		document.getElementById(elem+'Zip').className='PrintAddressNo';
		document.getElementById(elem+'PrintAddress').value='No';
	}
	else {
		document.getElementById(elem+'Addr1').className='PrintAddressYes';
		document.getElementById(elem+'City').className='PrintAddressYes';
		document.getElementById(elem+'State').className='PrintAddressYes';
		document.getElementById(elem+'Zip').className='PrintAddressYes';
		document.getElementById(elem+'PrintAddress').value='Yes';
	}
}


function LicOwner(WPS) {
	var FirstName=document.getElementById(WPS+'OwnerFirstName').value;
	var LastName=document.getElementById(WPS+'OwnerLastName').value;
	if (trim(document.getElementById(WPS+'OwnerFirstName').value+document.getElementById(WPS+'OwnerLastName').value)>'') {
		var xmlhttp;
		if (window.XMLHttpRequest) {
			// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else if (window.ActiveXObject){
			// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		else{alert("Your browser does not support XMLHTTP!");}
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4){
				//alert(xmlhttp.responseText);
				var users = eval(xmlhttp.responseText);
				var str = '<ul class="suggestList" style="width: 150%;">';
				for ( var recno in users ) {
					str += '<li onmouseover="HighlightSuggestList(this.id)" onmouseout="noHighlightSuggestList(this.id)" class="listItem" id="'+recno+'" onclick="putOwnerData( \'' +users[recno].LastName+ '\',\'' +WPS+ '\',\'' +users[recno].FirstName+ '\',\'' +users[recno].Address+ '\',\'' +users[recno].City+ '\',\'' +users[recno].State+ '\',\'' +users[recno].Zip+ '\',\'' +users[recno].OwnerSSN+ '\',\'' +users[recno].FoalOwnerPrintAddress+ '\')">'+users[recno].DisplayString+'</li>';
				}
				str +='</ul>';
				document.getElementById(WPS+'OwnerList').innerHTML = str;
				document.getElementById(WPS+'OwnerList').style.display='block';
				document.getElementById(WPS+'OwnerList').focus();
				document.getElementById(WPS+'OwnerList').onblur=function() {setOnblur(WPS+'OwnerList')};
			}
			else{
				document.getElementById(WPS+'OwnerList').innerHTML = '';
				document.getElementById(WPS+'OwnerList').style.display='none';
			}
		}
		var randomString = new Date().getTime();
		xmlhttp.open("GET","NoMenu/GetLicOwner.cfm?NoCache="+randomString+"&FirstName="+FirstName+"&LastName="+LastName+"&Horse="+WPS+'OwnerList',true);
		xmlhttp.send(null);
	}
}

function setOnblur(elem) {
	document.getElementById(elem).style.display='none';
}
function setFocus(elem) {
	document.getElementById(elem).focus();
}

function putOwnerData(LastName,WPS,FirstName,Address,City,State,Zip,OwnerSSN,FoalOwnerPrintAddress) {
	document.getElementById(WPS+'OwnerLastName').value=LastName;
	document.getElementById(WPS+'OwnerFirstName').value=FirstName;
	document.getElementById(WPS+'Addr1').value=Address;
	document.getElementById(WPS+'City').value=City;
	document.getElementById(WPS+'State').value=State;
	document.getElementById(WPS+'Zip').value=Zip;
	document.getElementById(WPS+'SSN').value=OwnerSSN;
	document.getElementById(WPS+'COOwnerName').value='';
	document.getElementById(WPS+'NewAdd').checked=true;
	document.getElementById(WPS+'OwnerList').innerHTML = '';
	document.getElementById(WPS+'OwnerList').style.display='none';
	document.getElementById(WPS+'Addr1').className='PrintAddress'+FoalOwnerPrintAddress;
	document.getElementById(WPS+'City').className='PrintAddress'+FoalOwnerPrintAddress;
	document.getElementById(WPS+'State').className='PrintAddress'+FoalOwnerPrintAddress;
	document.getElementById(WPS+'Zip').className='PrintAddress'+FoalOwnerPrintAddress;
	return true;
}

function FoalNameSuggestList(inputElem,TableData) {
	var urlVar=document.getElementById(inputElem).value;
	if (urlVar.length>3){
		var xmlhttp;
		if (window.XMLHttpRequest) {
			// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else if (window.ActiveXObject){
			// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		else{alert("Your browser does not support XMLHTTP!");}
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4){
				var users = eval(trim(xmlhttp.responseText));
				var str = '<ul class="suggestList">';
				for ( var recno in users ) {
					str += '<li onmouseover="HighlightSuggestList(this.id)" onmouseout="noHighlightSuggestList(this.id)" class="listItem" id="'+users[recno].OBN+'" onclick="putFoalData( \'' +users[recno].OBN+ '\',\'' +TableData+ '\')">'+users[recno].HoresName+'</li>';
				}
				str +='</ul>';
				document.getElementById(TableData).innerHTML = str;
				//document.getElementById(TableData).onblur=function() {setOnblur(TableData,inputElem)};
				document.getElementById(TableData).style.display='block';
				document.getElementById(TableData).onblur=function() {setOnblur(TableData)};
				document.getElementById(TableData).onmouseover=function() {setFocus(TableData)};
				//document.getElementById(TableData).focus();
			}
			else{
				clearRow(TableData);
				//document.getElementById('RSWinOBN').value='';
				document.getElementById(TableData).innerHTML = '';
				document.getElementById(TableData).style.display='none';
			}
		}
		var randomString = new Date().getTime();
		xmlhttp.open("GET","NoMenu/GetChart.cfm?NoCache="+randomString+"&searchTerm="+urlVar+"&Horse="+TableData,true);
		xmlhttp.send(null);
	}
}

function clearRow(TableData){
	if (TableData=='RSWinHorseTableData' ){
		document.getElementById('rswin').style.backgroundImage='none'; 
		document.getElementById('dmwin').style.backgroundImage='none'; 
		document.getElementById('srwin').style.backgroundImage='none'; 
		document.getElementById('RSWinOBN').value='';
		//docume

vacunita · Mar 15, 2011

O.k, I misunderstood, I thought you were tabbing between individual radio buttons inside a single group, not tabbing between radio groups.

Of note is the fact that if anything but the first radio button in a radio group is checked, the ability to tab into that radio group is lost.

In the example below, you can see that tabbing works as expected, until you select one of the radios in a group, subsequent tabbing will then skip that group
However, this can be overridden, by using the onblur event.

In the code below I'm forcing the tabbing into the radio group by using the onblur event of the preceding one. The line is commented out (in green below). But uncommenting it will force the tab into the radio group even when a radio has been checked.

(green section is a single line, although the code box breaks it into 2 lines).

Code:

<html>
<head><title>Tabbing</title>
<script type="text/javascript">
function set_TabIndex(){
document.getElementById('radiogroup0').tabIndex="2";
document.getElementById('radiogroup1').tabIndex="3";
document.getElementById('radiogroup2').tabIndex="4";
[green]//document.getElementById('radiogroup2').onblur=function(){document.getElementById('radiogroup3').focus();};[/green]
document.getElementById('radiogroup3').tabIndex="5";

}
</script>
</head>
<body onload="set_TabIndex();">

<form>
<input type="text" name="partNo" tabindex='1'><br>
<input type='radio' name='radiogroup0' value='0' checked='checked'><input type='radio' name='radiogroup0' value='1'><input type='radio' name='radiogroup0' value='2'><input type='radio' name='radiogroup0' value='3'><input type='radio' name='radiogroup0' value='4'><input type='radio' name='radiogroup0' value='5'>

<br><input type='radio' name='radiogroup1' value='0' checked='checked'><input type='radio' name='radiogroup1' value='1'><input type='radio' name='radiogroup1' value='2'><input type='radio' name='radiogroup1' value='3'><input type='radio' name='radiogroup1' value='4'><input type='radio' name='radiogroup1' value='5'>

<br><input type='radio' name='radiogroup2' value='0' checked='checked'><input type='radio' name='radiogroup2' value='1'><input type='radio' name='radiogroup2' value='2'><input type='radio' name='radiogroup2' value='3'><input type='radio' name='radiogroup2' value='4'><input type='radio' name='radiogroup2' value='5'>

<br><input type='radio' name='radiogroup3' value='0' checked='checked'><input type='radio' name='radiogroup3' value='1'><input type='radio' name='radiogroup3' value='2'><input type='radio' name='radiogroup3' value='3'><input type='radio' name='radiogroup3' value='4'><input type='radio' name='radiogroup3' value='5'>

<br><input type="text" name="partDesc" tabindex='7'>
<input type="text" name="partType" tabindex='6'>
<input type="submit" name="submit" value="Send It"tabindex='8'>
</form>
</body>
</html>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Vragabond · Mar 15, 2011

Your javascript cannot work for radio buttons, since it targets elements with a specific id. All your individual radio buttons have the same id (which is wrong, since there can be only one unique id on the page). In the case of RaceType, there are so many, javascript gets confused and probably simply skips that line.

I would advise you to strip all the javascript, as it is not needed. All you're doing with javascript, is setting an input attribute with a value. You can just set it in your html and be done with it (vacunita has done this in one of his code examples). To learn more about tabindex, see here:

http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

LyndonOHRC · Mar 16, 2011

Thanks for everyones help! I solved this by making the id unique.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do you set focus to the first button of a radio group 2

LyndonOHRC

Programmer

vacunita

Programmer

LyndonOHRC

Programmer

vacunita

Programmer

LyndonOHRC

Programmer

vacunita

Programmer

Vragabond

Programmer

LyndonOHRC

Programmer

Similar threads

Part and Inventory Search

Sponsor