Javascript is not working - help - javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Validation and Dynamic Forms</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('shipping1').onclick = calcShipping;
document.getElementById('shipping2').onclick = calcShipping;
document.getElementById('shipping3').onclick = calcShipping;
document.getElementById('Text1').onblur = recalculate;
document.getElementById('Text2').onblur = recalculate;
document.getElementById('Text3').onblur = recalculate;
}
function calcShipping() {
document.getElementById('shippingTbx').value = parseFloat(this.value).toFixed(2);
recalculate();
}
function recalculate() {
var prod1, prod2, prod3;
var prod1$ = 1.5;
var prod2$ = 2.25;
var prod3$ = 3.45;
var merchandise$ = 0;
prod1 = parseInt(document.getElementById('Text1').value);
prod2 = parseInt(document.getElementById('Text2').value);
prod3 = parseInt(document.getElementById('Text3').value);
if (!isNaN(prod1)) {
merchandise$ += (prod1 * prod1$)
}
if (!isNaN(prod2)) {
merchandise$ += (prod2 * prod2$)
}
if (!isNaN(prod3)) {
merchandise$ += (prod3 * prod3$)
}
document.getElementById('merchTbx').value = parseFloat(merchandise$).toFixed(2);
var shipping$ = parseFloat(document.getElementById('shippingTbx').value);
var total$ = merchandise$;
if (!isNaN(shipping$))
total$ += shipping$;
document.getElementById('totalTbx').value = parseFloat(total$).toFixed(2);
}
</script>
<style type="text/css">
body{
background:
#F4F0F4
url(topleft.jpg)
no-repeat
top left;
padding-right: 20px;
padding-bottom: 50px;
font: 0:8em Verdana, sans-serif;}
.row{width:98%; overflow:auto;}
div.header {width:20%; text-align:left;}
div.field { width:75%; text-align:left;}
.style1 {width: 367px}
#Text1
{
width: 58px;
}
#Text2
{
width: 58px;
}
#Text3
{
width: 58px;
}
</style>
</head>
<body >
<h2 style = "text-align:center;">Form Validation and Dynamic Forms</h2>
<table border="10" width="600" align="center" bgcolor="#DEB887">
<tr>
<td class="style1">
<form action= "thankupage.html">
<fieldset>
<legend>Product Information:</legend>
<input type="checkbox" name="Product1" id="Checkbox1" value="yes" tabindex="1" /> Product 1 # 1.50/unit
<input id="Text1" type="text" /><br />
<input type="checkbox" name="Product2" id="Checkbox2" value="yes" tabindex="2" /> Product 2 # 2.25/unit
<input id="Text2" type="text" /><br />
<input type="checkbox" name="Product3" id="Checkbox3" value="yes" tabindex="3" /> Product 3 # 3.45.unit
<input id="Text3" type="text" /><br />
</fieldset>
<br />
<div align="left" style="width: 569px">
<fieldset id="Fieldset2" style="position: relative">
<legend> Billing Address </legend>
<div class="row">
<div class="header">Last Name:</div>
<div class="field"><input type="text" name="lname" tabindex="1" /></div>
</div>
<div class="row">
<div class="header">First Name:</div>
<div class="field"><input type="text" name="lname" tabindex="1" /></div>
</div>
<div class="row">
<div class="header">Address:</div>
<div class="field"><input type="text" name="address" tabindex="3" /></div>
</div>
<div class="row">
<div class="header">City:</div>
<div class="field"><input type="text" name="address" tabindex="3" /></div>
</div>
<div class="row">
<div class="header">State:</div>
<select name="State" id="Select1">
<option value="-1"></option>
<option value="73|0">Alabama</option>
<option value="16|1">Alaska</option>
<option value="70|0">Arizona</option>
<option value="75|0">Arkansas</option>
<option value="71|0">California</option>
<option value="72|0">Colorado</option>
<option value="67|0">Connecticut</option>
<option value="69|0">Delaware</option>
<option value="68|0">District of Columbia</option>
<option value="65|0">Florida</option>
<option value="66|0">Georgia</option>
<option value="62|1">Hawaii</option>
<option value="63|0">Idaho</option>
<option value="58|0">Illinois</option>
<option value="59|0">Indiana</option>
<option value="60|0">Iowa</option>
<option value="55|0">Kansas</option>
<option value="56|0">Kentucky</option>
<option value="57|0">Louisiana</option>
<option value="52|0">Maine</option>
<option value="50|0">Maryland</option>
<option value="51|0">Massachusetts</option>
<option value="47|0">Michigan</option>
<option value="48|0">Minnesota</option>
<option value="49|0">Mississippi</option>
<option value="44|0">Missouri</option>
<option value="45|0">Montana</option>
<option value="46|0">Nebraska</option>
<option value="41|0">Nevada</option>
<option value="42|0">New Hampshire</option>
<option value="43|0">New Jersey</option>
<option value="38|0">New Mexico</option>
<option value="39|0">New York</option>
<option value="40|0">North Carolina</option>
<option value="35|0">North Dakota</option>
<option value="36|0">Ohio</option>
<option value="37|0">Oklahoma</option>
<option value="32|0">Oregon</option>
<option value="34|0">Pennsylvania</option>
<option value="30|0">Rhode Island</option>
<option value="31|0">South Carolina</option>
<option value="26|0">South Dakota</option>
<option value="27|0">Tennessee</option>
<option value="28|0">Texas</option>
<option value="23|0">Utah</option>
<option value="24|0">Vermont</option>
<option value="25|0">Virginia</option>
<option value="21|0">Washington</option>
<option value="22|0">West Virginia</option>
<option value="17|0">Wisconsin</option>
<option value="18|0">Wyoming</option>
<option value="-1">------------------------------------</option>
<option value="19|2">Armed Forces Americas</option>
<option value="14|2">Armed Forces Europe</option>
<option value="15|2">Armed Forces Pacific</option>
<option value="-1">------------------------------------</option>
<option value="74|4">American Samoa</option>
<option value="61|4">Guam</option>
<option value="53|4">Marianas Islands</option>
<option value="54|4">Marshall Islands</option>
<option value="64|4">Micronesia</option>
<option value="33|4">Palau</option>
<option value="29|4">Puerto Rico</option>
<option value="20|4">US Virgin Islands</option>
<option value="-1">------------------------------------</option>
<option value="11|3">Alberta</option>
<option value="12|3">British Columbia</option>
<option value="13|3">Manitoba</option>
<option value="8|3">New Brunswick</option>
<option value="9|3">Newfoundland</option>
<option value="5|3">Northwest Territories</option>
<option value="10|3">Nova Scotia</option>
<option value="6|3">Nunavut</option>
<option value="7|3">Ontario</option>
<option value="2|3">Prince Edward Island</option>
<option value="3|3">Quebec</option>
<option value="4|3">Saskatchewan</option>
<option value="1|3">Yukon</option>
</select>
</div>
<div class="row">
<div class="header">Zip:</div>
<div class="field"><input type="text" name="address" tabindex="3" /></div>
</div>
<div class="row">
<div class="header">Phone Number:</div>
<div class="field"><input type="text" name="pnumber" /></div>
</div>
<div class="row">
<div class="header">email:</div>
<div class="field"><input type="text" name="address" tabindex="3"
style="width: 297px" /></div>
</div>
</fieldset>
</div>
<br />
<fieldset>
<legend> Billing Method </legend>
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$shipMethodSelector$shipMethods$3\',\'\')', 0)" value="3.50" name="Saturday"
id="Radio1"/>
<label for="ctl00_mainContentPlaceHolder_shipMethodSelector_shipMethods_3">Saturday Delivery ($3.50)</label> <br />
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$shipMethodSelector$shipMethods$3\',\'\')', 0)" value="5.00" name="Days"
id="Radio2"/>
<label for="ctl00_mainContentPlaceHolder_shipMethodSelector_shipMethods_3">2-3 days Delivery ($5.00)</label> <br />
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$shipMethodSelector$shipMethods$3\',\'\')', 0)" value="7.50" name="Overnight"
id="Radio3"/>
Overnight<label for="ctl00_mainContentPlaceHolder_shipMethodSelector_shipMethods_3"> Delivery ($7.50)</label>
</fieldset>
<br />
<fieldset>
<legend>Order Summary</legend>
<b> Merchandise: </b>:
<input id="Text4" type="text" /><br />
Shipping charges:
<input id="Text5" type="text" /><br />
Sales Tax:
<input id="Text6" type="text" /><br />
<b> Order Total: </b>:
<input id="Text7" type="text" /></fieldset>
<br />
<fieldset>
<legend>Pay with Credit Card</legend>
<b> Card Type: </b>
<select class="coField7 coFieldError" id="ctl00_mainContentPlaceHolder_creditCardPaymentSelector_currentCreditCard_creditCardList1" name="ctl00$mainContentPlaceHolder$creditCardPaymentSelector$currentCreditCard$creditCardList1">
<option value="0">Select Card</option>
<option value="3">Visa</option>
<option value="4">Master Card</option>
<option value="5">Discover</option>
<option value="7">American Express</option>
</select>
<br />
<b> Card Number: </b>: <input type="text" size="10" />
</fieldset>
<input type="submit" value="Submit" />
<br />
</form>
</td>
</tr>
</table>
</body>
</html>


Try moving your method call away from your window.onload.
window.onload = MyFunction;
function MyFunction()
{
document.getElementById('shipping1').onclick = calcShipping;
document.getElementById('shipping2').onclick = calcShipping;
document.getElementById('shipping3').onclick = calcShipping;
document.getElementById('Text1').onblur = recalculate;
document.getElementById('Text2').onblur = recalculate;
document.getElementById('Text3').onblur = recalculate;
}


Short answer: you don't appear to have any element in the document named "shipping1".
Longer answer: The error you're getting is indicating that something on the line
document.getElementById('shipping1').onclick = calcShipping;
is failing. It can't be document since you're not in a using block and it would be very strange if document could be null. The next object being accessed is whatever is returned by getElementById() for the onclick slot. Since there doesn't appear to be any element with that name in the dcument, it's a pretty good guess that that's causing the problem.


Fix your Radio buttons for shipping. You're calling them 'shipping1,2,3' in javascript, but in your html they have the wrong ID's. Also remove their postback event.
<input type="radio" value="3.50" name="Saturday"
id="Shipping1"/>
<label for="Shipping1">Saturday Delivery ($3.50)</label> <br />
<input type="radio" value="5.00" name="Days"
id="Shipping2"/>
<label for="Shipping2">2-3 days Delivery ($5.00)</label> <br />
<input type="radio" value="7.50" name="Overnight"
id="Shipping3"/>
Overnight<label for="Shipping3"> Delivery ($7.50)</label>
Cheers,
~ck


document.getElementById('shipping1')
Above code is "null", means there is no control with the name "shipping1".
document.getElementById('Text1').onblur
This also throws "null" exception as there is no control with the name "shippingTbx" in the html you gave.
function calcShipping() {
// Below code is null
document.getElementById('shippingTbx').value = parseFloat(this.value).toFixed(2);
recalculate();
}
Please make sure you've all the controls and get the element only for the controls available in the html.

Related

Not sure what I'm doing wrong with this Jquery

So, I'm working on an HTML based site using Image maps and I've created some in-line DIV's with buttons working.
I've been creating a second area that should launch Jquery to hide/show forms inside of a button, but For some reason the scripts do not work when launched via <script src="Domain.tld/script.js"></script>
But they do work when launched DIRECTLY into the code via <script> Code here </script>
Below is the non working version to see the buttons you must click the THIRD button on the page.
<link rel="stylesheet" href="https://cronusdevelopment.github.io/IMVU/style.css" />
<link rel="stylesheet" href="https://cronusdevelopment.github.io/IMVU/shop.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cronusdevelopment.github.io/IMVU/frame.js"></script>
<script src="https://cronusdevelopment.github.io/IMVU/shop.js"></script>
<style>
table.imvuolstatuss {
color: white;
text-align: center;
font-size: 25px;
margin-left: 424px;
margin-top: -799px;
}</style>
<div id="content_container">
<div id="home">
<br /><br />
<p style="color: white;">HERE CONTENT FOR home</p>
</div>
<div id="about">
<br /><br />
<p style="color: white;">HERE CONTENT FOR about</p>
</div>
<div id="shop">
<br /><br />
<p style="color: white;">
<button id = "BtMale" class="ShopButtons">Male</button>
<button id = "BtFemale" class="ShopButtons">Female</button>
<button id = "BtFurn" class="ShopButtons">Room/Furn</button>
<button id = "BtOther" class="ShopButtons">Other</button>
<button id = "BtAll" class="ShopButtons" onclick=window.open("https://www.imvu.com/shop/web_search.php?manufacturers_id=196067881")>Whole Shop</button>
<form id="M" hidden>
<br>
<select name="categories_id" onChange="window.open('http://www.imvu.com/shop/web_search.php?cat='+this.form.categories_id.value+'&manufacturers_id=196067881&sort=id&sortorder=desc','','scrollbars=yes, resizable=yes, status=1,toolbar=1, location=1, menubar=1');">
<option value="" selected>Choose Something</option>
<option value="41">Clothing for Male</option>
<option value="71"> Male Accessories</option>
<option value="70"> Male Bottoms</option>
<option value="316"> Male Bundles</option>
<option value="92"> Male Eyebrows</option>
<option value="91"> Male Eyes</option>
<option value="98"> Male Gloves</option>
<option value="67"> Male Hairstyles</option>
<option value="296"> Male Heads</option>
<option value="102"> Male Shoes</option>
<option value="68"> Male Skintones</option>
<option value="69"> Male Tops</option>
<option value="3088-3091"> Male Outfits </option>
</select>
</form>
<form id="F" hidden>
<br>
<select name="categories_id" onChange="window.open('http://www.imvu.com/shop/web_search.php?cat='+this.form.categories_id.value+'&manufacturers_id=196067881&sort=id&sortorder=desc','','scrollbars=yes, resizable=yes, status=1,toolbar=1, location=1, menubar=1');">
<option value="" selected>Choose Something</option>
<option value="40">Clothing for Female</option>
<option value="153"> Female Accessories</option>
<option value="78"> Female Bottoms</option>
<option value="324"> Female Bundles</option>
<option value="90"> Female Eyebrows</option>
<option value="89"> Female Eyes</option>
<option value="97"> Female Gloves</option>
<option value="75"> Female Hairstyles</option>
<option value="295"> Female Heads</option>
<option value="101"> Female Shoes</option>
<option value="76"> Female Skintones</option>
<option value="128"> Female Tops</option>
<option value="3088-3090"> Female Outfits</option>
</select>
</form>
<form id="Rooms" hidden>
<br>
<select name="categories_id" onChange="window.open('http://www.imvu.com/shop/web_search.php?cat='+this.form.categories_id.value+'&manufacturers_id=196067881&sort=id&sortorder=desc','','scrollbars=yes, resizable=yes, status=1,toolbar=1, location=1, menubar=1');">
<option value="" selected>Choose Something</option>
<option value="107">Rooms & Furniture</option>
<option value="1027"> Furniture</option>
<option value="366"> Rooms</option>
<option value="1279"> Furniture Bundles</option>
<option value="2386"> Furnished Rooms</option>
<option value="107-1027-1552"> Posing Spots</option>
<option value="107-1027-1905"> Animated Pose Spots</option>
</select>
</form>
<form id="Other" hidden>
<br>
<select name="categories_id" onChange="window.open('http://www.imvu.com/shop/web_search.php?cat='+this.form.categories_id.value+'&manufacturers_id=196067881&sort=id&sortorder=desc','','scrollbars=yes, resizable=yes, status=1,toolbar=1, location=1, menubar=1');">
<option value="" selected>Choose Something</option>
<option value="108">Avatars</option>
<option value="425">Pets</option>
<option value="495">Stickers</option>
</select>
</form>
</p>
</div>
<div id="shout">
<br /><br />
<p style="color: white;">HERE CONTENT FOR shout</p>
</div>
<div id="honor">
<br /><br />
<p style="color: white;">HERE CONTENT FOR honor</p>
</div>
</div>
<div id="layout-container">
<img
src="https://i.imgur.com/vc0zoBl.png"
width="1013"
height="1300"
border="0"
usemap="#map"
/>
<map name="map">
<area
shape="rect"
coords="273,740,356,768"
onclick="changeframe('home','frame1')"
/>
<area
shape="rect"
coords="360,740,445,768"
onclick="changeframe('about','frame1')"
/>
<area
shape="rect"
coords="450,740,535,768"
onclick="changeframe('shop','frame1')"
/>
<area
shape="rect"
coords="539,740,624,768"
onclick="changeframe('shout','frame1')"
/>
<area
shape="rect"
coords="630,740,715,768"
onclick="changeframe('honor','frame1')"
/>
</map>
<div id="frame1" class="box"></div>
<script>
changeframe("home", "frame1");
</script>
</div>
<div id="OLStatus">
<table class="imvuolstatuss">
<tr>
<td align='center'>Status - <img src="https://gaf210.gafcodes.com/get_online_status?u=196067881&offline=https%3A%2F%2Fuserimages01.imvu.com%2Fproductdata%2Fstickers_af13a170f917065f15d41a7d6a484f37.gif&online=https%3A%2F%2Favatars.imvu.com%2Fcatalog%2Fweb_images%2Fmy_page%2Fonline_under_image.gif&unknown=https%3A%2F%2Favatars.imvu.com%2Fcatalog%2Fweb_images%2Fmy_page%2Fspace.gif" alt=""></td>
</tr>
</table>
</div>
below is the working version.
<link rel="stylesheet" href="https://cronusdevelopment.github.io/IMVU/shop.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="shop">
<br /><br />
<p style="color: white;">
<button id = "BtMale" class="ShopButtons">Male</button>
<button id = "BtFemale" class="ShopButtons">Female</button>
<button id = "BtFurn" class="ShopButtons">Room/Furn</button>
<button id = "BtOther" class="ShopButtons">Other</button>
<!--DO NOT UNTAG THIS AS IT'S NOT NEEDED YET.-->
<!--<button id = "BtAll" class="ShopButtons" onclick=window.open("https://www.imvu.com/shop/web_search.php?manufacturers_id=196067881")>Whole Shop</button>-->
<form id="M" hidden>
<br>
<select name="categories_id" onChange="window.open('http://www.imvu.com/shop/web_search.php?cat='+this.form.categories_id.value+'&manufacturers_id=196067881&sort=id&sortorder=desc','','scrollbars=yes, resizable=yes, status=1,toolbar=1, location=1, menubar=1');">
<option value="" selected>Choose Something</option>
<option value="41">Clothing for Male</option>
<option value="71"> Male Accessories</option>
<option value="70"> Male Bottoms</option>
<option value="316"> Male Bundles</option>
<option value="92"> Male Eyebrows</option>
<option value="91"> Male Eyes</option>
<option value="98"> Male Gloves</option>
<option value="67"> Male Hairstyles</option>
<option value="296"> Male Heads</option>
<option value="102"> Male Shoes</option>
<option value="68"> Male Skintones</option>
<option value="69"> Male Tops</option>
<option value="3088-3091"> Male Outfits </option>
</select>
</form>
<form id="F" hidden>
<br>
<select name="categories_id" onChange="window.open('http://www.imvu.com/shop/web_search.php?cat='+this.form.categories_id.value+'&manufacturers_id=196067881&sort=id&sortorder=desc','','scrollbars=yes, resizable=yes, status=1,toolbar=1, location=1, menubar=1');">
<option value="" selected>Choose Something</option>
<option value="40">Clothing for Female</option>
<option value="153"> Female Accessories</option>
<option value="78"> Female Bottoms</option>
<option value="324"> Female Bundles</option>
<option value="90"> Female Eyebrows</option>
<option value="89"> Female Eyes</option>
<option value="97"> Female Gloves</option>
<option value="75"> Female Hairstyles</option>
<option value="295"> Female Heads</option>
<option value="101"> Female Shoes</option>
<option value="76"> Female Skintones</option>
<option value="128"> Female Tops</option>
<option value="3088-3090"> Female Outfits</option>
</select>
</form>
<form id="Rooms" hidden>
<br>
<select name="categories_id" onChange="window.open('http://www.imvu.com/shop/web_search.php?cat='+this.form.categories_id.value+'&manufacturers_id=196067881&sort=id&sortorder=desc','','scrollbars=yes, resizable=yes, status=1,toolbar=1, location=1, menubar=1');">
<option value="" selected>Choose Something</option>
<option value="107">Rooms & Furniture</option>
<option value="1027"> Furniture</option>
<option value="366"> Rooms</option>
<option value="1279"> Furniture Bundles</option>
<option value="2386"> Furnished Rooms</option>
<option value="107-1027-1552"> Posing Spots</option>
<option value="107-1027-1905"> Animated Pose Spots</option>
</select>
</form>
<form id="Other" hidden>
<br>
<select name="categories_id" onChange="window.open('http://www.imvu.com/shop/web_search.php?cat='+this.form.categories_id.value+'&manufacturers_id=196067881&sort=id&sortorder=desc','','scrollbars=yes, resizable=yes, status=1,toolbar=1, location=1, menubar=1');">
<option value="" selected>Choose Something</option>
<option value="108">Avatars</option>
<option value="425">Pets</option>
<option value="495">Stickers</option>
</select>
</form>
</p>
</div>
<script src="https://cronusdevelopment.github.io/IMVU/shop.js"></script>
below is the Javascript/Jquery for the above.
$('#BtMale').on('click', function(e){
$("#M").toggle();
$(this).toggleClass('Male');
if ($("#BtFemale").is(":enabled"))
$("#BtFemale").prop("disabled",true);
else
$("#BtFemale").prop("disabled",false);
if ($("#BtFurn").is(":enabled"))
$("#BtFurn").prop("disabled",true);
else
$("#BtFurn").prop("disabled",false);
if ($("#BtOther").is(":enabled"))
$("#BtOther").prop("disabled",true);
else
$("#BtOther").prop("disabled",false);
});
$('#BtFemale').on('click', function(e){
$("#F").toggle();
$(this).toggleClass('Female');
if ($("#BtMale").is(":enabled"))
$("#BtMale").prop("disabled",true);
else
$("#BtMale").prop("disabled",false);
if ($("#BtFurn").is(":enabled"))
$("#BtFurn").prop("disabled",true);
else
$("#BtFurn").prop("disabled",false);
if ($("#BtOther").is(":enabled"))
$("#BtOther").prop("disabled",true);
else
$("#BtOther").prop("disabled",false);
});
$('#BtFurn').on('click', function(e){
$("#Rooms").toggle();
$(this).toggleClass('Rooms');
if ($("#BtMale").is(":enabled"))
$("#BtMale").prop("disabled",true);
else
$("#BtMale").prop("disabled",false);
if ($("#BtFemale").is(":enabled"))
$("#BtFemale").prop("disabled",true);
else
$("#BtFemale").prop("disabled",false);
if ($("#BtOther").is(":enabled"))
$("#BtOther").prop("disabled",true);
else
$("#BtOther").prop("disabled",false);
});
$('#BtOther').on('click', function(e){
$("#Other").toggle();
$(this).toggleClass('Other');
if ($("#BtMale").is(":enabled"))
$("#BtMale").prop("disabled",true);
else
$("#BtMale").prop("disabled",false);
if ($("#BtFemale").is(":enabled"))
$("#BtFemale").prop("disabled",true);
else
$("#BtFemale").prop("disabled",false);
if ($("#BtFurn").is(":enabled"))
$("#BtFurn").prop("disabled",true);
else
$("#BtFurn").prop("disabled",false);
});
Any help would be greatly appreciated.

JavaScript hide a corresponding field with specific delimiter

I want to hide the corresponding textarea field of a dropdown, It will be used in a lot of instance that's why I want it on a function.
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1" ></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2" ></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3" ></textarea>
</div>
As you can see in the code the dropdown name=campaign-dd# has a specific textarea name=campaign-comment#.

On initial load. I want to hide it. And will display it once YES is selected
In this case you can put a common class on all the .field elements which contains the comment fields, in my example below I used .comment and hide them in CSS. Then in JS you can put a change event handler on the select elements which shows/hides the related comment field based on the selected option. Try this:
$('select').change(function() {
$(this).closest('.field').nextAll('.field:first').toggle($(this).val() == 'Yes');
});
.field.comment {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field comment">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field comment">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field comment">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

Adding classes that makes more sense would be easier, but you can construct the name for the textarea from the name given to the select, to hide it etc.
$('.field select').on('change', function() {
var parts = this.name.split('-');
var numb = parts[1].replace(/\D/g, '');
$('[name="' + parts[0] + '-comment' + numb + '"]').toggle(this.value !== 'Yes')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em>Select "Yes" to hide comment</em>
<br><br><br>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

HTML form with JS does not work properly in PHP

I have a form with JS where I hide and show form's fields after choosing option with radiobuttons.
<?php require_once 'resources/menus/adminMenu.php'; ?>
<div class="col-lg-offset-3 col-lg-6 ">
<div class="well bs-component">
<form class="form-group" method="post">
<fieldset>
<legend>Wyszukaj</legend>
<div class="form-group" style="display: block" id="queryIndex">
<label for="index" class="control-label">Indeks</label>
<input class="form-control" id="index" name="index" type="text">
</div>
<div class="form-group" style="display: none" id="queryName">
<label for="name" class="control-label">Imię</label>
<input class="form-control" id="name" name="name" type="text">
<label for="surname" class="control-label">Nazwisko</label>
<input class="form-control" id="surname" name="surname" type="text">
</div>
<div class="form-group" style="display: none" id="queryFaculty">
<label for="faculty" class="control-label">Wydział</label>
<select class="form-control" id="faculty" name="faculty" required="required">
<option value=""></option>
<option value="Wydział A">Wydział A</option>
<option value="Wydział B">Wydział B</option>
<option value="Wydział C">Wydział C</option>
<option value="Wydział D">Wydział D</option>
<option value="Wydział E">Wydział E</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySubject">
<label for="subject" class="control-label">Kierunek</label>
<select class="form-control" id="subject" name="subject" required="required">
<option value=""></option>
<option value="Kierunek AA">Kierunek AA</option>
<option value="Kierunek AB">Kierunek AB</option>
<option value="Kierunek AC">Kierunek AC</option>
<option value="Kierunek BA">Kierunek BA</option>
<option value="Kierunek BB">Kierunek BB</option>
<option value="Kierunek BC">Kierunek BC</option>
<option value="Kierunek CA">Kierunek CA</option>
<option value="Kierunek CB">Kierunek CB</option>
<option value="Kierunek CC">Kierunek CC</option>
<option value="Kierunek DA">Kierunek DA</option>
<option value="Kierunek DB">Kierunek DB</option>
<option value="Kierunek DC">Kierunek DC</option>
<option value="Kierunek EA">Kierunek EA</option>
<option value="Kierunek EB">Kierunek EB</option>
<option value="Kierunek EC">Kierunek EC</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySystem">
<label for="system" class="control-label">System</label>
<select class="form-control" id="system" name="system" required="required">
<option value=""></option>
<option value="st">Stacjonarne</option>
<option value="nst">Niestacjonarne</option>
</select>
</div>
<div class="form-group" style="display: none" id="queryDegree">
<label for="degree" class="control-label">Stopień</label>
<select class="form-control" id="degree" name="degree" required="required">
<option value=""></option>
<option value="I">1. stopień (inżynierskie/licencjat)</option>
<option value="II">2. stopień (magisterskie)</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySemester">
<label for="semester" class="control-label">Semestr</label>
<select class="form-control" id="semester" name="semester" required="required">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="form-group">
<input type="radio" name="search" value="index" checked="checked"
onClick="changeForm('queryIndex')"> Indeks
<input type="radio" name="search" value="name"
onClick="changeForm('queryName')"> Imię i nazwisko
<input type="radio" name="search" value="faculty"
onClick="changeForm('queryFaculty')"> Wydział
<input type="radio" name="search" value="subject"
onClick="changeForm('querySubject')"> Kierunek
<input type="radio" name="search" value="system"
onClick="changeForm('querySystem')"> System
<input type="radio" name="search" value="degree"
onClick="changeForm('queryDegree')"> Stopień
<input type="radio" name="search" value="semester"
onClick="changeForm('querySemester')"> Semestr
</div>
<script type="text/javascript">
function changeForm(element) {
document.getElementById('queryIndex').style.display = 'none';
document.getElementById('queryName').style.display = 'none';
document.getElementById('queryFaculty').style.display = 'none';
document.getElementById('querySubject').style.display = 'none';
document.getElementById('querySystem').style.display = 'none';
document.getElementById('queryDegree').style.display = 'none';
document.getElementById('querySemester').style.display = 'none';
document.getElementById(element).style.display = 'block';
}
</script>
<div class="form-group col-lg-4">
<div class="control-label">
<button type="submit" class="btn btn-primary" name="submit" value="searchStudent">Szukaj
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Also I have PHP file, where I get data from this form.
function studentWindow()
{
$this->setView("AdminPanel", "StudentWindow");
if (isset($_POST['submit']) && $_POST['submit'] == 'searchStudent') {
$query="";
$data=array();
if($_POST['search']=='index'){
$data['index']=sanitizeString($_POST['index']);
$query="st_index LIKE '?%'";
}
elseif($_POST['search']=='name'){
$data['name']=sanitizeString($_POST['name']);
$data['surname']=sanitizeString($_POST['surname']);
$query="name LIKE '?%' AND surname LIKE '?%'";
}
elseif($_POST['search']=='faculty'){
$data['faculty']=$_POST['faculty'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject INNER JOIN faculty AS f ON s.id_faculty=f.id_faculty WHERE f.name=?';
}
elseif($_POST['search']=='subject'){
$data['subject']=$_POST['subject'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject WHERE s.name=?';
}
elseif($_POST['search']=='system'){
$data['system']=$_POST['system'];
$query='system=?';
}
elseif($_POST['search']=='degree'){
$data['degree']=$_POST['degree'];
$query='degree=?';
}
elseif($_POST['search']=='semester'){
$data['semester']=$_POST['semester'];
$query='semester=?';
}
$this->loadModel("AdminPanel");
$model = new AdminPanelModel();
$model->getStudents($query,$data);
}
}
This is a problem. I can't get data from forms and also the button doesn't work. I made other forms like this but without JS. This may be the cause. Do you have any suggestions or solutions?
P.S. Sorry for my English ;)

The problem is using required='required' when the form fields are not required.
The user can submit at any time and it is not evident that you must click each radio button in turn to fill out that portion, if that was the intention.
I ran your code as plain HTML and examined the POST data in the Chrome Dev Tools and it works fine if you fill out all fields with required...
You will get an error in console that says the following:
An invalid form control with name='faculty' is not focusable.
Chrome is trying to focus the field to add error messages, but you set style.display = 'none' so it can't.

Getting cannot call method of undefined using JQuery Form Validator

I'm using the Jquery form validator (http://formvalidator.net/) and I'm having trouble validating SELECT boxes. I've searched the above site and found NOTHING. I have found this article on StackOverflow. (jQuery select box validation)
But it doesn't work.... I get "cannot call method of undefined".
$(document).ready(function() {
//First validate the form
$.validate({
addValidClassOnAll: true,
rules: {
states: {
requiredState: true
},
color: {
requiredColor: true
},
size: {
requiredSize: true
}
},
onError: function() {
console.log('Form Validation failed');
return false;
},
onSuccess: function() {
console.log('Form is valid!');
return true; //Return False Will stop the submission of the form
}
});
$.validator.addMethod('requiredState', function(value) {
return (value !== 'XX');
}, "State required");
$.validator.addMethod('requiredColor', function(value) {
return (value !== 'select');
}, "Please select a Color");
$.validator.addMethod('requiredSize', function(value) {
return (value !== 'select');
}, "Please select a Size");
});
Using the js file: jquery.form-validator.js, there's no need to preface the $.validate... with the form name. But if I do, the validator doesn't work.
But if I don't, the addMethod() doesn't work... So I'm stuck between a rock and a hard place.
Any suggestions would be helpful.
Thank you, all.
Peter
UPDATE: Here's the watered down HTML
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<meta name="keywords" content="jquery, plugin, scratchpad, scratchcard, scratch" />
<meta name="description" content="A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image." />
<title>MyTitle for Testing</title>
<!-- CSS -->
<link rel="Stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="Stylesheet" type="text/css" href="css/bootstrap-form.css" />
</head>
<body>
<div id="content3">
<div id="content-new" class="contentShipping">
<form id="formNewShip" class="bootstrap-frm" action="someFormProcessor.php" method="post">
<h1 style="float: left;">Enter your shipping address</h1>
<div style="float: left; width: 255px;">
<label style="vertical-align: middle;display:none;">First Name: </label>
<input type="text" id="fname" name="fname" size="25" maxlength="20"
placeholder="First Name" data-validation="alphanumeric" />
<br>
</div>
<div style="float: right; width: 255px;">
<label style="vertical-align: middle;display:none;">Last Name: </label>
<input type="text" id="lname" name="lname" size="35" maxlength="35"
placeholder="Last Name" data-validation="alphanumeric" />
<br>
</div>
<br>
<div style="float: left; width: 262px;">
<label style="vertical-align: middle;display:none;">Address: </label>
<input type="text" id="address" name="address" size="30" maxlength="45"
placeholder="Address" data-validation="alphanumeric" />
<br>
</div>
<div style="float: left; width: 255px;">
<label style="vertical-align: middle;display:none;">Apt/Ste: </label>
<input type="text" id="aptste" name="aptste" size="15" maxlength="10"
placeholder="Apt/Ste" />
<br>
</div>
<div style="float: left; width: 262px;">
<label style="vertical-align: middle;display:none;">City: </label>
<input type="text" id="city" name="city" size="30" maxlength="45"
placeholder="City" data-validation="alphanumeric" />
<br>
</div>
<div style="float: right; width: 255px;">
<label style="vertical-align: middle;display:none;">State: </label>
<select id="states" name="states" title='Select your state.'>
<option value="XX" selected="selected">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<br>
</div>
<div style="float: left; width: 262px;">
<label style="vertical-align: middle;display:none;">Zip Code: </label>
<input type="text" id="zipcode" name="zipcode" size="30"
maxlength="5" placeholder="Zip Code"
data-validation="USAZipCode" />
<br>
</div>
<div style="float: right; width: 255px;">
<label style="vertical-align: middle;display:none;">Size: </label>
<select id="size" name="size" title='Select your size.'>
<option value="select" selected="selected">Size</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
<div style="float: left; width: 262px;">
<label style="vertical-align: middle;display:none;">Color: </label>
<select id="color" name="color" title='Select your color.'>
<option value="select" selected="selected">Color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<div style="float: right; width: 255px;">
<label style="vertical-align: middle;display:none;">Email: </label>
<input type="text" id="email" name="email" size="30" maxlength="100"
placeholder="Email" data-validation="email" />
<br>
</div>
<div id="buttons" style="width: 210px;">
<div><button id="btnSubmit" type="submit" class="btn btn-primary center-block">Submit</button></div>
<!-- <div style="float: right;"><button id="btnReset" type="reset" class="btn btn-primary">Reset</button></div>-->
</div>
</form>
</div>
</div>
<div id="templates"></div>
<script type="text/javascript" src="assets/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery_form_validator/jquery.form-validator.js"></script>
</body>
</html>

checkout this Fiddle it works, you have to declare your validation methods before rules declaration and use
$("#formNewShip").validate({})
Edit:
To require firstame, you should add this to your rules:
fname: {
required: true
},

I made a fiddle and it works fine:
http://jsfiddle.net/BzRth/
I added the form selector and removed the onSuccess and onError handlers as they seemed superfluous, but the behaviour is exactly as I would expect.
Check that you're using the same version of the jquery validator code as my fiddle (CDN at http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js)

Changing HTML label color with javascript

I have a form that I need to check for no entries and things like that. Right now the form will change the color of the form fields to red but I need it to change the labels to red also. Since labels are not form elements my current method is making it a tad difficult to change the labels as well. Any suggestions I can implement?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Test</title>
<script type="text/javascript">
function validate(){
var errors = new Array();
for( var x = 0; x < document.forms[0].elements.length; x++ ){
if( document.forms[0].elements[x].type == "text" ){
if( document.forms[0].elements[x].value == "" ){
errors.push("The " + document.forms[0].elements[x].name + " field cannot be blank.\n");
document.forms[0].elements[x].className = "in_error";
}
}
if( document.forms[0].elements[x].type == "select-one" ){
if( document.forms[0].elements[x].selectedIndex == 0 ){
errors.push( "The " + document.forms[0].elements[x].name + " field cannot be blank.\n" );
document.forms[0].elements[x].className = "in_error";
}
}
if( document.forms[0].elements[x].type == "password" ){
if( document.forms[0].elements[x].value == ""){
errors.push( "The " + document.forms[0].elements[x].name + " field cannot be blank.\n" );
document.forms[0].elements[x].className = "in_error";
}
}
}
if( errors.length == 0 ){
return true;
}else{
clear_errors( errors );
show_errors( errors );
return false;
}
}
function clear_errors( errors ){
var div = document.getElementById( "errors" );
while( div.hasChildNodes() ){
div.removeChild(div.firstChild);
}
}
function show_errors( errors ){
var div = document.getElementById( "errors" );
for(var x = 0; x < errors.length; x++){
var error = document.createTextNode( errors[x] );
var p = document.createElement( "p" );
p.appendChild( error );
div.appendChild( p )
}
}
window.onload = function( ){
document.forms[0].onsubmit = validate;
}
</script>
<style type="text/css">
#errors{
color: #F00;
}
.in_error{
background-color: #F00;
}
</style>
</head>
<body>
<div id="errors"></div>
<form action="http://ingenio.us.com/examples/echo" method="post">
<div class="mainContainer" style="width:650px; margin: 0 auto; text-align:center;">
<div class="contactInfo" style="text-align:center; width:650px;">
<fieldset>
<legend style="text-align:left;">Contact Info</legend>
<label id="firstNameLabel" for="firstName">First Name: </label><input name="First Name" id="firstName" type="text" size="15" maxlength="15" />
<label id="lastNameLabel" for="lastName">Last Name: </label><input name="Last Name" id="lastName" type="text" size="15" maxlength="15" />
<label id="middleInitialLabel" for="middleInitial">Middle Initial: </label><input name="Middle Initial" id="middleInitial" type="text" size="4" maxlength="1" /><br /><br/>
<label id="streetAddressLabel" for="streetAddress">Street Address: </label><input name="Street Address" id="streetAddress" type="text" size="58" maxlength="55" /> <br /><br />
<label id="cityLabel" for="city">City: </label><input name="City" id="city" type="text" size="30" maxlength="28" />
<label id="stateLabel" for="state">State: </label>
<select name="State" id="state">
<option></option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label name="zipLabel" for="zip">Zip: </label><input name="Zip" id="zip" type="text" size="7" maxlength="5" /><br /><br />
</fieldset>
</div><br /><br />
</div>
<div class="mainContainerTwo" style="width:450px; margin: 0 auto; text-align:center;">
<div class="userInfo" style="text-align:center; width:450px;">
<fieldset>
<legend style="text-align:left;">User Info</legend>
<label name="usernameLabel" for="username">Username: </label><input name="Username" id="username" type="text" size="20" maxlength="15" /><br /><br />
<label name="passwordLabel" for="password">Password: </label><input name="Password" id="password" type="password" size="20" maxlength="15" /><br /><br />
<label name="passwordConfirmLabel" for="passwordConfirm">Confirm Password: </label><input name="Confirm Password" id="passwordConfirm" type="password" size="20" maxlength="15" /><br /><br />
<input type="submit" value="Submit" />
</fieldset>
</div>
</div>
</form>
</body>
</html>

A quick fix would be traversing from the input element to the previous sibling, which in this case is the label element. After that you can add class in_error to your label element.
Add the following code line inside the three if-blocks
document.forms[0].elements[x].previousSibling.className = "in_error";
Then you should also change your CSS to the following, in order to set the red background color to the inputs and red foreground color to the labels.
input.in_error{
background-color: #F00;
}
label.in_error {
color: #F00;
}
Is there any reason why you are not using jQuery? If not, I strongly suggest you to take it into use. It makes DOM manipulation like this super easy.

Categories