Zip code error

Page 1 of 1

12 Replies - 694 Views - Last Post: 23 March 2012 - 10:46 AM

#1 Shiriyuki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-March 12

Zip code error

Posted 22 March 2012 - 05:19 PM

Hi all im having issues with my program. I have everything working except 2 thing: 1:when a user enters a zip code and clicks the "Shipping same as billing" check box the zip code dosent get put from the shipping info they entered to the billing automatically, and the second thing is: when i click the submit button it is supposed to check to see if any fields are empty or invalid like letters in the zip code and if they are, a box pops up and says "All fields are required please look at review screen again". i cant get either to work correctly. Any help or advice would be greatly appreciated.

HTML code

<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet" href="Lab11Form.css">
<script src="Lab11Forms.js"></script> 
</head>
<body>
<h1 >Shopping Cart</h1>
<form action="someAction.cgi">
<h2>Ship To Information</h2>
<p><label for="username">Name:</label>
<input id="username" type="text" size="30">
</p>
<p><label for="shipAddr1">Address</label>
<input id="shipAddr1" type="text" size="50" >
</p> 
<p> <label for="shipCity">City:</label>
<input id="shipCity" type="text" size="30" > 
</p>
<p> 
<label for="shipState">State: </label>
<select id="shipState" >
<option value="" selected>Choose a state</option>
<option value="SC">South Carolina</option>
<option value="GA">Georgia</option>
<option value="NC">North Carolina</option>
</select>
</p>
<p><label for="shipZip">Zip Code:</label><input id="zip" type="text" size="5" maxlength="5">
</p> 
<p><label for="shipOpt">Shipping Option:</label>
<input id="shipNorm" type="radio" name="shipOpt">Normal
<input id="shipNextDay" type="radio" name="shipOpt" value= "Next Day" onclick="nextDayRad()">Next Day 
</p> 
<p>Bill To Same As Ship To:
<label for="BillToShipTo"><input type="checkbox" id="BillToShipTo" value="Yes" onclick="BillToCheck()"></label>
</p>
<h2>Bill To Information</h2>
<p><label for="billAddr1">Address</label>
<input id="billAddr1" type="text" size="50" >
</p> 
<p> <label for="billCity">City:</label>
<input id="billCity" type="text" size="30" > 
</p>
<p> 
<label for="billState">State: </label>
<select id="billState" >
<option value="" selected>Choose a state</option>
<option value="SC">South Carolina</option>
<option value="GA">Georgia</option>
<option value="NC">North Carolina</option>
</select>
</p>
<p><label for="billZip">Zip Code:</label><input id="zip" type="text" size="5" maxlength="5">
</p> 
<p><input type="submit" value="Submit">&nbsp;<input type="reset"></p>
</form>
</body>
</html>


.js file code
/**
* @author szabos
*/
window.onload = initForms;

function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = validForm;
}
}

function nextDayRad(){
alert("next Day will be an extra Charge.");
}

function BillToCheck(){
document.getElementById("billAddr1").value = document.getElementById("shipAddr1").value
document.getElementById("billCity").value = document.getElementById("shipCity").value
document.getElementById("billState").value = document.getElementById("shipState").value
document.getElementById("billZip").value = document.getElementById("shipZip").value

}

function validForm() {
// Place validation code here 

var allGood= true;
var allTags= document.getElementsByTagName("*")

for (var i=0; i<allTags.length; i++){
if (!validTag(allTags[i])) {
allGood= false;
}
}

return allGood;
}

function validTag(thisTag){
var outClass = "";
var allClasses= thisTag.className.spilit(" ");

for (var j=0; j<allClasses.length; j++){
outClass += vaildbasedOnClass (allClasses[j]) + " ";
}
thisTag.className= outClass;

if (outClass.indexOf("invalid") > -1){
thistag.focus();
if (thisTag.nodname == "INPUT"){
thisTag.select();
}
return false;
}
return true;
}

function validBasedOnClass(thisClass){
var classback= "";
switch(thisClass){
case "":
case "invalid":
break;
case "required":
if (allGood && thisTag.value == ""){
classBack= "Invalid ";
}
classBack += thisClass;
break;
default:
classBack += thisClass;
}
return classback;

}


Is This A Good Question/Topic? 0
  • +

Replies To: Zip code error

#2 Shiriyuki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-March 12

Re: Zip code error

Posted 22 March 2012 - 08:14 PM

still nothing?
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3045
  • View blog
  • Posts: 4,560
  • Joined: 08-June 10

Re: Zip code error

Posted 22 March 2012 - 08:52 PM

View PostShiriyuki, on 23 March 2012 - 12:19 AM, said:

1:when a user enters a zip code and clicks the "Shipping same as billing" check box the zip code dosent get put from the shipping info they entered to the billing automatically,

Both of the zip input boxes have the same id value: "zip", which means that the code that is meant to transfer the value between them fails, as it is trying to move the value between boxes with id values: "shipZip" and "billZip".

This error should be logged in the error console. (Which, by the way, you should get very familiar with if you intend to work with Javascript!)

View PostShiriyuki, on 23 March 2012 - 12:19 AM, said:

and the second thing is: when i click the submit button it is supposed to check to see if any fields are empty or invalid like letters in the zip code and if they are, a box pops up and says "All fields are required please look at review screen again". i cant get either to work correctly.

I don't understand your thinking on this one. It seems your validForm function is trying to pass every single element on the page through a validation function that does some sort of class name based filtering, except that the logic doesn't seem to add up. Can you explain what you are thinking here?

Normally with a form this simple you'd just pick each input element out using document.getElementById and test it to see if it matches some criteria. There is really no need to go through some elaborate, dynamic validation procedures unless you are creating code to be used on multiple forms you don't know ahead of time. Also, you'll never want to test all the elements on a page. It's just a waste of cycles. At most you'd go through all the normal input element types within a specific form.


Also, keep in mind that Javascript is case-sensitive. A number of your variable name references seem to use an incorrect case. It's best to adopt a single, well defined naming policy to avoid confusion about this. The so called "camelCase" style is widely used, both in Javascript as well as elsewhere. That is, when naming variables and functions, start with a lower case, and then use an upper case letter for the start of each word. Like:
var myVariableName = "...";
function myFunctionName() { }

When creating objects, however, it's a good idea to start with a upper case letter as well, to diffirentiate them from functions and variables.
var MyObject = function() {
    var somePrivateValue = "";
    this.somePublicValue = "";
    this.doSomething = function() { ... }
}

var myObjectInstance = new MyObject();
myObjectInstance.doSomething();


But of course, this is just a suggestion. You're free to adopt your own style. But I highly recommend you pick a style and stick to it. Makes things a lot less confusing in the long run.
Was This Post Helpful? 1
  • +
  • -

#4 Shiriyuki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-March 12

Re: Zip code error

Posted 23 March 2012 - 04:50 AM

View PostAtli, on 22 March 2012 - 08:52 PM, said:

View PostShiriyuki, on 23 March 2012 - 12:19 AM, said:

1:when a user enters a zip code and clicks the "Shipping same as billing" check box the zip code dosent get put from the shipping info they entered to the billing automatically,

Both of the zip input boxes have the same id value: "zip", which means that the code that is meant to transfer the value between them fails, as it is trying to move the value between boxes with id values: "shipZip" and "billZip".

This error should be logged in the error console. (Which, by the way, you should get very familiar with if you intend to work with Javascript!)

View PostShiriyuki, on 23 March 2012 - 12:19 AM, said:

and the second thing is: when i click the submit button it is supposed to check to see if any fields are empty or invalid like letters in the zip code and if they are, a box pops up and says "All fields are required please look at review screen again". i cant get either to work correctly.

I don't understand your thinking on this one. It seems your validForm function is trying to pass every single element on the page through a validation function that does some sort of class name based filtering, except that the logic doesn't seem to add up. Can you explain what you are thinking here?

Normally with a form this simple you'd just pick each input element out using document.getElementById and test it to see if it matches some criteria. There is really no need to go through some elaborate, dynamic validation procedures unless you are creating code to be used on multiple forms you don't know ahead of time. Also, you'll never want to test all the elements on a page. It's just a waste of cycles. At most you'd go through all the normal input element types within a specific form.


Also, keep in mind that Javascript is case-sensitive. A number of your variable name references seem to use an incorrect case. It's best to adopt a single, well defined naming policy to avoid confusion about this. The so called "camelCase" style is widely used, both in Javascript as well as elsewhere. That is, when naming variables and functions, start with a lower case, and then use an upper case letter for the start of each word. Like:
var myVariableName = "...";
function myFunctionName() { }

When creating objects, however, it's a good idea to start with a upper case letter as well, to diffirentiate them from functions and variables.
var MyObject = function() {
    var somePrivateValue = "";
    this.somePublicValue = "";
    this.doSomething = function() { ... }
}

var myObjectInstance = new MyObject();
myObjectInstance.doSomething();


But of course, this is just a suggestion. You're free to adopt your own style. But I highly recommend you pick a style and stick to it. Makes things a lot less confusing in the long run.



thanks so much for your reply, it helped a TON i could't find out why it wasn't printing the zip code, I can't believe still that it was something sooooo small like a invalid id type. And as far as the second part of the question... the submit button that i have coded on the html page is supposed to (upon on.click event) to check if any fields are empty, if they are i have to use and alert dialog box ( alert(...) ) to tell them that "All fields are required, please review screen before submitting." If you could guide me in the right directionwith that it would be wonderful, im not asking you to like tell me the code to get it to work, but just like tell me a hint or something i could do to improve it.

Note* I am not focusing on Javascript in the long run, this is just to get through with this semester in college. and About the error console, out teacher told us FireBug is more of a useful tool, can you confirm this?
Was This Post Helpful? 0
  • +
  • -

#5 Shiriyuki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-March 12

Re: Zip code error

Posted 23 March 2012 - 06:00 AM

Still haven't figured it out,i tried changing the class names and nothing happened...hmm....
Was This Post Helpful? 0
  • +
  • -

#6 JackOfAllTrades  Icon User is online

  • Saucy!
  • member icon

Reputation: 5672
  • View blog
  • Posts: 22,524
  • Joined: 23-August 08

Re: Zip code error

Posted 23 March 2012 - 07:22 AM

Post your current code.
Was This Post Helpful? 0
  • +
  • -

#7 Shiriyuki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-March 12

Re: Zip code error

Posted 23 March 2012 - 07:30 AM

View PostJackOfAllTrades, on 23 March 2012 - 07:22 AM, said:

Post your current code.



HTML file

<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet" href="Lab11Forms.css">
<script src="Lab11Forms.js"></script> 
</head>
<body>
<h1 >Shopping Cart</h1>
<form action="someAction.cgi">
<h2>Ship To Information</h2>
<p><label for="username">Name:</label>
<input id="username" type="text" size="30">
</p>
<p><label for="shipAddr1">Address</label>
<input id="shipAddr1" type="text" size="50" >
</p> 
<p> <label for="shipCity">City:</label>
<input id="shipCity" type="text" size="30" > 
</p>
<p> 
<label for="shipState">State: </label>
<select id="shipState" >
<option value="" selected>Choose a state</option>
<option value="SC">South Carolina</option>
<option value="GA">Georgia</option>
<option value="NC">North Carolina</option>
</select>
</p>
<p><label for="shipZip">Zip Code:</label><input id="zipship" type="text" size="5" maxlength="5">
</p> 
<p><label for="shipOpt">Shipping Option:</label>
<input id="shipNorm" type="radio" name="shipOpt">Normal
<input id="shipNextDay" type="radio" name="shipOpt" value= "Next Day" onclick="nextDayRad()">Next Day 
</p> 
<p>Bill To Same As Ship To:
<label for="BillToShipTo"><input type="checkbox" id="BillToShipTo" value="Yes" onclick="BillToCheck()"></label>
</p>
<h2>Bill To Information</h2>
<p><label for="billAddr1">Address</label>
<input id="billAddr1" type="text" size="50" >
</p> 
<p> <label for="billCity">City:</label>
<input id="billCity" type="text" size="30" > 
</p>
<p> 
<label for="billState">State: </label>
<select id="billState" >
<option value="" selected>Choose a state</option>
<option value="SC">South Carolina</option>
<option value="GA">Georgia</option>
<option value="NC">North Carolina</option>
</select>
</p>
<p><label for="billZip">Zip Code:</label><input id="zipbill" type="text" size="5" maxlength="5">
</p> 
<p><input type="submit" value="Submit">&nbsp;<input type="reset"></p>
</form>
</body>
</html>


.js file

window.onload = initForms;

function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = validForm;
}
}

function nextDayRad(){
alert("Next Day Shipping will be an extra charge.");
}

function BillToCheck(){
document.getElementById("billAddr1").value = document.getElementById("shipAddr1").value
document.getElementById("billCity").value = document.getElementById("shipCity").value
document.getElementById("billState").value = document.getElementById("shipState").value
document.getElementById("zipbill").value = document.getElementById("zipship").value

}

function validForm() {
// Place validation code here 

var allGood= true;
var allTags= document.getElementsByTagName("*")

for (var i=0; i<allTags.length; i++){
if (!validTag(allTags[i])) {
allGood= false;
}
}

return allGood;
}

function validTag(username){
var outClass = "";
var allClasses= username.className.spilit(" ");

for (var j=0; j<allClasses.length; j++){
outClass += vaildbasedOnClass (allClasses[j]) + " ";
}
username.className= outClass;

if (outClass.indexOf("invalid") > -1){
username.focus();
if (thisTag.nodname == "INPUT"){
username.select();
}
return false;
}
return true;
}

function validBasedOnClass(thisClass){
var classback= "";
switch(thisClass){
case "":
case "invalid":
break;
case "required":
if (allGood && username.value == ""){
classBack= "Invalid ";
}
classBack += thisClass;
break;
default:
classBack += thisClass;
}
return classback;

}

Was This Post Helpful? 0
  • +
  • -

#8 Shiriyuki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-March 12

Re: Zip code error

Posted 23 March 2012 - 08:26 AM

hey jackofspades, any luck man? i have been at it for the past 1hour and still nothing.... i hate small errors like this.
Was This Post Helpful? 0
  • +
  • -

#9 Shiriyuki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-March 12

Re: Zip code error

Posted 23 March 2012 - 09:50 AM

bump
Was This Post Helpful? 0
  • +
  • -

#10 JackOfAllTrades  Icon User is online

  • Saucy!
  • member icon

Reputation: 5672
  • View blog
  • Posts: 22,524
  • Joined: 23-August 08

Re: Zip code error

Posted 23 March 2012 - 10:31 AM

So what's your current problem? It works fine (for your original problem anyway).
Was This Post Helpful? 0
  • +
  • -

#11 Shiriyuki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-March 12

Re: Zip code error

Posted 23 March 2012 - 10:35 AM

View PostJackOfAllTrades, on 23 March 2012 - 10:31 AM, said:

So what's your current problem? It works fine (for your original problem anyway).




my submit button that is on the bottom of the html file, when a user clicks it, it is supposed to check if there are any empty fields and if there are empty fields when the user clicks submit, it is supposed to show a box saying "All fields are required, review screen". Thats my issue, i cant get it to work like that
Was This Post Helpful? 0
  • +
  • -

#12 JackOfAllTrades  Icon User is online

  • Saucy!
  • member icon

Reputation: 5672
  • View blog
  • Posts: 22,524
  • Joined: 23-August 08

Re: Zip code error

Posted 23 March 2012 - 10:42 AM

So go back to your notes and lectures and read how you were TAUGHT to tie the submit button to Javascript. Because you didn't do that.
Was This Post Helpful? 0
  • +
  • -

#13 Shiriyuki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-March 12

Re: Zip code error

Posted 23 March 2012 - 10:46 AM

dont u think i did that already, it didnt help otherwise i would not be here, my online class's teacher dosent go into detail on how to do it. So how do i?
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1