www.webdeveloper.com
Results 1 to 9 of 9

Thread: Simple alert not working

  1. #1
    Join Date
    Aug 2013
    Posts
    4

    Question Simple alert not working

    Well I have a somewhat lengthy Javascript that I've written myself, with one component that I borrowed from somewhere else online, and all is well except for one thing: at the top of the script I define a variable named "glitch" to 0. Throughout the script, as it checks the form, if an error occurs it sets the variable glitch to 1 and throws an alert. This works. At the very bottom of the script I want to know if a glitch was found so that I can or cannot set a cookie, and it doesn't work.

    In fact, unless I comment out portions of the code I can't get the if statement OR the alert(glitch) above it at the very bottom to work. It just ignores it. Why does this happen? Here's my code. I'm sorry, this is probably a beast to look at. It seems that the IF statement at the bottom is totally neglected. It never returns "true" but the form can still be submitted so long as all the fields are filled out properly.

    Code:
    <script language="JavaScript" type="text/javascript">
    	function checkForm() {
    
    		var glitch = 0;
    
    		var div1 = document.getElementById("divStartTime");
    		var div2 = document.getElementById("divEndTime");
    		var div3 = document.getElementById("divFirstName");
    		var div4 = document.getElementById("divLastName");
    		var div5 = document.getElementById("divPhoneNumber");
    		var div6 = document.getElementById("divEmailAddress");
    
    		div1.style.color = "#000000";
    		div2.style.color = "#000000";
    		div3.style.color = "#000000";
    		div4.style.color = "#000000";
    		div5.style.color = "#000000";
    		div6.style.color = "#000000";
    
    		var thisLocation = <cfoutput>#id#</cfoutput>;
    		var timeAvailable = 1;
    		var thisDay = "<cfoutput>#DateFormat(today, "DDDD")#</cfoutput>";
    	
    		var startTime = document.forms["calendarmain"]["startTime"].value;
    		var endTime   = document.forms["calendarmain"]["endTime"].value;
    
    		if (eval(startTime) > 0 && eval(endTime) > 0) {
    			if (eval(startTime) >= eval(endTime)) {
    				alert("The Start time must be earlier than the End time.");	
    				div1.style.color = "red";
    				div2.style.color = "red";
    				glitch = 1;
    				return false;
    			}
    		} else {
    			if (! eval(startTime) && eval(endTime) > 0) {
    				div1.style.color = "red";
    				alert("You must choose a Start time for your lesson.");
    				glitch = 1;
    				return false;
    			} else if (! eval(endTime) && eval(startTime) > 0) {
    				div2.style.color = "red";
    				alert("You must choose an End time for your lesson.");
    				glitch = 1;
    				return false;
    			} else {
    				div1.style.color = "red";
    				div2.style.color = "red";
    				alert("You must choose a value for both Start and End time of your lesson.");
    				glitch = 1;
    				return false;
    			}
    		}
    		<cfoutput query="getSchedule">
    		<cfset xTime = xTime + 1>
    		var xTime#xTime#A = #starttime#;
    		var xTime#xTime#B = #endTime#;
    		</cfoutput>
    		<cfset xTime = xTime + 1>
    		<cfif xTime eq 1>
    		var xTime1A = 0;
    		var xTime1B = 0;
    		</cfif>
    		if (thisLocation == 2 && thisDay == "Thursday" || thisLocation == 1) {
    			for (x = 1; x < <cfoutput> #xTime#</cfoutput>; x++) {
    				if (eval(startTime) < eval("xTime" + x + "A") && eval(endTime) < eval("xTime" + x + "A") || eval(startTime) > eval("xTime" + x + "B") && eval(endTime) > eval("xTime" + x + "B") || eval(startTime) < eval("xTime" + x + "A") && eval(endTime) == eval("xTime" + x + "A") || eval(startTime) == eval("xTime" + x + "B") && eval(endTime) > eval("xTime" + x + "B")) {
    					timeAvailable = 1;
    				} else {
    					timeAvailable = 0;
    					alert("Sorry, but the time you selected is already reserved. Please choose a time that is not blocked out in the schedule on the right.");
    					glitch = 1;
    					return false;
    					break;
    				}
    			}
    		} else {
    			timeAvailble = 0;
    			alert("Lessons in New York can only be booked on Thursdays.");
    			glitch = 1;
    			return false;
    		}
    
    		var startValue = "<cfoutput>#DateFormat(today, "dd.mm.yyyy")#</cfoutput>, " + startTime.replace(/.25/g, "").replace(/.5/g, "").replace(/.75/g, "") + ":00:00";
    
    		var re = /[.:]|, /,
    			date1 = startValue.split(re).map(Number),
    			date2 = "<cfoutput>#DateFormat(Now(), "dd.mm.yyyy")#</cfoutput>, <cfoutput>#TimeFormat(Now(), "HH")#</cfoutput>:00:00".split(re).map(Number);
    
    		var diffMs = Date.UTC( date1[2], date1[1] - 1, date1[0], date1[3], date1[4], date1[5] ) - Date.UTC( date2[2], date2[1] - 1, date2[0], date2[3], date2[4], date2[5] );
    		var hours = diffMs / (3600 * 1000);
    
    		if (hours < 24) {
    			alert("You must book your lesson at least 24 hours in advance.");
    			glitch = 1;
    			return false;
    		} else if (hours > 1080) {
    			alert("Please call our school to book a lesson more than 6 weeks in advance. The phone number is (XXX)-XXX-XXXX. Thank you.");
    			glitch = 1;
    			return false;
    		}
    
    		var nameFirst = document.forms["calendarmain"]["firstName"].value;
    		    nameFirst = nameFirst.replace(/\s/g, "")
    
    		if (! nameFirst.length) {
    			document.forms["calendarmain"]["firstName"].value = "";
    			div3.style.color = "red";
    			alert("Please enter your First Name.");
    			glitch = 1;
    			return false;
    		}
    
    		var nameLast = document.forms["calendarmain"]["lastName"].value;
    		    nameLast = nameLast.replace(/\s/g, "");
    
    		if (! nameLast.length) {
    			document.forms["calendarmain"]["lastName"].value = "";
    			div4.style.color = "red";
    			alert("Please enter your Last Name.");
    			glitch = 1;
    			return false;
    		}
    
    		var phone = document.forms["calendarmain"]["phoneNumber"].value;
    		    phone = phone.replace(/\s/g, "");
    
    		if (! phone.length) {
    			document.forms["calendarmain"]["phoneNumber"].value = "";
    			div5.style.color = "red";
    			alert("Please enter your Phone Number.");
    			glitch = 1;
    			return false;
    		}
    
    		var email  = document.forms["calendarmain"]["emailAddress"].value;
    		var atpos  = email.indexOf("@");
    		var point  = email.lastIndexOf(".");
    
    		if (atpos < 1 || point < atpos + 2 || dotpos + 2 >= email.length) {
    			document.forms["calendarmain"]["emailAddress"].value = "";
    			div6.style.color = "red";
    			alert("Please enter your Email Address.");
    			glitch = 1;
    			return false;
    		}
    
    		alert(glitch);
    
    		if (glitch) {
    			return false;
    		} else {
    			document.cookie = 'JSTEST=1; path=/;';
    			return true;
    		}
    }
    </script>
    There's a little bit of ColdFusion in there which is run server-side. Essentially though, the very last IF statement above is totally ignored, along with the alert(glitch) above it. However, the script, otherwise, performs perfectly and runs very smoothly.

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    the very last IF statement above is totally ignored, along with the alert(glitch) above it.
    Any error messages in the console?

  3. #3
    Join Date
    Jun 2008
    Posts
    106
    Always check your error console.

    You have an error here
    Code:
    var thisLocation = < cfoutput > #id# < /cfoutput>;
    And here
    Code:
    var thisDay = "<cfoutput>#DateFormat(today, "DDDD")#</cfoutput > ";
    And more I'm sure. Check your error console.

  4. #4
    Join Date
    Aug 2013
    Posts
    4
    I'm not really using a console, I'm coding this in Notepad. I'm doing this more as a favor for my old company and haven't been into hardcore programming for several years, so I don't have any robust development software. (Would you recommend something?) Anyway, you may be getting errors because you're seeing some server-side code embedded in the script so at face value it will read as broken. Here it is, same code, but with the server-side portion rendered into the script. Again, the script works except for the last part. I'm very curious why... and I guess this is more of a philosophical question that you might be able to answer without actually looking at the code. And the question is: why would an alert() not run assuming it was coded properly? I would imagine the code preceding it could have an impact on its ability to run if there were issues with that. But what if the code before it works? What if it does the job it's supposed to do, very precisely? How can then an alert() function not work? Why?

    Anyway, here's the code, re-rendered. I've highlighted in bold/italics at the bottom the part that is neglected, yet everything above it works like a charm.

    Code:
    <script language="JavaScript" type="text/javascript">
        function checkForm() {
    
            var glitch = 0;
    
            var div1 = document.getElementById("divStartTime");
            var div2 = document.getElementById("divEndTime");
            var div3 = document.getElementById("divFirstName");
            var div4 = document.getElementById("divLastName");
            var div5 = document.getElementById("divPhoneNumber");
            var div6 = document.getElementById("divEmailAddress");
    
            div1.style.color = "#000000";
            div2.style.color = "#000000";
            div3.style.color = "#000000";
            div4.style.color = "#000000";
            div5.style.color = "#000000";
            div6.style.color = "#000000";
    
            var thisLocation = 1;
            var timeAvailable = 1;
            var thisDay = "Sunday";
        
            var startTime = document.forms["calendarmain"]["startTime"].value;
            var endTime   = document.forms["calendarmain"]["endTime"].value;
    
            if (eval(startTime) > 0 && eval(endTime) > 0) {
                if (eval(startTime) >= eval(endTime)) {
                    alert("The Start time must be earlier than the End time.");    
                    div1.style.color = "red";
                    div2.style.color = "red";
                    glitch = 1;
                    return false;
                }
            } else {
                if (! eval(startTime) && eval(endTime) > 0) {
                    div1.style.color = "red";
                    alert("You must choose a Start time for your lesson.");
                    glitch = 1;
                    return false;
                } else if (! eval(endTime) && eval(startTime) > 0) {
                    div2.style.color = "red";
                    alert("You must choose an End time for your lesson.");
                    glitch = 1;
                    return false;
                } else {
                    div1.style.color = "red";
                    div2.style.color = "red";
                    alert("You must choose a value for both Start and End time of your lesson.");
                    glitch = 1;
                    return false;
                }
            }
            
            var xTime1A = 9.00;
            var xTime1B = 12.50;
            
            var xTime2A = 12.50;
            var xTime2B = 14.50;
            
            var xTime3A = 15.00;
            var xTime3B = 17.00;
            
            if (thisLocation == 2 && thisDay == "Thursday" || thisLocation == 1) {
                for (x = 1; x < 4; x++) {
                    if (eval(startTime) < eval("xTime" + x + "A") && eval(endTime) < eval("xTime" + x + "A") || eval(startTime) > eval("xTime" + x + "B") && eval(endTime) > eval("xTime" + x + "B") || eval(startTime) < eval("xTime" + x + "A") && eval(endTime) == eval("xTime" + x + "A") || eval(startTime) == eval("xTime" + x + "B") && eval(endTime) > eval("xTime" + x + "B")) {
                        timeAvailable = 1;
                    } else {
                        timeAvailable = 0;
                        alert("Sorry, but the time you selected is already reserved. Please choose a time that is not blocked out in the schedule on the right.");
                        glitch = 1;
                        return false;
                        break;
                    }
                }
            } else {
                timeAvailble = 0;
                alert("Lessons in New York can only be booked on Thursdays.");
                glitch = 1;
                return false;
            }
    
            var startValue = "04.08.2013, " + startTime.replace(/.25/g, "").replace(/.5/g, "").replace(/.75/g, "") + ":00:00";
    
            var re = /[.:]|, /,
                date1 = startValue.split(re).map(Number),
                date2 = "02.08.2013, 15:00:00".split(re).map(Number);
    
            var diffMs = Date.UTC( date1[2], date1[1] - 1, date1[0], date1[3], date1[4], date1[5] ) - Date.UTC( date2[2], date2[1] - 1, date2[0], date2[3], date2[4], date2[5] );
            var hours = diffMs / (3600 * 1000);
    
            if (hours < 24) {
                alert("You must book your lesson at least 24 hours in advance.");
                glitch = 1;
                return false;
            } else if (hours > 1080) {
                alert("Please call the school to book a lesson more than 6 weeks in advance. The phone number is (XXX)-XXX-XXXX. Thank you.");
                glitch = 1;
                return false;
            }
    
            var nameFirst = document.forms["calendarmain"]["firstName"].value;
                nameFirst = nameFirst.replace(/\s/g, "")
    
            if (! nameFirst.length) {
                document.forms["calendarmain"]["firstName"].value = "";
                div3.style.color = "red";
                alert("Please enter your First Name.");
                glitch = 1;
                return false;
            }
    
            var nameLast = document.forms["calendarmain"]["lastName"].value;
                nameLast = nameLast.replace(/\s/g, "");
    
            if (! nameLast.length) {
                document.forms["calendarmain"]["lastName"].value = "";
                div4.style.color = "red";
                alert("Please enter your Last Name.");
                glitch = 1;
                return false;
            }
    
            var phone = document.forms["calendarmain"]["phoneNumber"].value;
                phone = phone.replace(/\s/g, "");
    
            if (! phone.length) {
                document.forms["calendarmain"]["phoneNumber"].value = "";
                div5.style.color = "red";
                alert("Please enter your Phone Number.");
                glitch = 1;
                return false;
            }
    
            var email  = document.forms["calendarmain"]["emailAddress"].value;
            var atpos  = email.indexOf("@");
            var point  = email.lastIndexOf(".");
    
            if (atpos < 1 || point < atpos + 2 || dotpos + 2 >= email.length) {
                document.forms["calendarmain"]["emailAddress"].value = "";
                div6.style.color = "red";
                alert("Please enter your Email Address.");
                glitch = 1;
                return false;
            }
    
            alert(glitch);
            return false;
    
            if (glitch) {
                return false;
            } else {
                document.cookie = 'JSTEST=1; path=/;';
                return true;
            }
    }
    </script>
    Thanks for taking the time to look at this.

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,271
    It's not possible to test your script without HTML.
    Open your browser console (with development tolls) and see the javascript errors or display many
    if (window.console) console.log(someVariable); in your code to make tests...

  6. #6
    Join Date
    Aug 2013
    Posts
    4
    Oh wow, that worked! Thank you! Something very simple... the variable "dotpos" was not defined. It's located, of course, directly above the code that isn't working. Defining it made everything function 100% correctly. Thank you! And thanks for informing me about the console. Good to know!

  7. #7
    Join Date
    Jun 2008
    Posts
    106
    I obviously can't run your code since I don't have the html or server-side code for it, but I can't spot any blazing errors.

    You should use your error console (Ctrl+Shift+J in Firefox/Chrome) and possibly even use a debugger like Firebug if you're on Firefox (or another debugger if on a different browser).

    As to why an alert wouldn't fire assuming the code was proper, there are 2 reasons:
    • 1- The DOM doesn't exist (alert is a DOM method, NOT a JavaScript native function). I'm assuming your script runs after the DOM is loaded so that shouldn't be a problem.
    • 2- The alert was re-defined, which shouldn't be a problem in your case.


    Another thing you could try is moving the alert upwards in the code until it fires, then you can somewhat pinpoint where it stops working.
    Try moving it up each time before an if () expression until the alert fires.



    EDIT: Heh, I see you got it working just before I posted. Well... glad it works anyway. Yeah, error console is the most important tool along with a powerful debugger.

  8. #8
    Join Date
    Aug 2013
    Posts
    4
    I appreciate the response! I got rid of the "glitch" functionality altogether because it wasn't necessary in the end. And yes, I'm using Firefox with the developer toolkit that (I believe) comes with it. It spotted the JS error. Thanks again

  9. #9
    Join Date
    Jun 2008
    Posts
    106
    I use Notepad++ by the way. I love that program. I use the font Consolas in it, but Courier is good too.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles