We Keep Coding

Change background Color for group radio inputs

Problem I have a form that the user fills out (basic things like your name, phone number, email, etc). It has a question that asks the user if you want your suggestion to remain anonymous and the user either selects yes or no.
The following image is what I am talking about:
If the user does not select either of the selections and submits the form, a alert box appears notifying the user to select one.
I am able to color a single radio selection red if the user has not selected either of them. I am able to color both radio selections red like the following:
And here is the function that checks whether or not either of those radio buttons have been selected:
myOption = -1;
for ( i=0; i < SubmitIdea.Anonymous.length; i++ ) {
if ( SubmitIdea.Anonymous[i].checked ) {
myOption = i;
}
}
if ( myOption == -1 ) {
alert( "Do you wish to remain anonymous?" );
SubmitIdea.Anonymous[0].focus();
SubmitIdea.Anonymous[0].style.backgroundColor = "red";
SubmitIdea.Anonymous[1].focus();
SubmitIdea.Anonymous[1].style.backgroundColor = "red";
return false;
}
However, I would like the rectangular background border surrounding both the Yes and No radio selection, not individually. This rectangular border will only occur if neither radio selection has been choosen when the user has submitted their results.
The following is the html:
<form name="SubmitIdea" method="POST" class="h">
<table Border="0" align="center">
<tr>
<td colspan="5"> </td>
</tr>
<cfoutput>
<tr>
<td class="m">Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Name" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Today's Date: </font></td>
<td class="mm">#TodaysDt#</td></tr>
</tr>
<tr>
<td class="mm">Department: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Department" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Supervisor Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Supervisor" value="" class="a" maxlength="32">
</tr>
<tr>
<td class="mm">Email: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="NomEmail" value="" class="a" maxlength="32" size="25"> <br />
</td>
<td width="50"> </td>
<td class="mm">Phone: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Phone" value="" class="a" maxlength="32">
</tr>
</table>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong> <input type="radio" value="No" name="Anonymous"> <strong>No</strong>
</td>
</tr>
</table>
</cfoutput>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Please provide a brief summary of your idea:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="5">
<textarea name="reason" id="textarea1" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxt(this)" onkeydown="limitTxtArea(this); cntTxt(this, 500, 'cnt');" onkeyup="limitTxtArea(this); cntTxt(this, 500, 'cnt');"></textarea>
<span id="cnt" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>I believe this suggestion will: (check all that apply)</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td class="e"><input type="checkbox" name="Sugg1" value="Improve Productivity/Quality">Improve Productivity/Quality </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg2" value="Improve Process">Improve Process </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg3" value="Increase Revenue">Increase Revenue </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg4" value="Decrease Expenses/Costs">Decrease Expenses/Costs </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg5" value="Improve safety in the workplace">Improve safety in the workplace </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg6" value="Improve Customer Service">Improve Customer Service </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg7" value="Enhance employee satisfaction / corporate culture">Enhance employee satisfaction/<br>corporate culture </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg0" value="Other">Other <input type="text" name="OtherSuggest" value="" class="a" maxlength="32"></font></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Possible challenges to implementation:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasontwo" id="textarea2" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtTwo(this)" onkeydown="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');" onkeyup="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');"></textarea>
<span id="cnttwo" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>What metrics could be used to track results?</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasonthree" id="textarea3" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtThree(this)" onkeydown="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');" onkeyup="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');"></textarea>
<span id="cntthree" style="color:##FF0000">500</span> character(s) remaining.<br /><br /></td>
</tr>
</table>
<br />
<table align="center">
<TR>
<TD align="center"><input type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
</form>
Thank You
UPDATE
The following is what I did:
document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("click", function(clickEvent) {
if (clickEvent.target.id == 'check') {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs,function(radioInput) {return radioInput.checked;});
if (anonymousSelected) {
anonymousContainer.className = '';
}
else {
if (anonymousContainer) {
alert( "Do you wish to remain anonymous?" );
anonymousContainer.className += 'borderedContainer';
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous">
<strong>No</strong>
</span>
</div>
</td>
</tr>
</table>
<table align="center">
<TR>
<TD align="center"><input id="check" type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
So I am not sure what I am doing wrong.

You can put the radio buttons in a container (e.g. a span) and then set the border on the container. See the example below, after clicking the button labeled check.
The snippet uses the hex value for red but feel free to adjust to a different value. Using 'red' as the value may produce varying results across browsers/Operating systems. For more information, refer to the MDN color page.
The snippet also uses Array.find() to determine if any of the radio inputs are checked.
Note:
I originally utilized document.addEventListener() for event delegation and to wait until the DOM was loaded but the OP is using IE 8 or earlier and had issues with that, so I removed that code.
function checkAnonymousSelected(clickEvent) {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs, function(radioInput) {
return radioInput.checked;
});
if (anonymousSelected) {
anonymousContainer.className = '';
} else {
if (anonymousContainer) {
anonymousContainer.className += 'borderedContainer';
}
}
}
//support IE 8- for OP so do this instead of using document.attachEventListener
//to wait until the DOM is ready and attach event listeners to the buttons...
document.getElementById('check').onclick = checkAnonymousSelected;
document.getElementById('anonymousYes').onclick = checkAnonymousSelected;
document.getElementById('anonymousNo').onclick = checkAnonymousSelected;
.borderedContainer {
border: 3px solid #ff0000;
}
<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes" id="anonymousYes" > <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous" id="anonymousNo" >
<strong>No</strong>
</span>
</div>
<button id="check">check</button>

Fill the login form before or after redirection to url automatically

I have ASP.NET Web Application that contains links to our other sites which runs locally.
So user is entering one address and got shortcuts to other addresses.
One of this pages has login form, and everytime user enter this page he has to fill it again and again. Saving login and password in browser is not an option.
I would like to make something that will automatically fill this form, but I am almost sure that I can't change this page.
The solution that I was thinking is that maybe I can open page with login form inside my own page and then use some JS to insert login & password? Is it possible?
This is source code of form that I would like to fill.
<div id="loadedLoginPage"><input type="hidden" name="hidChallenge" value="">
<table width="520" border="0" cellspacing="1" cellpadding="1">
<tbody><tr>
<td><label for="txtUserID" id="TEXT_LOGIN_USER_NAME">User name:</label></td>
<td class="inputLength"><input type="text" name="txtUserID" id="txtUserID" value="" onchange="hideErrorMessage();"></td>
</tr>
<tr>
<td><label for="txtPassWord" id="TEXT_LOGIN_PASSWORD">Password:</label> </td>
<td><input type="password" name="txtPassWord" id="txtPassWord" value="" onchange="hideErrorMessage();"></td>
</tr>
<tr>
<td><label for="txtDomainName" id="TEXT_LOGIN_DOMAIN">Domain:</label></td>
<td><input type="text" name="txtDomainName" id="txtDomainName" value="" onchange="hideErrorMessage();"></td>
</tr>
<tr>
<td> </td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tbody><tr>
<td>
<label for="chkRememberMe" class="chkRememberMe">
<input type="checkbox" id="chkRememberMe">
<span id="TEXT_LOGIN_REMEMBER_ME">Remember me on this computer:</span>
</label>
</td>
<td>
</td>
<!--<td> <input id="chkRememberMe" name="chkRememberMe" type="checkbox" /></td>
<td><label for="chkRememberMe" id="TEXT_LOGIN_REMEMBER_ME" ></label></td>-->
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="btnLogin" class="buttonLogon" id="TEXT_LOGIN_LOG_ON" value="Log on" onclick="handleLogOnClick()"></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</tbody></table>
<div id="errorDivWrap" name="errorDivWrap" align="right" style="display: none;">
<div id="errorImageDiv" name="errorImageDiv" style="display: none;">
<img src="/login/images/Error_Stop.png?v=1.7.1.89" width="16" height="16" alt="" id="errorImage" name="errorImage" style="visibility: hidden;">
</div>
<div id="errorTextDiv" name="errorTextDiv" style="display: none;">
<label id="errorTextField" name="errorTextField" style="visibility: hidden;">
</label></div>
</div></div>

Tabbed Forms Using HTML, CSS, JS

I've been playing around with some ideas I've been searching for, and I came across this:
http://jsfiddle.net/RcrCJ/
original html
<div id="container">
<div id="content">
<ul id="info-nav">
<li><span>Tab1</span></li>
<li><span>Tab2</span></li>
</ul>
<div id="info">
<form action="inex.html" method="post" id="form1" name="form1" class="formfields">
<div id="equipment_details" class="hide">
<table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
<tr>
<td width="23%" class="txt-right">XXXX</td>
<td width="31%"><input type="text" name="" id="qw" /></td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td><input type="checkbox" id="" value="1" name="" checked=""></td>
</tr>
<tr>
<td class="txt-right">XXX XXX</td>
<td><input type="text" value="" name="" id="we" /></td>
</tr>
</table>
<!--tbl_equipment_details closed-->
</div><!--div equipment_details closed-->
<!--<div id="specifications" class="hide">-->
<div id="job_costs" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="description" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="purchased_from">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<input value="Save Changes" name="ww" type="submit">
</div> </td>
</tr>
</table>
</div><!--div feedback closed-->
</form>
</div><!--div info closed-->
</div><!--div content closed-->
</div><!--div container closed-->
original javascript
$(document).ready(function(){
$( '#info #job_costs' ).hide();
$('#info-nav li').click(function(e) {
$('#info .hide').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');
var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
e.preventDefault();
}).eq(0).addClass('current');
});
It was almost exactly what I was looking to do, but I wanted more tabs. I started playing around with it, but for some reason that I can't seem to understand, when I add a third or fourth etc. tab and I run it, it will display all of the tabs until you click on one of them, then it appears normal. I figured it was something silly, but I must have played around with this for hours now and I'm still no further ahead than when I started.
I'm no pro, but I'm usually pretty good at trial / error. This is what I hacked together in an attempt to make 3 tabs:
http://jsfiddle.net/cwaddilove/0Lo7jnoj/
modified html
<div id="container">
<div id="content">
<ul id="info-nav">
<li><span>Tab1</span></li>
<li><span>Tab2</span></li>
<li><span>Tab3</span></li>
</ul>
<div id="info">
<form action="inex.html" method="post" id="form1" name="form1" class="formfields">
<div id="equipment_details" class="hide">
<table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
<tr>
<td width="23%" class="txt-right">XXXX</td>
<td width="31%"><input type="text" name="" id="qw" /></td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td><input type="checkbox" id="" value="1" name="" checked=""></td>
</tr>
<tr>
<td class="txt-right">XXX XXX</td>
<td><input type="text" value="" name="" id="we" /></td>
</tr>
</table>
<!--tbl_equipment_details closed-->
</div><!--div equipment_details closed-->
<!--<div id="specifications" class="hide">-->
<div id="job_costs" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="description" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="purchased_from">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
</table>
</div><!--div feedback closed-->
<div id="job_assignment" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_assignment">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="assignment" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="sold_to">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<input value="Save Changes" name="ww" type="submit">
</div> </td>
</tr>
</table>
</div><!--div feedback closed-->
</form>
</div><!--div info closed-->
</div><!--div content closed-->
</div><!--div container closed-->
modified javascript
$(document).ready(function(){
$( '#info #job_costs #job_assignment' ).hide();
$('#info-nav li').click(function(e) {
$('#info .hide').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');
var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
e.preventDefault();
}).eq(0).addClass('current');
});
I'm hoping someone will be able to see what I've done wrong and can help point me in the right direction.
Thanks in advanced!

You have an error in jQuery selector:
$( '#info #job_costs #job_assignment' ).hide();
To hide several elements you need to put comma in between selectors like this:
$( '#info, #job_costs, #job_assignment' ).hide();
Solution in your case: you just need to hide two of the tabs so that one would be visible at the beginning. This is what you need to use in your code:
$( '#job_costs, #job_assignment' ).hide();
There is some room for improvement here but this will work. Here is updated fiddle

How to fill a table included iFrame

I included a remote page in my website with iframe.
This page has tables.
I want to fill tables with Javascript in iframe view.
<form action="" method="post" onsubmit="return IsValidForm();" >
<input type="hidden" name ="viewstate" value="HgIPYl1YWl1eXV9hHgViAAQHCQ4DAAMKHw4ZCh8OBgoFYRsCD2JfU1NhGwgfYlJhCB9iXVheW1JfWl5fWVxdW1JYXF5bYREEBQ5iWlldW1thCAYfCGJbYQ==" />
<input type="hidden" name ="un" value="kolbehkhaterateman" />
<input type="hidden" name ="chsm" value="160772526" />
<table cellpadding="2" width="450" border="0" style="text-align:right" id="tblc">
<tr>
<td width="64">name:</td>
<td width="372">
<input id="txtwriter" name="txtwriter" class="textbox" onkeypress="return farsikey(this,event)" onkeydown="changelang(this);" type="text" maxlength="50" value="" ></td>
</tr>
<tr>
<td width="64">email:</td>
<td width="372">
<input id="txtemail" name="txtemail" class="textbox" dir="ltr" type="text" maxlength="50" value="" ></td>
</tr>
<tr>
<td width="64">website:</td>
<td width="372">
<div style="FLOAT: left; WIDTH: 40px; HEIGHT: 20px; TEXT-ALIGN: left">
<img class="Off" onmouseover="On(this)" onclick="ShowSM()" onmouseout="Of(this)" id="imgsm" height="18" src="http://www.blogfa.com/cmt/images/1.gif" width="18" border="0">
</div>
<input id="txturl" name="txturl" class="textbox" dir="ltr" type="text" maxlength="50" value="" ></td>
</tr>
<tr>
<td width="100%" colspan="2">
<textarea class="textarea" name="txtcomment" id="txtcomment" onkeypress="return farsikey(this,event)" onkeydown="changelang(this);"></textarea></td>
</tr>
<tr>
<td width="100%" colspan="2"><input id="chkPrivate" type="checkbox" value="ON" name="chkPrivate" align="absmiddle"><label for="chkPrivate">urcomment
abs</label></td>
</tr>
<tr>
<td width="100%" colspan="2"><input id="chkSave" type="checkbox" name="chkSave" align="absmiddle"><label for="chkSave">ur sciority </label>
[remove info]</td>
</tr>
<tr id="captchaspace" style="visibility:hidden" >
<td width="100%" colspan="2" height="24" > type this numbre: <input class="textbox" dir="ltr" type="text" value="" id= "txtCaptcha" name= "txtCaptcha" maxlength="6" style="width:70px;" align="absmiddle" onfocus="document.getElementById ('btnSend').disabled=false;" autocomplete="off" > <span id="imgspace" ></span>
</td>
</tr>
<tr><td width="100%" colspan="2" align=center height="18"><span style="font-size:7.5pt;color:gray"> nazar </span></td> </tr>
<tr>
<td align="left" width="100%" colspan="2" height="33">
<input class="btn" id="btnSend" type="submit" value="submit" name="btnSend" >
</td>
</tr>
</table>
</form>
How can I fill table fields with values?
Using Javascript or something.
I'm not too familiar with Javascript. Please shown me an example.

i included a remote page in my website with iframe.
Short answer is you can't modify a page from another domain. For security reasons browsers implement a "same origin policy". You can only edit the content of an iframe if it came from the same domain as the outer page. Otherwise people could do all sorts of nasty things like show a remote site's login page but change the post location to your own site, steal cookie values, etc.

Filling multiple textboxes using javascript

Javascript rookie here. I have a small page with a first name/last name and a lookup/clear button. The page then has 15 textboxes below.
I would like for the user to be able to search for the first and last name, and fill up the next empty textbox.
Currently the user can search for a person, and fill the first textbox, but if they search again....it will just replace what is in the first textbox. Here is my relevant code:
<form name="isForm" action="">
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="4" class="columnHeaderClass">Search for ID by Name</td>
</tr>
<tr>
<td>Last Name:
<input type="hidden" id=queryType name=queryType value="P" />
<input type="text" size="20" autocomplete="off" id="searchField" name="searchField" />
</td>
<td>First Name:
<input type="text" size="20" autocomplete="off" id="firstField" name="firstField" />
</td>
<td align="center" valign="bottom">
<input id="submit_btn" type="button" value="Lookup/Clear" class="buttonStyle"
onclick="initFieldsDivs(document.isForm.searchField, document.isForm.nameField, document.isForm.idField, document.isForm.firstField);
document.getElementById('nameField').innerHTML='';
this.disabled = true;
doCompletion();" >
</td>
<td><div id="nameField"></div></td>
</tr>
<tr>
<td colspan="4">
<table id="completeTable" border="1" bordercolor="black" cellpadding="0" cellspacing="0">
</table>
</td>
</tr>
<td colspan="3"> </td>
</tr>
</table>
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="3" class="columnHeaderClass">ID(s)</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="right"><input name="Student_ID" type="text" id="idField" /></td>
<td align="center"><input name="Student_ID1" type="text" id="idField1" /></td>
<td align="left"><input name="Student_ID2" type="text" id="idField2" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID3" type="text" id="idField3" /></td>
<td align="center"><input name="Student_ID4" type="text" id="idField4" /></td>
<td align="left"><input name="Student_ID5" type="text" id="idField5" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID6" type="text" id="idField6" /></td>
<td align="center"><input name="Student_ID7" type="text" id="idField7" /></td>
<td align="left"><input name="Student_ID8" type="text" id="idField8" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID9" type="text" id="idField9" /></td>
<td align="center"><input name="Student_ID10" type="text" id="idField10" /></td>
<td align="left"><input name="Student_ID11" type="text" id="idField11" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID12" type="text" id="idField12" /></td>
<td align="center"><input name="Student_ID13" type="text" id="idField13" /></td>
<td align="left"><input name="Student_ID14" type="text" id="idField14" /></td>
</tr>
<tr>
<td colspan="3">
<div class="submit">
<input type="submit" name="SUBMIT" value="SUBMIT" accesskey="S">
</div>
</td>
</tr>
</table>
So the small amount of javascript that is written.... initFieldDivs() grabs the id of whoever was chosen and puts it into the first textbox (I would like to solve this without changing this function). So, is there anyway to move on to the next textbox when the first is full? thanks in advance, and please ask if you have questions, I know this is confusing.

I think you want something like
function fillNextEmptyTb() {
var allInputs = document.getElementsByTagName("input");
for (var i = 0; i < allInputs.length; i++)
if (allInputs[i].type === "text" && allInputs[i].value == "") {
allInputs[i].value = "whatever you want";
return;
}
}
Or the jQuery way, if you're using it, or plan to try it:
var nextEmpty = $('input:text[value=""]')[0];
$(nextEmpty).val("whatever you want");