Not certain why my JavaScript code is creating a flicker of hidden fields.
Perhaps it's the loading sequence???? I do have a reference to a .js file along with JS code in the page.
Here's the page code:
The .js file:
Perhaps it's the loading sequence???? I do have a reference to a .js file along with JS code in the page.
Here's the page code:
Code:
<!-- Form Border image, date and registrar contact --> <div style="position: absolute; left: 5%;"> <HTML> <HEAD> <title>Database edit page</title> <META NAME="EXPIRES" CONTENT="Mon, 01 Jan 2000 12:00:00 GMT"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <script src="javascript.js"></script> </HEAD> <body topmargin="0" marginheight="0" onload="hidden()"> <!-- Form Border image and --> <div style="position: absolute; left: 5%;"> <!-- Beginning of form input --> <!-- Menu --> <FORM name="form3" enctype="multipart/form-data"> <div style="position: absolute; left: 60px; top: 50px; width:150px; z-index:8" class="navmenu_lightblue"> <p><a onmousedown="show_me('Nothing')"></a> <p><a onmousedown="show_me('Edit')"></a> <p><a onmousedown="show_me('Add')"></a> </div> <!-- Table positioning --> <div style="position: absolute; width: 635px; left: 40px; top: 85px; z-index:1"> <table width='631' cellspacing='0'> <thead bgcolor='lightyellow'> <tr><th>Editable tables</th><th colspan='3'> </thead> <tr bgcolor='#E0E0E0'> <td> Majors.<br></td> <td><select size="1" name='MajorChoice' id='MajorChoice' style='background-color: lightyellow' onchange="getMajorChoice(this.value); show('MajorEdit'); hide('MinorEdit'); hide('ConcenEdit'); hide('TheologyEdit'); hide('MajorAdd'); hide('MinorAdd'); hide('ConcenAdd'); hide('TheologyAdd'); document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0"> <option style='background-color: lightyellow' value="Please Choose One">Please Choose One</option><option style='background-color: lightyellow' value="American Studies">American Studies</option><option style='background-color: lightyellow' value="Anglican Studies">Anglican Studies</option></select></td><td> <input type="button" value="Add" name="MajAdd" id="Add" onclick="hide('MajorEdit'); hide('TheologyEdit'); hide('ConcenEdit'); hide('ConcenAdd'); hide('MinorEdit'); hide('MinorAdd'); hide('TheologyAdd'); show('MajorAdd'); document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0; document.getElementById('MajorChoice').selectedIndex=0"> <input type="button" value="Delete" name="MajorDelete"></td> </tr> <tr> <td> Minors.<br></td> <td><select size="1" name='MinorChoice' id='MinorChoice' size=30 style='background-color: lightyellow' onchange="getMinorChoice(this.value); show('MinorEdit'); hide('MajorEdit'); hide('ConcenEdit'); hide('TheologyEdit'); hide('MinorAdd'); hide('MajorAdd'); hide('ConcenAdd'); hide('TheologyAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0"> <option style='background-color: lightyellow' value="Please Choose One">Please Choose One</option><option style='background-color: lightyellow' value="Anthropology">Anthropology</option><option style='background-color: lightyellow' value="Art History">Art History</option><option style='background-color: lightyellow' value="Asian Studies">Asian Studies</option></select></td><td> <input type="button" value="Add" name="MinAdd" id="Add" onclick="hide('MinorEdit'); hide('TheologyEdit'); hide('ConcenEdit'); hide('ConcenAdd'); hide('MajorEdit'); hide('MajorAdd'); hide('TheologyAdd'); show('MinorAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0"> <input type="button" value="Delete" name="MinorDelete"></td> </tr> <tr bgcolor='#E0E0E0'><td> Concentrations.<br></td> <td><select size="1" name='ConcenChoice' id='ConcenChoice' size=30 style='background-color: lightyellow' onchange="getConcenChoice(this.value); show('ConcenEdit'); hide('MajorEdit'); hide('MinorEdit'); hide('TheologyEdit'); hide('ConcenAdd'); hide('MajorAdd'); hide('MinorAdd'); hide('TheologyAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0"> <option style='background-color: lightyellow' value="Please Choose One">Please Choose One</option><option style='background-color: lightyellow' value="Education">Education</option><option style='background-color: lightyellow' value="Womens Studies">Womens Studies</option></select> WMST</td><td> <input type="button" value="Add" name="ConcAdd" id="Add" onclick="hide('ConcenEdit'); hide('TheologyEdit'); hide('MinorEdit'); hide('MinorAdd'); hide('MajorEdit'); hide('MajorAdd'); hide('TheologyAdd'); show('ConcenAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0"> <input type="button" value="Delete" name="ConcenDelete"></td> </tr> <tr> <td> School of Theology majors.<br></td> <td><select size="1" name='TheolChoice' id='TheolChoice' size=30 style='background-color: lightyellow' onchange="getTheolChoice(this.value); show('TheologyEdit'); hide('ConcenEdit'); hide('MinorEdit'); hide('MajorEdit'); hide('TheologyAdd'); hide('ConcenAdd'); hide('MinorAdd'); hide('MajorAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0"> <option style='background-color: lightyellow' value="Please Choose One">Please Choose One</option><option style='background-color: lightyellow' value="Bible">Bible</option><option style='background-color: lightyellow' value="Christian Ethics Moral Theology">Christian Ethics Moral Theology</option></select></td><td> <input type="button" value="Add" name="TheolAdd" id="Add" onclick="hide('TheologyEdit'); hide('ConcenEdit'); hide('ConcenAdd'); hide('MinorEdit'); hide('MinorAdd'); hide('MajorEdit'); hide('MajorAdd'); show('TheologyAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0"> <input type="button" value="Delete" name="TheologyDelete"></td> </tr> <tfoot bgcolor='lightyellow'><tr><td colspan='4'></td></tfoot> </table> <!--------------------------Major choice capture--------------------------------> <script type="text/javascript"> //Major function getMajorChoice(isMajorChoice){ if (isMajorChoice != 'null') { document.forms[0].nEmp1.value = isMajorChoice; } } //Minor function getMinorChoice(isMinorChoice){ if (isMinorChoice != 'null') { document.forms[0].nEmp2.value = isMinorChoice; } } //Concentration function getConcenChoice1(isConcenChoice1){ if (isConcenChoice1 != 'null') { document.forms[0].ConcentrationCode.value = isConcenChoice1; } } function getConcenChoice(isConcenChoice){ if (isConcenChoice != 'null') { document.forms[0].nEmp3.value = isConcenChoice; } } //Theology function getTheolChoice(isTheolChoice){ if (isTheolChoice != 'null') { document.forms[0].nEmp4.value = isTheolChoice; } } alert("Edit data information by selecting it from the respective drop-down box."); </script> <!-- Major --> <div id="MajorAdd"> <table cellspacing="0"> <tr><td width="200"></td><td>Code:</td><td>Title:</td></tr> <tr><td> <b>Add</b> a new Major.</td> <!-- Add major input box --> <td><input type="text" style="background-color: lightyellow" id="MajorsCode" name="MajorsCode" size="4" maxlength="4"></td> <td><input type="text" style="background-color: lightyellow" id="Majors" name="Majors" size="55" maxlength="50"></td> </tr> <tr><td></td><td colspan="2"> <a title="Add Major" href="DBAddMajor.php" style="text-decoration: none; color: #000000;"> <input type="submit" value="Add new Major" name="Add new Major" title="Add new Major"></a></td> </tr> </table> </div> <div id="MajorEdit" name="MajorEdit"> <table cellspacing="0"> <tr><td width="200"></td><td>Code:</td><td>Title:</td></tr> <tr><td> <b>Edit</b> a Major name.</td> <!-- Edit major input box --> <td><input type="text" size="4"></td><td> <input type="text" size="55" id="Chosen" name='nEmp1' maxlength="50"></td> </tr> <tr><td></td><td colspan="2"> <!-- Submit editted major button --> <a title="Add new Theology Major" href="DBEditMajor.php" style="text-decoration: none; color: #000000;"> <input type="submit" value="Save revisions" name="MajorEdit" title="Store revised Major"></a></td> </tr> </table> </div> <!-- Minor --> <div id="MinorAdd"><table cellspacing="0"> <tr><td width="200"></td><td>Code:</td><td>Title:</td></tr> <tr><td> <b>Add</b> a new Minor.</td> <!-- Add minor input box --> <td><input type="text" style="background-color: lightyellow" id="MinorCode" name="MinorCode" size="4" maxlength="4"></td> <td><input type="text" style="background-color: lightyellow" id="Minors" name="Minors" size="55" maxlength="50"></td> </tr> <tr><td></td><td colspan="2"> <a title="Add new Minor" href="DBAddMinor.php" style="text-decoration: none; color: #000000;"> <input type="submit" value="Add new Minor" name="Add new Minor" title="Add new Minor"></a></td> </tr> </table> </div> <div id="MinorEdit" name="MinorEdit"> <table cellspacing="0"> <tr><td width="200"></td><td>Code:</td><td>Title:</td></tr> <tr><td> <b>Edit</b> a Minor name.</td> <!-- Edit minor input box --> <td><input type="text" size="4" maxlength="4"></td> <td><input type="text" size="55" id="Chosen" value="" name='nEmp2' maxlength="50"></td> </tr> <tr><td></td><td colspan="2"> <!-- Submit editted minor button --> <a title="Add new Theology Major" href="DBEditMinor.php" style="text-decoration: none; color: #000000;"> <input type="submit" value="Save revisions" name="MinorEdit" title="Store revised Minor"></a></td> </tr> </table> </div> <!-- Concentration --> <div id="ConcenAdd"> <table cellspacing="0"> <tr><td width="200"></td><td>Code:</td><td>Title:</td></tr> <tr><td> <b>Add</b> a new Concentration.</td> <!-- Add concentration input box --> <td><input type="text" style="background-color: lightyellow" id="ConcentrationCode" name="ConcentrationCode" size="4" maxlength="4"></td> <td><input type="text" style="background-color: lightyellow" id="Concentrations" name="Concentrations" size="55" maxlength="50"></td> </tr> <tr><td></td><td colspan="2"> <a title="Add Concentration" href="DBAddConcen.php" style="text-decoration: none; color: #000000;"> <input type="submit" value="Add Concentration" name="Add Concentration" title="Add Concentration"></a></td> </tr> </table> </div> <div id="ConcenEdit" name="ConcenEdit"><table cellspacing="0"> <tr><td width="200"></td><td>Code:</td><td>Title:</td></tr> <tr><td> <b>Edit</b> a Concentration name.</td> <!-- Edit concentration input box --> <td><input type="text" size="4" maxlength="4"></td> <td><input type="text" id="Chosen" value="" name='nEmp3' size="55" maxlength="50"> </td> </tr> <tr><td></td><td colspan="2"> <!-- Submit editted concentration button --> <a title="Add Theology Major" href="DBEditConcen.php" style="text-decoration: none; color: #000000;"> <input type="submit" value="Save revisions" name="ConcentrationEdit" title="Store revised Concentration"></a></td> </tr> </table> </div> <!-- Theology options --> <div id="TheologyAdd" name="TheologyAdd"> <table cellspacing="0"> <tr><td width="200"></td><td>Code:</td><td>Title:</td></tr> <tr><td> <b>Add</b> a new Theology major.</td> <!-- Add theology input box --> <td><input type='text' style='background-color: lightyellow' id='theologycode' name='theologycode' size='4' maxlength='4'></td> <td><input type='text' style='background-color: lightyellow' id='theology' name='theology' size='55' maxlength='50'></td> </tr> <tr><td></td><td colspan="2"> <a title="Add Theology Major" href="DBAddTheology.php" style="text-decoration: none; color: #000000;"> <input type='submit' value='Add Theology Major' name='Add Theology Major' title='Add Theology Major'></a></td> </tr> </table> </div> <div id="TheologyEdit" name="TheologyEdit"> <table cellspacing="0"> <tr><td width="200"></td><td>Code:</td><td>Title:</td></tr> <tr><td> <b>Edit</b> a Theology major name.</td> <!-- Edit theology input box --> <td><input type="text" size="4"></td> <td><input type="text" size="55" id="TheologyEdit" value="" name='nEmp4' maxlength="50"></td> </tr> <tr><td></td><td colspan="2"> <!-- Submit editted theology button --> <a title="Add new Theology Major" href="DBEditTheology.php" style="text-decoration: none; color: #000000;"> <input type="submit" value="Save revisions" name="TheologyEdit" title="Store revised Theology major"></a></td> </tr> </table> </div> </form> </div> </div> </body> </html>
Code:
//Hidden fields function hidden(){ MajorAdd.style.display="none"; MajorEdit.style.display="none"; MinorAdd.style.display="none"; MinorEdit.style.display="none"; ConcenAdd.style.display="none"; ConcenEdit.style.display="none"; TheologyAdd.style.display="none"; TheologyEdit.style.display="none"; } //Major function hide(){ var MajorEdit = document.getElementById(arguments[0]); MajorEdit.style.display="none"; } function show(){ var MajorEdit = document.getElementById(arguments[0]); MajorEdit.style.display=""; } //Minor function hide(){ var MinorEdit = document.getElementById(arguments[0]); MinorEdit.style.display="none"; } function show(){ var MinorEdit = document.getElementById(arguments[0]); MinorEdit.style.display=""; } //Concentration function hide(){ var ConcenEdit = document.getElementById(arguments[0]); ConcenEdit.style.display="none"; } function show(){ var ConcenEdit = document.getElementById(arguments[0]); ConcenEdit.style.display=""; } //Theology function hide(){ var TheologyEdit = document.getElementById(arguments[0]); TheologyEdit.style.display="none"; } function show(){ var TheologyEdit = document.getElementById(arguments[0]); TheologyEdit.style.display=""; }
Comment