Multiply Alert() Messages

[newtoajax]

I am trying to get this to work, when it worked, it showed all alerts but did not remove the correct inputs. Thank you. <script type="text/javascript" language="javascript">//var fName, lName, Name, address, email, phone; var fName=document.forms["form"]["fName"].value;var lName=document.forms["form"]["lName"].value;var Name = fName + " " + lName;var address=document.forms["form"]["address"].value;var email=document.forms["form"]["email"].value;var phone=document.forms["form"]["phone"].value;var alertMessage = ""; function validateForm(){ if ((fName==null || fNmame=="") || (lName==null || lName=="")){ alertMessage += "Fill both first and last name please.\n";return false; } if (address<5){alertMessage += "Please include your home address.\n";return false;} var atposition=email.indexOf("@");var dotposition=email.lastIndexOf("."); if(atposition<1 || dotposition<atposition+2 || dotposition+2>=atposition.length) { alertMessage += "Not a valid e-mail address. Please try again.\n";return false;} if(phone==null || phone==""){alertMessage += "Please input your phone numbers or use numbers, no letters please.\n";return false;} if(address==null || address==""){alertMessage += "Please input your mailing address.\n"; return false;} if (alertMessage !=""){alert(alertMessage + "Thank you, but please review the form for errors and try again."); return false;} else{return true; } } </script>

[newtoajax]

FireFox's firebug gives me this error, it makes no sense, and it does not go away even when I declare var fName;. document.forms.form is undefined var fName=document.forms["form"]["fName"].value;

[Ingolme]

Try accessing form elements using document.getElementById(). document.forms[] is a really old and unreliable method.

[thescientist]

that's a pretty specific error. It's saying that what are you trying to do here:document.forms.form won't work because there does not exist any meaningful at that reference. which is basically in the entire DOM (document), if there are any forms with the name "form" then return a reference to that object. Undefined means that the path to that reference doesn't exist. However, following Ingolme's suggestion to use document.getElementById is a good first step to implementing what you are trying to do using good practices.

[newtoajax]

<p> </p><div>This is not working, maybe .value is not being recorded by the "document.getElementById(fName);". How do I get the value to attach to the id. Thnx again.</div><div>var fName=document.getElementById(fName);</div><div>var lName=document.getElementById(lName);</div><div>var Name = fName + " " + lName;</div><div>var address=document.getElementById(address);</div><div>var email=document.getElementById(email);</div><div>var phone=document.getElementById(phone);</div><div>var alertMessage = "";</div>

[justsomeguy]

Should the IDs be quoted or are those variables that contain the actual IDs?

[thescientist]

if you check for errors in your console you will probably find more undefined errors, which as JSG pointed out are most likely being caused by the fact that you need to put quotes around the value's you are using in document.getElementById. have you read about it in the tutorials?http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

[JamesB]

The undefined error could also be because the JS is trying to fetch the HTML element before the HTML document has loaded. That could be solved by putting the <script></script> stuff after the HTML elements you need to fetch,or you could fetch the elements when the page has loaded:

window.onload = function() {	fName=document.getElementById('fName');	lName=document.getElementById('lName');	// etc}

Also you shouldn't be using the .value property when the script loads, use .value when you check the input in validateForm().eg.

if (fName.value == null

[Ingolme]

The undefined error could also be because the JS is trying to fetch the HTML element before the HTML document has loaded. That could be solved by putting the <script></script> stuff after the HTML elements you need to fetch,or you could fetch the elements when the page has loaded:

window.onload = function() {	fName=document.getElementById('fName');	lName=document.getElementById('lName');	// etc}

Also you shouldn't be using the .value property when the script loads, use .value when you check the input in validateForm().eg.

if (fName.value == null

Given the code in the first post, I don't think that's the case, since the elements are being tested inside a function. Remember that the form elements require an ID attribute aside from the name: <input id="fName" name="fName" ... >

[newtoajax]

The form elements do have id="" and same name="". This is an odd bug, firebug is unable to detect any errors or warnings. Thank you everyone, very much.

[JamesB]

Given the code in the first post, I don't think that's the case, since the elements are being tested inside a function.

hmm not sure what you mean. surely the undefined error is due to how the variable is created, and the variables are created outside the function. newtoajax do you have a link to the site? or could you post the latest code you have.

[ShadowMage]

Given the code in the first post, I don't think that's the case, since the elements are being tested inside a function.

hmm not sure what you mean. surely the undefined error is due to how the variable is created, and the variables are created outside the function.

I'm going to have to agree with James on this one. If:var fName=document.getElementById('fName');is outside of a function (ie, in the global space) and the script appears before the element it's trying to reference, the variable fName will be undefined. As James suggested, either the script should be moved to the end of the body or the variable assignments need to be put in an onload handler.

[Ingolme]

Yeah, I see that now. That is a big problem.

[newtoajax]

H.ere is the zip folder

Week_3_Moreira.zip

[JamesB]

move this:

onsubmit="return validateForm()"

from the <input> element to the <form> element, as onsubmit works with form elements. add

id="email"

to your Email <input> element, so that the element can be fetched using the getElementById() function. on line 311, comment out or remove the "return false;", which would have caused the alert() call to not be reached. i see you've moved the variable creations into the function now, that means it's fine to use .value on the end of the getElementById() call.add a .value to the end of these 3 lines:

address=document.getElementById("address");email=document.getElementById("email");phone=document.getElementById("phone");

change "address.value" to "address.length" - the .length property returns the character length of a string change:

if(phone.value==null || phone.value=="")

to

if(phone=="")

change:

if ((fName.value==null || fName.value=="") || (lName.value==null || lName.value==""))

to

if (fName=="" || lName=="")

it would be easier in future if you could post your index.html's source either on this forum in [ code] [ /code] tags, or on a site like pastebin, to save us downloading the file!

[newtoajax]

I am trying to get the page count of visiters. The first alert() message works but nothing else does.Thanks again.

 <script type="text/javascript" language="javascript"> alert("Welcome!");function initPage() {var expireDate = new Date();expireDate.setDate(1); var hitCount = parseInt(cookieVal("pageHit"));hitCount++; document.cookie = "pageHit=" + hitCount + ";path=/;expires=" + expireDate.toDateString();//redirect heredocument.getElementById("pageHits").alert("You have visited this page " + hitCount + "  times."); }//multi cookiesfunction cookieVal(cookieName){var thisCookie = document.cookie.split("="); for (var i=0; i<thisCookie.length; i++){if(cookieName == thisCookie[i].split("=")[0]){return thisCookie[i].split("=")[1]; }}return 0;}</script>    

[Ingolme]

alert() is a method of the window, not of an element. That's why this won't work:

document.getElementById("pageHits").alert("You have visited this page " + hitCount + "  times.");

Alert works like this:

alert("You have visited this page " + hitCount + "  times.");

If you want to write inside an element use the innerHTML property:

document.getElementById("pageHits").innerHTML = "You have visited this page " + hitCount + "  times.";

[newtoajax]

I keep getting this(1.802692175.1317244614.1317275682.1317332290.4) in my fName and lName input box when I reload the page. Please explain. I have to check if a returning user has returned, If so, then I have to redirect them to another page. It works but only in FireFox. thnx again.

 // JavaScript Documentwindow.onload = nameFieldInit; function nameFieldInit(){var fName, lName; var Name = ""; if (document.cookie != ""){fName = document.cookie.split("=")[1];lName = document.cookie.split("=")[1];} document.getElementById("fName").value = lName;document.getElementById("fName").onblur = setCookie; document.getElementById("lName").value = lName;document.getElementById("lName").onblur = setCookie;Name = fName + " " + lName; if (document.cookie == ""){window.location.replace("userRedirect.html"); }} function setCookie(){var expireDay = new Date();exprireDay.setDate(expireDay.getDate() + 1); var fName = document.getElementById("fName").value;var lName = document.getElementById("lName").value;var Name = fName + " " + lName;document.cookie = "Name" + Name + ";path/;expires=" + expireDay.toGMTString();}

[Ingolme]

What is this supposed to do?

if (document.cookie != ""){fName = document.cookie.split("=")[1];lName = document.cookie.split("=")[1];}

[newtoajax]

If cookie has a a value then fName and lName cookie must be split between cookie name and cookie value. Then [1] means fName and lName id.

[Ingolme]

You're cutting the cookie string by the "=" signs, and then assigning the same portion of it to both variables. The specific cookie you're taking that value from could be from any page on your site. If document.cookie looks like this: a=1&b=2&c=3 then the part you're extracting is this: 1&b

[Ingolme]

document.cookie shows a list of cookies in the form of a query string. Look at the tutorial page about cookies to see how W3Schools does it

[newtoajax]

Also, I want to make one cookie that will record my entire form. Do I add all the Id="" elements in-to one cookie or create document.cookie for each element.thnx

[Don E]

When you use document.cookie, the cookies are set only for that particular page; you don't necessarily make a document.cookie for each element because when you create cookies, it gets stored as one big string in document.cookie. If however you mean't store the values for each element when you said create a document.cookie for each element, all you'll do is append to document.cookie each time. So yes, you basically add all the (name of cookie)id="value"(value of cookie) elements into one cookie which is basically document.cookie(for that particular page).

[newtoajax]

so its document.cookie("index.html") = wfName + lName + address + email + phone