Getting cannot call method of undefined using JQuery Form Validator - javascript

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)

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.

How to use jQuery hide effect in select option

I got one more doubt I'm close to the answer but not getting it to worked. Actually I have the a default input text & default drop-down(drop-down which consist of west Bengal & others). Now if someone click's on the west Bengal state under drop-down then the default input should get hide and the west Bengal drop-down should get displayed.
Below is the code what I have tried. Can any one please guideme I'm a bit new to jQuery.
$(document).ready(function() {
$("#state").on("select", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>

'select' is not the jQuery event you are expecting. It is related to text selectiongs in text inputs and text areas.
You should use 'change' instead for when the value of the select field changes.
$(document).ready(function() {
$("#state").on("change", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>

$(document).ready(function() {
$(document).on("change","#state", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}else{
$(".westbengaldistrict").hide();
$(".otherdistricts").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>

Display HTML form, based on selection of Radio Button

I am trying to arrange my radio buttons, so that they will display separate forms, based on which button is selected
I already got it working.
The problem is : the forms are displayed "one after another".
Meaning : instead of the second form displaying in place of the first, it is displayed WAY DOWN BELOW )))))))))
Here is the arrangement of my form-code :
<article>
<fieldset>
<h2 style="color:black; text-align:center; font:verdana; font-
size:100%"><b><u>Pay Now</u></b></h2>
<br>
<br>
<p>Please select a method of payment below :</p>
<br>
<form>
<label><input value="1" type="radio" name="formselector"
onclick="displayForm(this)">Via Credit Card</label>
<br>
<label><input value="2" type="radio" name="formselector"
onclick="displayForm(this)">Via Paypal</label>
</form>
<form style="visibility:hidden" id="ccform"><label>Enter your credit
card details :</label>
<br>
<br>
<dd><p>Credit Card Name : <input type="text" id="ccname"
name="ccname" value="$ccname"></p>
<p>Credit Card Type : <select name="cctype" required>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">American Express</option>
<option value="Discover">Discover</option>
<option value="Diners Club">Diners Club</option>
<option value="Maestro">Maestro</option>
<option value="Verified By Visa">Verified By Visa</option>
<option value="Visa Electron">Visa Electron</option>
</select>
<p>Credit Card Number : <input type="text" minlength="16"
id="ccnumber" name="ccnumber" value="$ccnumber"></p>
<p>Credit Expiry Date : Month : <select
name="ccexpdatemonth" required>
<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>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<span>Year : <select name="ccexpdateyear" required>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select></span>
<p>Credit Card CVC : <input type="text" minlength="3" id="cccvc"
name="cccvc" value="$cccvc"></p>
</dd>
</form>
<form style="visibility:hidden" id="paypalform"><label>Enter
your Paypal Details</label>
<br>
<br>
<dd>Paypal Address : <input type="text" id="paypal"
name="paypal" value="$paypal"></dd>
</form>
<br>
<div id="float_right">
<input type="submit" name="submit3" value="Pay Now">
</div>
</fieldset>
</article>
Actually, my ideal solution would be to have each form displayed directly beneath its own radio-button.
How can I re-arrange my code, to make this happen?
Thanks
My JS function :
<script type="text/javascript">
function displayForm(c){
if(c.value == "1"){
document.getElementById("ccform").style.visibility='visible';
document.getElementById("paypalform").style.visibility='hidden';
}
else if(c.value =="2"){
document.getElementById("ccform").style.visibility='hidden';
document.getElementById("paypalform").style.visibility='visible';
}
else{
}
}
</script>

Give this a try (works for me) I had to muck with the top margin a bit.
<script type="text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("ccformContainer").style.visibility = 'visible';
document.getElementById("paypalformContainer").style.visibility = 'hidden';
} else if (c.value == "2") {
document.getElementById("ccformContainer").style.visibility = 'hidden';
document.getElementById("paypalformContainer").style.visibility = 'visible';
} else {}
}
</script>
<form>
<input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Via Credit Card
<br>
<input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Via Paypal</form>
<div style="visibility:hidden; position:relative" id="ccformContainer">
<form id="ccform">
<label>Enter your credit card details :</label>
<br>
<br>
<dd>
<p>Credit Card Name :
<input type="text" id="ccname" name="ccname" value="$ccname">
</p>
<p>Credit Card Type :
<select name="cctype" required>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">American Express</option>
<option value="Discover">Discover</option>
<option value="Diners Club">Diners Club</option>
<option value="Maestro">Maestro</option>
<option value="Verified By Visa">Verified By Visa</option>
<option value="Visa Electron">Visa Electron</option>
</select>
<p>Credit Card Number :
<input type="text" minlength="16" id="ccnumber" name="ccnumber" value="$ccnumber">
</p>
<p>Credit Expiry Date : Month :
<select name="ccexpdatemonth" required>
<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>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> <span>Year : <select name="ccexpdateyear" required>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select></span>
<p>Credit Card CVC :
<input type="text" minlength="3" id="cccvc" name="cccvc" value="$cccvc">
</p>
</dd>
</form>
</div>
<div style="visibility:hidden;position:relative;top:-110px;margin-top:-110px" id="paypalformContainer">
<form id="paypalform">
<label>Enter your Paypal Details</label>
<br>
<br>
<dd>Paypal Address :
<input type="text" id="paypal" name="paypal" value="$paypal">
</dd>
</form>
</div>
<br>
<div id="float_right">
<input type="submit" name="submit3" value="Pay Now">
</div>
JQUERY METHOD
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#paypalformContainer').toggle('show');
jQuery('#ccformContainer').hide();
}
if (c.value == "1") {
jQuery('#ccformContainer').toggle('show');
jQuery('#paypalformContainer').hide();
}
};
</script>
</head>
<body>
<form>
<input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Via Credit Card
<div style="display:none" id="ccformContainer">
<form id="ccform">
<label>Enter your credit card details :</label>
<br>
<br>
<dd>
<p>Credit Card Name :
<input type="text" id="ccname" name="ccname" value="$ccname">
</p>
<p>Credit Card Type :
<select name="cctype" required>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">American Express</option>
<option value="Discover">Discover</option>
<option value="Diners Club">Diners Club</option>
<option value="Maestro">Maestro</option>
<option value="Verified By Visa">Verified By Visa</option>
<option value="Visa Electron">Visa Electron</option>
</select>
<p>Credit Card Number :
<input type="text" minlength="16" id="ccnumber" name="ccnumber" value="$ccnumber">
</p>
<p>Credit Expiry Date : Month :
<select name="ccexpdatemonth" required>
<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>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> <span>Year : <select name="ccexpdateyear" required>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select></span>
<p>Credit Card CVC :
<input type="text" minlength="3" id="cccvc" name="cccvc" value="$cccvc">
</p>
</dd>
<form>
</div>
<br>
<input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Via Paypal
<div style="display:none" id="paypalformContainer">
<form id="paypalform">
<label>Enter your Paypal Details</label>
<br>
<br>
<dd>Paypal Address :
<input type="text" id="paypal" name="paypal" value="$paypal">
</dd>
</form>
</div>
<div id="float_right">
<input type="submit" name="submit3" value="Pay Now">
</div>
</form>
</body>
<html>

The reason the second form is display way down below is because you're using visibility:hidden. This hides the element, but it still takes up the place it used to when it was visible.
Try display:none and display:inline instead, that seems to work.

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.

Javascript is not working - help

<!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.

Categories