|
JavaScript - Function Stops Working With 2nd If Statement, Works Fine Without...
Hey guys, so I'm trying to make a single function that will check to make sure the e-mails in both fields match AND to make sure the e-mail is in proper format. Strangely, with both if statements included the form will return no messages at all. If I comment out the if statement checking for proper format, the if statement to check for matching e-mail works just fine.
I want this all to be in one function because I'm wanting it to be executed onSubmit with the form. Let me know what you guys think, any help is greatly appreciated: Code: <html>
<head>
<script type="text/javascript">
function verifyEmail()
{
var x = document.forms["emailForm"]["enterEmail"].value;
var y = document.forms["emailForm"]["confirmation"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (x != y) {
var msg = "The email addresses entered do not match, please enter matching email addresses";
document.getElementById("error").innerHTML = msg;
return false;
}
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 > = x.length) {
var msg = "Improper e-mail format";
document.getElementById("error").innerHTML = msg;
return false;
}
else {
return;
}
}
</script>
</head>
<body>
<form name="emailForm" onsubmit="return verifyEmail();" method="post">
E-Mail Address: <input type="text" name="enterEmail">
Confirm E-Mail Address: <input type="text" name="confirmation">
<input type="submit" value="Submit"> <span id="error"></span>
</form>
</body>
</html>
Similar TutorialsI have a simple function to display an image when called, but if I try to rewrite the function to take the image as an argument, it stops working. I've looked at other function examples on the web but can't figure out what I am missing. Can anyone help? works: Code: <html>
<script language="JavaScript">
var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>';
function FlashImagesThenWait()
{
document.getElementById("first").innerHTML = ImagePlusSign
}
setTimeout(FlashImagesThenWait, 1500);
</script>
<body>Hello.
<div id="first">
</div>
</body>
</html>
does NOT work : Code: <html>
<script language="JavaScript">
var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>';
function FlashImagesThenWait(z)
{
document.getElementById("first").innerHTML = z
}
setTimeout(FlashImagesThenWait(ImagePlusSign), 1500);
</script>
<body>Hello.
<div id="first">
</div>
</body>
</html>
I'm trying to create a navigation bar with four elements. If the element is currently selected it will have a "red" background image, if it is one of the other 3, it will have a "black" background image. my four tabs are 'timetable, homework, notifications and sport' I tried making 8 functions like the 2 below Code: function setTimeRed()
{
document.getElementById("time").style.ClassName = 'timetable_r';
}
function setTimeBlack()
{
document.getElementById("time").style.ClassName = 'time_r';
}
And then four blocks like this: Code: function changeTimeButton()
{
var timePath = new String();
timePath = document.getElementById("timetable").style.backgroundImage;
if(timePath == "url(assets/img/tabs/time_black.png)" || timePath == "")
{
setTimeRed();
setHomeBlack();
setNotiBlack();
setSportBlack();
}
else {
}
}
finally, my html has this: Code: <div id="tabbar">
<ul id="tabs">
<a href"#" onclick="changeTimeButton()">
<li id="timetable" class="time_b">
<p>Timetable</p>
</li>
</a>
<a href"#" onclick="changeHomeButton()">
<li id="homework" class="home_b">
<p>Homework</p>
</li>
</a>
<a href"#" onclick="changeNotiButton()">
<li id="notifications" class="noti_b">
<p>Notifications</p>
</li>
</a>
<a href"#" onclick="changeSportButton()">
<li id="sport" class="sport_b">
<p>Sport</p>
</li>
</a>
</ul>
</div>
It works once then does nothing. Why, and how would I go about fixing this?? Please help! I have a clock that works onbodyload, however using the below function on the same page, stops my clock even coming up, any help would be great. Code: <script language="JavaScript">
var HAS_EXPIRED = 'Time has Expired!';
var IS_NONE = 'None';
function secondCountdown(s){
if(s){
var timeleft = document.getElementById('timeleft').innerHTML;
if((timeleft == HAS_EXPIRED) || (timeleft == IS_NONE)) return false;
timeleft = timeleft.replace('<font>', '');
timeleft = timeleft.replace('</font>', '');
var time = timeleft.split(":");
var secs = time[2] * 1;
var mins = time[1] * 1;
var hrs = time[0] * 1;
secs += (mins * 60) + (hrs * 3600);
secs -= 1;
if(secs <= 0){
document.getElementById('timeleft').innerHTML = HAS_EXPIRED;
return false;
} else {
hrs = Math.floor(secs/3600);
secs -= (hrs * 3600);
mins = Math.floor(secs/60);
secs -= (mins * 60);
if(hrs < 10) hrs = '0' + hrs;
if(mins < 10) mins = '0' + mins;
if(secs < 10) secs = '0' + secs;
document.getElementById('timeleft').innerHTML = hrs + ':' + mins + ':' + secs;
}
}
setTimeout('secondCountdown(true)',1000);
}
bootloaderAdd('secondCountdown()');
bootloaderOn();
</script>
ok so Code: document.write("Goodbye!");
works but I put ^ that inside a function Code: function SayHello ()
(
document.write("Goodbye!");
)
and it stops working? I know the function call works because when I place some code to display an image in SayHello function, it displays the image. I could use some help getting the following code to work... As is, it works fine in google chrome, but not at all in Internet Explorer 9. If I paste my code into w3schools "tryit" window, it will work great if it has less than 6 rows, any more and I get a generic "ERROR" on the screen. javascript code Code: <script type="text/javascript">
Number.prototype.formatMoney = function(c, d, t){
var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
function getRowCount()
{
return document.getElementById('myTable').rows.length;
}
function changeContent()
{
var lastRow = getRowCount();
var colSum=0;
for(var e=1;e<=lastRow;e++){
var x=document.getElementById('myTable').rows[e].cells;
p1=document.getElementById('p'+e).value;
q1=document.getElementById('q'+e).value;
outint = p1*q1;
var out='<input type="text" value="'+Number(outint).formatMoney(2, '.', ',')+'" disabled="disabled">';
x[3].innerHTML=out;
}
}
</script>
html code Code: <table width="600" border="1"> <tr> <td>Item Name</td> <td>Price per unit</td> <td>Number of Units</td> <td>Total Price</td> </tr> <tr> <td>Item 1</td> <td><input type="text" id="p1" value="8.3930" disabled="disabled"></td> <td><input type="text" id="q1" value="0" onchange="changeContent()"></td> <td><input type="text" id="t1" value="0" disabled="disabled"></td> </tr> <tr> <td>Item 2</td> <td><input type="text" id="p2" value="8.3380" disabled="disabled"></td> <td><input type="text" id="q2" value="0" onchange="changeContent()"></td> <td><input type="text" id="t2" value="0" disabled="disabled"></td> </tr> <tr> <td>Item 3</td> <td><input type="text" id="p3" value="62.3260" disabled="disabled"></td> <td><input type="text" id="q3" value="0" onchange="changeContent()"></td> <td><input type="text" id="t3" value="0" disabled="disabled"></td></tr> <tr> <td>Item 4</td> <td><input type="text" id="p4" value="124.6630" disabled="disabled"></td> <td><input type="text" id="q4" value="0" onchange="changeContent()"></td> <td><input type="text" id="t4" value="0" disabled="disabled"></td></tr> <tr> <td>Item 5</td> <td><input type="text" id="p5" value="1554.4320" disabled="disabled"></td> <td><input type="text" id="q5" value="0" onchange="changeContent()"></td> <td><input type="text" id="t5" value="0" disabled="disabled"></td> </tr> <tr> <td>Item 6</td> <td><input type="text" id="p6" value="2622.6750" disabled="disabled"></td> <td><input type="text" id="q6" value="0" onchange="changeContent()"></td> <td><input type="text" id="t6" value="0" disabled="disabled"></td></tr> <tr> <td>Item 7</td> <td><input type="text" id="p7" value="4748.8650" disabled="disabled"></td> <td><input type="text" id="q7" value="0" onchange="changeContent()"></td> <td><input type="text" id="t7" value="0" disabled="disabled"></td> </tr> <tr> <td>Item 8</td> <td><input type="text" id="p8" value="23087.9330" disabled="disabled"></td> <td><input type="text" id="q8" value="0" onchange="changeContent()"></td> <td><input type="text" id="t8" value="0" disabled="disabled"></td> </tr> </table> *note* the html table is actually made from a php loop pulling items from a database, but for the sake of simpler troubleshooting I made it a static table for posting here. Please help if you can. Thanks I am pretty new to Javascript having a bit of a problem with a website with Google Maps integrated. URL is http://beta.5vanmap.com. JS is in /js/map.js. I have two checkboxes (ccCheck and caccCheck). The basis is when the box is ticked, it overlays a KML onto the map. This is working fine in Chrome, but in FF and IE it doesn't work, IE returns 'ccCheck is Undefined'. The code I am using is in the JS file, the bit it gets stuck at is as follows: Code: document.getElementById('ccCheck').onclick = function() {
if (ccCheck == 1)
{
ccCheck = 0;
ccOverlay.setMap(null);
}
else
{
ccCheck = 1;
ccOverlay.setMap(map);
}
}
If I stick a ccCheck = document.getElementById('ccCheck') within the onclick function (before the if statement), it places the overlay onto the map, but then when I untick the box it just stays there. It's such a simple thing (I think), and must be down to IE being pedantic about declaring the variable properly, the question is how should I be doing this? Thanks and regards Noel Solved
[CODE]<script type="text/javascript" language="Javascript"> <!-- Hide script from older browsers function toggleMenu(currMenu) { if (document.getElementById) { thisMenu = document.getElementById(currMenu).style if (thisMenu.display == "block") { thisMenu.display = "none" } else { thisMenu.display = "block" } return false } else { return true } } // End hiding script --> </script> [CODE] [CODE]<a href="javascript:void(0);" onclick="return toggleMenu('menu3')">Title</a>[CODE] It freezes in Internet Explorer; but works fine in Chrome. Hi all I'm having trouble with my XML news feed being displayed in IE. The JS calls the XML, and displays the relevent data on the homepage. This works beautifully in firefox, but fails completely in IE, what am I doing wrong? The Code for the script follows, and is contained within the <head> of the the HTML; Code:
<script type="text/javascript">
var xmlDoc;
<!--
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
var x=xmlDoc.getElementsByTagName("NEWS");
i=0;
function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
pic=(x[i].getElementsByTagName("PIC")[0].childNodes[0].nodeValue);
document.getElementById("picture2").innerHTML="<img src=" + pic + " />";
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}
//-->
</script>
In FF, the XML is read, and the corresponding data is entered automatically into the HTML document. Everything works perfectly. In IE, nothing seems to happen, no text is displayed and the image is just the broken link icon. I assume I need to modify my ELSE statement somehow, but have no idea what to do! Unfortunately I cannot provide a link to the webpage, it has not been uploaded as it doesn't work yet. Would really appreciate being told where I've gone wrong so I can correct the code myself. Thanks, Dan My website is all up and running and I decided to put a new image viewing script on, I already had a revolving image script showing all my previous work before but the latest script has totally stopped the previous from working. You can view what I mean at www.actioncomputing.co.uk I am using 2 scripts both available on Dynamic Drive they are Lightbox image viewer 2.03a Ultimate Fade-in slideshow (v2.1) If anyone can tell me why this is I would be extremely gratefull. Hi everybody I have a problem I want a header that is a slideshow and use lightbox for other images. No I have this all working but not at the same time. If I use this code in this order only the first script that is the lightbox script works. PHP Code: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); }); </script> If I use this code so I switched the order only the slideshow works: PHP Code: <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); }); </script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> I also tried this: but then they both did not work PHP Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> Can you help me solve this problem so they both work? Hey everyone, I have a page where I call two external javascript files, and they work perfectly when I have all the files on my desktop. But once I transferred all the files into a folder, the scripts stop working. What's going on?! EDIT: Nevermind. I just forgot to relocate my jquery file! hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help I'm (experimenting) writing my own RTE in JavaScript, I'm doing pretty good until it comes to the commands, the execCommand method. Here's what I have so far: Code: function get(editid) {
// IE
if(document.frames[editid].document) return document.frames[editid].document;
else return document.getElementById(editid).contentDocument;
}
function ini(edit) {
get(edit).designMode = "On";
}
function xC(edit, cmnd, arg) {
get(edit).execCommand(cmnd, false, arg);
}
The xC (execute command) function is not working! I've tried so much. Any ideas? Hi There, The following piece of code is working fine in IE6 but not in IE 8: if (Windowvar != null) { Windowvar.close(); } Windowvar= window.open(sUrl, 'static', viewerWinOption, true); To explain the functionality: 1. User clicks on one of the links on page 1 2. Clicking takes user from Page 1 to Page 2 (the transaction page). 3. Along with page 2, another page (Page 3) is opened. 4. User saves the transactions in the Page 2 and he is taken back to page 1 5. User clicks other link in Page 1 and activity in point 2 is repeated along with point 3 The issue is, when User clicks on the link AGAIN(for second transaction) in the Page 1 the Page 3 opens in the same browser window in the IE 6 but in IE 8 it opens in the differenct browser window (which shouldnt be happening) Any help will be appreciated. Regards, Sameer. Hi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() {
$( this ).toggleClass( "closed" );
});
$( "li.closed" ).click(function() {
$( this ).toggleClass( "open" );
});
The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave Hi, i have recently just built a simple website and have started to add some added editions one being the lightbox. i am using dreamweaver cs3 and on a mac laptop, so in safari it works brillaint no problems what so ever. but as soon as you load it in internet explorer the light box opens but it displays a 404 error on the first image of every gallery, on every different profile? if anyone would help that would be fantastic http://www.goodeveningladies.co.uk/profiles.co.uk Code: <a href="../images/lrgimages/adam/AdamLrg.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<img src="../images/Adam.jpg" alt="" width="450" height="200" align="middle" />
<a href="../images/lrgimages/adam/1.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/2.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/3.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/4.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/5.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/AdamLrg.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]"></a>
here is a section of the coding that i use for each image obviously the names have changed and the directories have changed for each profile. any help would be much appreciated. Hi, I've made a web based tool that times how long a web page takes to load in an iframe and today I redesigned it but now it has issues. When I load it in Chrome and Opera the new version works fine but in FF 3.6 and IE 8 only the footer area is displayed. I have added the links below - You'll be able to access the code via your browser's "View page Source" option. URLs: New test (With problem): http://browserspeedtest.camerongray....net/version31/ Old test (Works perfectly): http://browserspeedtest.co.cc Any help is greatly appreciated! Cameron Gray Hi, this is a bit of a long question, but I'm not sure what's relevant, so feel free to ignore the irrelevant bits. I have this function: Code: function searchLocations() {
var found = false;
var input = document.getElementById('autocomplete').value;
var inp = input.toLowerCase();
var count = 0;
map.closeInfoWindow();
for (var j = 0; j < gmarkers.length; j++) {
gmarkers[j].hide();
elabels[j].hide();
var str=gmarkers[j].myname.toLowerCase();
var patt1=inp;
if (str.match(patt1))
{
found = true;
gmarkers[j].show();
var point = gmarkers[j].getPoint();
bounds.extend(point);
elabels[j].show();
count++;
var q=j;
}
}
if (count==1)
{
map.setZoom(15);
myclick(q);
elabels[q].hide();
}
else if (count>1)
{
centerZoom();
}
else
{
alert("No matches found. Please check your spelling or refine your search.");
}
}
which does the following: - checks for matches in the array vs the input from the text box - shows the matching markers on the map - takes note of where the markers are and increases the bounds area to be displayed (this is the var point = gmarkers[j].getPoint(); bounds.extend(point); bit - keeps count of how many matches were made - if it's one match, zooms the map to 15, shows an infowindow - if it's more than one match, fires centerZoom();, another function that either zooms the map in or out (depending on the bounds) so that the matched markers are displayed. Which is all great, as you can see if you type "par" into the search box top right here. The problem is when you type in the second partial match - say "bl" - then it doesn't just use the 3 points from the match, but all the points from the array, meaning that the map zooms out as if it were going to show every marker, even though it only shows a few. So my question (finally) is how can I make sure that the var point = gmarkers[j].getPoint(); bounds.extend(point); bit only picks up the markers that are currently matched? thanks in advance for any suggestions I've got an annoying non-working bit of code: Code: <div id ="messageDiv" style="display:block;">No profile information entered yet</div>
<script type="text/javascript">
function profileInfo() {
var m1 = document.getElementById("marital1").innerHTML.toLowerCase();
var b1 = document.getElementById("bodytype1").innerHTML.toLowerCase();
var e1 = document.getElementById("ethnic1").innerHTML.toLowerCase();
var o1 = document.getElementById("occupation1").innerHTML;
var w1 = document.getElementById("website1").innerHTML.toLowerCase();
var s1 = document.getElementById("smoker1").innerHTML.toLowerCase();
var d1 = document.getElementById("drinker1").innerHTML.toLowerCase();
var r1 = document.getElementById("religion1").innerHTML.toLowerCase();
if ((m1 == "no answer") && (b1 == "no answer") && (e1 == "no answer") && (o1 == "") && (w1 == '<a href=""></a>') && (s1 == "no answer") && (d1 == "no answer") && (r1 == "no answer")){
document.getElementById("messageDiv").style.display="block";
}
else if ((m1 == "no answer") && (b1 == "no answer") && (e1 == "no answer") && (o1 == "") && (w1 == '<a href="http://">http://</a>') && (s1 == "no answer") && (d1 == "no answer") && (r1 == "no answer")){
document.getElementById("messageDiv").style.display="block";
}
else {
document.getElementById("messageDiv").style.display="none";
}
}
profileInfo()
</script>
The first part up to before the 'else if' works. but if the 'w1' has '<a href="http://">http://</a>' it still doesnt return true and display the DIV block?? |
|||||||