JavaScript - Javascript Display Function Only Half Works
Hey guys, I'm trying to make a function that will display certain elements when a paragraph is clicked. As of right now, the function is called, and only the first line gets executed properly. The rest don't work. $postCount is a counter variable setup by a for loop that it is in. When I view source, it is working properly.
Code: function newComment".$postCount."() { document.getElementById('postComment$postCount').style.display = 'none'; document.getElementById('newCommentProfilePicture$postCount').style.display = ''; document.getElementById('commentBox$postCount').style.display = ''; document.getElementById('submitComment$postCount').style.display = ''; document.getElementById('addCommentContainer$postCount').style.display = ''; document.getElementById('commentBox$postCount').rows = '3'; } PHP Code: echo "<div class='viewComment' id='viewCommentButton".$postCount."'> <div class='leftCommentControl'>"; if ($numComments > 0) { echo "<p class='viewCommentLink' id='viewCommentLink".$postCount."' onclick='showComment".$postCount."()' onmouseover=\"this.style.textDecoration='underline'; this.style.cursor='pointer'\" onmouseout=this.style.textDecoration='none'> View ".$numComments." Hidden Comments!</p>"; } echo "</div> <div class='rightCommentControl'> <p class='postComment' id='postComment".$postCount."' onclick='newComment".$postCount."()' onmouseover=\"this.style.textDecoration='underline'; this.style.cursor='pointer'\" onmouseout=this.style.textDecoration='none'>Add Comment</p> </div> </div> <div class='addCommentContainer' id='addCommentContainer".$postCount."' style='display: none'> <form action='processComment.php?userid=".$_SESSION['userid']."&postid=".$row['postid']."&sentFrom=$currentPage' method='POST'> <img class='newCommentProfilePicture id='newCommentProfilePicture".$postCount."' src='uploadPic/mini".$_SESSION['picture']."' style='display: none'></img> <textarea id='commentBox".$postCount."' class='commentTextArea' name='commentBox' rows='1' cols='49' onfocus='newComment".$postCount."()'></textarea> <input type='submit' class='button' id='submitComment".$postCount."' name='submit' ALT='Submit button' value='Comment' style='display: none'> </form> </div> </div> </div>"; Similar TutorialsHi. I am having trouble getting my code to validate for my speed/distance calculator. I have 2 input prompts: 1 for hours and 1 for minutes. The issue is I can put a number for hours (e.g 7) and W for minutes and the result will display distance is NaN, whereas I am expecting it to alert user to input a valid number. The same issue applies if I switch the order of isNan(hours) and isNaN(mins) If you have even the slightest idea of what I have done wrong, or what I am missing I will truly appreciate the input. Thanks! Code: <html> <head> <title>Sound Travel Calculator</title> <script type="text/javascript"> // ?????????????????????????????????????????????????????????????????????????????????????????????????????????????? // the program works pretty well except if i put, lets say 7 hours and w mins then it will say the distance traveled is NaN. but it should be re-prompting to enter hours and mins. It doesn't matter if I switch the order of isNan(hours) and isNaN(mins) // ?????????????????????????????????????????????????????????????????????????????????????????????????????????????? // Setting our variables based on user input var hours = 0; var mins = 0; var m_per_secs = 340; alert("Speed of Sound \n\nAt Sea Level Sound Travels At 340 Metres Per Second \n\nIf You Would Like To Know How many Kilometres sound Will Travel In A Given Time, Click OK"); hours = prompt("Please Enter Hours (If less than 1 hour, just type 0)"); mins = prompt("Please Enter Minutes"); // Validating input for a number less than zero or an not a number while ((isNaN(hours)) || (isNaN(mins)) && (hours < 0) || (mins < 0)) { alert("Please enter a numeric value, zero or greater"); hours = prompt("Please Enter Hours (If less than 1 hour, just type 0)"); mins = prompt("Please Enter Minutes"); } // if there is no input, the value is set to zero if (hours =="") { hours = 0; } if (mins =="") { mins = 0; } // Calculations dist = (((parseFloat(hours)) * 60 * 60) + (parseFloat(mins * 60)) * parseFloat(m_per_secs) / 1000) // Output our calculation alert("The Distance of Sound Travelled is " + (dist) + " Kilometres"); //end program </script> </head> <body> </body> </html> hi, i got this javascript function which run perfectly in IE but does not work in Mozilla. Any idea ? function Changed() { var theGridView = document.getElementById('MainContent_GridViewRDR1_Hidden'); var sum = 0; var total = 0; var totalFinal = 0; for (var i = 0; i < theGridView.rows.length; i++) { var csValue = document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + ''); var pcsValue = document.getElementById('MainContent_GridViewRDR1_Hidden_PCSTxt_' + i + ''); if (csValue.value != '') { if (pcsValue.value != '') { alert('Pcs already have value') document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + '').innerText = ''; break; } if (isNaN(csValue.value)) { alert('Please enter number') document.getElementById('MainContent_GridViewRDR1_Hidden_TotalPriceTxt_' + i + '').innerText = 0; document.getElementById('MainContent_TextBox1').innerText = 0; document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + '').innerText = 0; break; } var unitPriceValue = theGridView.rows(i + 1).cells(7).innerText; var unitUOM = theGridView.rows(i + 1).cells(5).innerText; sum = (parseFloat(csValue.value) * parseFloat(unitPriceValue) * parseFloat(unitUOM)).toString(); sum = roundVal(sum); document.getElementById('MainContent_GridViewRDR1_Hidden_TotalPriceTxt_' + i + '').innerText = sum; total += sum; total = roundVal(total); document.getElementById('MainContent_TextBox1').innerText = total; } else { sum = 0; } } total = roundVal(total); totalFinal += total document.getElementById('MainContent_TextBox1').innerText = totalFinal; } Hi I am not really sure where to start with this as my function works perfect in IE 6. However when I select one of my categories and hit submit in Firefox or IE7 or 8 nothing happens. No error message. Just nothing. How can I get this working for firefox and IE7/8? Code: <script language="JavaScript"> var categories=[]; var categorieslist=[]; var thecategories=[]; var ItemDetails=[]; var selDate=[]; var content=[]; var imagePaths=[]; var art=[]; var aTheDates=[]; var aTheYear=[]; var catDM=" "; var catUrl=""; var startposition=0; var theImage=""; var pageDectect=0; var thepage=0; var pc=0; var starty=0; var pagenumber=0; var filteredlist="<ul class='press-items'>"; function changeFilter(){ var selCategory=document.getElementById("browsetopic").value; //alert(selCategory + " aha"); var selYear=document.getElementById("browseyear").value.substring(2,4); var selMonth=document.getElementById("browsemonth").value; //var selDate=document.getElementById("browsemonth").value + "/" + document.getElementById("browseyear").value.substring(2,4); //alert(pagenumber); for(pagenumber;pagenumber<art.length;pagenumber++){ //alert(selDate + "=" + aTheDates[pagenumber]); //alert(selYear + "=" + aTheYear[pagenumber]); //alert(selCategory + "=" + categories[pagenumber]); if(((selCategory=="nofilter"||categories[pagenumber]==selCategory))&&(selYear==aTheYear[pagenumber]||selYear=="00")&&(selMonth==aTheDates[pagenumber]||selMonth=="00")){ filteredlist=filteredlist+art[pagenumber]; } } filteredlist=filteredlist+"</ul>"; //alert(filteredlist); document.getElementById("theid").innerHTML=filteredlist; filteredlist="<ul class='press-items'>"; pagenumber=0; } </script> And the button Code: <a href="javascript:changeFilter();"><img style=" float: left; margin-top: 0px;" class="submit" src="/images/submit.gif" /></a> <?xml version="1.0" encoding="[CONTENT_ENCODING/]"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="[LANG_CODE/]" lang="[LANG_CODE/]" dir="[BASE_DIRECTION/]"> <head> <meta http-equiv="Content-Type" content="[CONTENT_TYPE/]" /> <title>Micro Customer Care</title> <style type="text/css"> body { padding:0; margin:0; } </style> [STYLE_SHEETS/] <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="css/ie5-6.css"/> <![endif]--> <script src="js/chat.js" type="text/javascript" charset="UTF-8"></script> <script src="js/lang/[LANG_CODE/].js" type="text/javascript" charset="UTF-8"></script> <script src="js/config.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> // <![CDATA[ function OnSubmit() { //alert("Ankit"); document.getElementById('loginForm').action = "formData.php"// Second target document.getElementById('loginForm').target = "iframe2"; // Open in a iframe document.getElementById('loginForm').submit(); document.getElementById('loginForm').action = "[LOGIN_URL/]"// Second target document.getElementById('loginForm').target = "iframe1"; // Open in a iframe document.getElementById('loginForm').submit(); return true; } function initializeLoginPage() { document.getElementById('userNameField').focus(); if(!ajaxChat.isCookieEnabled()) { var node = document.createElement('div'); var text = document.createTextNode(ajaxChatLang['errorCookiesRequired']); node.appendChild(text); document.getElementById('errorContainer').appendChild(node); } } ajaxChatConfig.sessionName = '[SESSION_NAME/]'; ajaxChatConfig.cookieExpiration = parseInt('[COOKIE_EXPIRATION/]'); ajaxChatConfig.cookiePath = '[COOKIE_PATH/]'; ajaxChatConfig.cookieDomain = '[COOKIE_DOMAIN/]'; ajaxChatConfig.cookieSecure = '[COOKIE_SECURE/]'; ajaxChat.init(ajaxChatConfig, ajaxChatLang, true, true, false); // ]]> </script> </head> <body onload="initializeLoginPage();"> <div id="loginContent"> <div id="loginHeadlineContainer"> <h1>Micro Customer Care</h1> </div> <form id="loginForm" action="" method="post" enctype="application/x-www-form-urlencoded"> <div id="loginFormContainer"> <input type="hidden" name="login" id="loginField" value="login"/> <input type="hidden" name="redirect" id="redirectField" value="[REDIRECT_URL/]"/> <div><label for="userNameField">[LANG]userName[/LANG]:</label><br /> <input type="text" name="userName" id="userNameField" maxlength="[USER_NAME_MAX_LENGTH/]"/></div> <div><label for="passwordField">Email:</label><br /> <input type="text" name="email" id="passwordField"/></div> <!--<div><label for="channelField">[LANG]channel[/LANG]:</label><br /> <select name="channelName" id="channelField">[CHANNEL_OPTIONS/]</select></div> <div><label for="languageSelection">[LANG]language[/LANG]:</label><br /> <select id="languageSelection" name="lang" onchange="ajaxChat.switchLanguage(this.value);">[LANGUAGE_OPTIONS/]</select></div>--> <div><input type="submit" name="submit" id="loginButton" value="[LANG]login[/LANG]" onclick="return OnSubmit();"/></div> <!--<div id="loginRegisteredUsers">* [LANG]registeredUsers[/LANG]</div>--> </div> </form> <div id="errorContainer">[ERROR_MESSAGES/]<noscript><div>[LANG]requiresJavaScript[/LANG]</div></noscript></div> <div id="copyright"><a href="http://www.microtechnologies.net/">Micro</a> © <a href="http://www.microtechnologies.net/">Microtechnologies.net</a></div> </div> </body> </html> Hi friends.. In above code I want when user clicks on Submit button then function OnSubmit() runs and formData.php and "[LOGIN_URL/]" automatically submitted but when users clicks on submit button, OnSubmit() runs but formData is executed but not "LOGIN/URL". Even it not give any errors like ""LOGIN/URL" file not found" etc. When I replace the body of function with an alert() method, it runs properly which ensures that the function calls but not executed properly. Can anyone tell what is wrong in above code???? Please help.... Thanks in advance... Hi, I have PHP application and use javascript to download a file that is stored in the application. It works perfectly in FF but does not work in IE8. It does not even give an error. Below is the javascript code Code: function download(href) { document.location.href = href; } ---------------------------- function checkfile_newsletter() { document.getElementById('spn_msg').innerHTML = ''; if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { str = xmlhttp.responseText; if(str == "active") { try { //document.getElementById('anchor_nl2').click(); obj = document.getElementById('anchor_nl2'); if (obj.click) { obj.click(); } else if(document.createEvent) { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); var allowDefault = anchorObj.dispatchEvent(evt); } } catch(e) {} return false; } document.getElementById('spn_msg').innerHTML = str; } } var url = document.getElementById('hdn_contextpath').value + "index.php/download/checknewsletter/" + document.getElementById('sel_year').options[document.getElementById('sel_year').selectedIndex].value + "/" + document.getElementById('sel_month').options[document.getElementById('sel_month').selectedIndex].value + "/none/" + new Date().getTime() + '/'+ Math.random();; xmlhttp.open("GET",url,true); xmlhttp.send(url); alert(url); } The PHP code that triggers the above functions is as below PHP Code: <td> <select id="sel_month" name="sel_month" onchange="changepath();"> <?php $ctr = 1; foreach($arr_month as $month) { echo "<option value='".($ctr)."' ".($ctr++ == $curr_month ? "selected" : "")." >$month</option>"; } ?> </select> <select id="sel_year" name="sel_year" onchange="changepath();"> <?php for($ctr = $curr_year; $ctr >= $start_year; $ctr--) { echo "<option value='$ctr' ".($ctr == $curr_year ? "selected='selected'" : "").">$ctr</option>"; } ?> </select> <a id="anchor_nl2" href="<?php echo $this->config->item('base_url'); ?>index.php/download/newsletter2/<?php echo $curr_year; ?>/<?php echo $curr_month; ?>" onclick="download(this.href); "></a> <input type="button" id="btn_get" name="btn_get" value="Retrieve the Newsletter" onclick="checkfile_newsletter(); "> <input type="hidden" id="hdn_nl2_path" name="hdn_nl2_path" value="<?php echo $this->config->item('base_url'); ?>index.php/download/newsletter2/" /> <br/> <span id="spn_msg" class="display_msg"></span> I tried to debug it with alert but it goes to the checkfile_newsletter(); function but does not trigger the alert in download(this.href); when run on IE8 but in FF it works properly. Please help me to resolve this. Thanks Hi This is the script i am using and at the moment it only makes the greyscale image but does not fade to colour on mouseover. Here is the site of the original code:http://webdesignerwall.com/demo/html5-grayscale/ Just Viewsource for the code. I am also trying to integrate this into my website and have no idea how to set the target image. Can anyone help with this please? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML5 & jQuery - Grayscale Image Hover</title> <style type="text/css"> body { background: #fff; color: #000; font: 14px/140% Arial, Helvetica, sans-serif; margin: 40px 0; } a { text-decoration: none; color: #86AEBB; } img { border: none; } h2 { font: bold 14px/110% Arial, Helvetica, sans-serif; margin: 0 0 30px; padding: 0 0 20px; color: #999; border-bottom: solid 1px #ccc; clear: both; } h3 { font: bold 16px/120% Arial, Helvetica, sans-serif; margin: 0; } #pagewrap { width: 948px; margin: 0 auto; } .item { width: 296px; margin: 0 0 30px 30px; float: left; } .item.first { clear: left; margin-left: 0; } .item img { opacity:0; } </style> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> // $(".item img").css({"display":"none"); // On window load. This waits until images have loaded which is essential $(window).load(function(){ // Fade in images so there isn't a color "pop" document load and then on window load $(".item img").animate({opacity:1},500); // clone image $('.item img').each(function(){ var el = $(this); el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){ var el = $(this); el.parent().css({"width":this.width,"height":this.height}); el.dequeue(); }); this.src = grayscale(this.src); }); // Fade image $('.item img').mouseover(function(){ $(this).parent().find('img:first').stop().animate({opacity:1}, 1000); }) $('.img_grayscale').mouseout(function(){ $(this).stop().animate({opacity:0}, 1000); }); }); // Grayscale w canvas method function grayscale(src){ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var imgObj = new Image(); imgObj.src = src; canvas.width = imgObj.width; canvas.height = imgObj.height; ctx.drawImage(imgObj, 0, 0); var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); for(var y = 0; y < imgPixels.height; y++){ for(var x = 0; x < imgPixels.width; x++){ var i = (y * 4) * imgPixels.width + x * 4; var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; imgPixels.data[i] = avg; imgPixels.data[i + 1] = avg; imgPixels.data[i + 2] = avg; } } ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); return canvas.toDataURL(); } </script> </head> <body> <div id="pagewrap"> <h1>HTML5 & jQuery Grayscale Demo</h1> <h2>Tutorial by <a href="http://www.webdesignerwall.com">Web Designer Wall</a> (<a href="http://www.webdesignerwall.com/tutorials/html5-grayscale-image-hover/">read article</a>). Coding by <a href="http://darcyclarke.me">Darcy Clarke</a>.</h2> <div class="item first"> <a href='http://127.0.0.1/web/Msapcalcmainsite/Mainpage.html'><img src="http://127.0.0.1/web/Msapcalcmainsite/Numbers.png"></a> <h3>Themify</h3> </div> <div class="item"> <a href="http://icondock.com"><img src="http://127.0.0.1/web/Msapcalcmainsite/Numbers.png"></a> <h3>IconDock</h3> </div> </div> </body> </html> Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed? I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you. Broken down into parts I think I need to do the following: a) Standard HTML form with drop downs etc and submit b) Hidden divs c) Submission process locally to javascript function to determine which product to show/hide d) Javascript function that makes the decision e) Javascript that hides/shows products Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks! cheers frank Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript"> function loadXMLDoc2(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> <head> <body> <?php $con = mysql_connect("localhost","user","password"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("mydb", $con); $result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}' ORDER BY theme DESC"); while($row = mysql_fetch_array($result)){ echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > '; } echo '<br /><br /> <div id="txtHint"><div> <br /> <br />'; mysql_close($con); ?> And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? 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, 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 Hi there, I've modified some code I found with a single variable & function to not allow certain keyboard input from a form (I eventually want this info to go into a cookie). I made two variables & functions; one which would not allow text, and one which would not allow numbers. The (new) text variable/function works fine, but the (modified) number variable/function only disallows the numbers 8 & 9. Please look at my code, try it (it doesn't work in IE8 or Firefox), and let me know how to fix it. Thanks, mitchellA PS: this is my first posting and I'm not sure I've followed the rules properly. Code: <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Character Removal Test - by mitchellA</title> <script language="javascript" type="text/javascript"> /* Visit http://www.yaldex.com/ for full source code and get more free JavaScript, CSS and DHTML scripts! */ /* This script has been heavily modified from the original by mitchellA. */ <!-- Begin var only_t = /[$\\@\\\#\%\^\&\*\(\)\[\]\+\ \{\}\`\~\=\|\/\?\.\,\<\>\'\"\!\:\;\0\1\2\3\4\5\6\7\8\9]/; var only_n = /[$\\@\\\#\%\^\&\*\(\)\[\]\+\ \{\}\`\~\=\|\/\?\.\,\<\>\'\"\!\:\;\a\b\c\d\e\f\g\h\i\j\k\l\m\n\o\p\q\r\s\t\u\v\w\x\y\z\A\B\C\D\E\F\G\H\I\J\K\L\M\N\O\P\Q\R\S\T\U\V\W\X\Y\Z]/; function chk_t(val) { var strPass = val.value; var strLength = strPass.length; var lchar_1 = val.value.charAt((strLength) - 1); if(lchar_1.search(only_t) != -1) { var tst = val.value.substring(0, (strLength) - 1); val.value = tst; } } function chk_n(val) { var strPass = val.value; var strLength = strPass.length; var lchar_2 = val.value.charAt((strLength) - 1); if(lchar_2.search(only_n) != -1) { var tst = val.value.substring(0, (strLength) - 1); val.value = tst; } } function chk2(form) { if(form.value.length < 1) { alert("Missing something."); return false; } if((form.value.search(only_t) == -1) ||(form.value.search(only_n) == -1)) { alert("Seems to be working."); return false; } } // End --> </script> </head> <form name=get_info onSubmit="return chk2(this.f_name); return chk2(this.l_name); return chk2(this.exp_hrs);"> <br> <br> First Name: <input type="text" name="f_name" size="25" maxlength="15" value="" onKeyUp="javascript:chk_t(get_info.f_name);"> <br> <br> Last Name: <input type="text" name="l_name" size="25" maxlength="20" value="" onKeyUp="javascript:chk_t(get_info.l_name);"> <br> <br> How many minutes do you want your cookie to last (10 - 60): <input type="text" name="exp_mins" size="3" maxlength="2" value="" onKeyUp="javascript:chk_n(get_info.exp_mins);"> <br> <br> <input type=submit value=Continue> <br> </form> <body> </body> </html> So if both validations work seperatley (if I just put radio buttons validation in the function without the spinner validation then radio buttons validation works and same vise versa), how come when I put both validations in the function, the top validation which is the radio validation works but the bottom validation which is the spinner validation does not display a message when it is suppose to? Code is below: Code: <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Create a Session</title> <script type="text/javascript"> function validation() { var errMsgO = document.getElementById("radioAlert"); var btnRadioO = document.getElementsByName("sessionNo"); var isbtnRadioChecked = false; var errQuesMsgO = document.getElementById("numberAlert"); var questionNumberO = document.getElementsByName("txtQuestion"); for(i=0; i < btnRadioO.length; i++){ if(btnRadioO[i].checked){ isbtnRadioChecked = true; } } if(!isbtnRadioChecked) { errMsgO.innerHTML = "Please Select the Number of Sessions you Require"; } else { errMsgO.innerHTML = ""; } return false; if(questionNumberO[0].value == 0){ errQuesMsgO.innerHTML = "Please Set the Number of Questions"; } else { errQuesMsgO.innerHTML = ""; } return false; } </script> </head> <body> <form action="create_session.php" method="post" name="sessionform"> <table> <tr> <th>2: Number of Sessions :</th> <td class="sessionNo"><input type="radio" name="sessionNo" value="1" />1</td> <td class="sessionNo"><input type="radio" name="sessionNo" value="2" />2</td> <td class="sessionNo"><input type="radio" name="sessionNo" value="3" />3</td> <td class="sessionNo"><input type="radio" name="sessionNo" value="4" />4</td> <td class="sessionNo"><input type="radio" name="sessionNo" value="5" />5</td> </tr> </table> <div id="radioAlert"></div> <table> <tr> <th>Number of Questions:</th> <td class="spinner"><textarea class="spinnerQuestion" name="txtQuestion" id="txtQuestion" cols="2" rows="1"></textarea></td> <td><button class="scrollBtn" id="btnQuestionUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button> <button class="scrollBtn" id="btnQuestionDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td> </tr> </table> <div id="numberAlert"></div> <p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="validation()" /></p> <!-- Prepare Questions here--> </form> </body> 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> I 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> Hi I am new to programming have tried to write a simple HTML page and servlet. Using tomcat. Added a javascript validation function. However when I type wrong it works the first time, displays alert and returns to entry form. on second attempt type in wrong again, expected to see alert and return to entry form but it submits. I am new to programmng and could do with some help can not find any clue, answer to this problem. Have checked javascript is ticked in Firefox 5.0. Set up is I have a HTML page with one javascript check function at present for test development. It is linked to a servlet in tomcat. Problem is when I enter wrong the first time, get alert message and it returns to the HTML orginal page. However if I click on entry field and enter wrong again. It submits the form, does not give an alert or return to the orginal form? Has any one got a solution or is this how validation should work. Code is: Code: <HTML><head><title>Creation of POs</title> <H1>Purchase Order</h1> <script type="text/javaScript"> function check() { check = document.forms[0].SLine1.value; if(check=="wrong"){ alert("enter correct info"); return false; } else { return true; } } </script></head><body bgcolour="yellow"> <form method="GET" action="Distest_session30a_vs1" onSubmit="return check()"> various inputboxes and messages <table> <tr><td><input type="text" name="SLine1"></td></tr> various other lines of inputs boxes </table> <Input type="submit" value="Send now"> </form></body></html> Thanks in advance for any help people can give spent a lot of time on this already and can think of nothing else to try to resolve. Using firefox 5.0, check and javascript is enabled? Basically, i am creating an expandable/collapsible menu. which works fin in FF and chrome, but not in IE. this is the code i can narrow it down to that is not working: Code: window.addEvent('domready', function() { SqueezeBox.initialize({}); $$('a.modal').each(function(el) { el.addEvent('click', function(e) { new Event(eX).stop(); SqueezeBox.fromElement(el); }); }); }); it keeps giving me errors, but when i take it out, it stops. it works in FF just fine and in chrome just fine. but in IE, it loads with errors and then the function is not working. this is the code for the actual placement of the function: Code: echo '<div class="abstract">'; echo '<div class="top">'; echo '<h2 class="gold bold md-2">'; echo wordwrap($row['vp_name'], 50, '<br>'); echo '</h2>'; echo '<span class="md">'; echo 'Hotel: '; echo '</span>'; echo '<strong class="md">'; echo wordwrap($row['vp_hotel'], 50, '<br>'); echo '</strong>'; echo '<br />'; echo '<span class="md">'; echo 'Price Range: '; echo '</span>'; echo '<strong class="md">'; echo $row['vp_price']; echo '</strong>'; echo '<br />'; echo '<p>'; echo 'Details: '; echo '<span class="expand blue">Expand</span> | <span class="collapse blue">Collapse</span>'; echo '</p>'; echo '</div>'; echo '<div style="overflow:hidden;">'; echo '<div class="more-details clear">'; echo '<ul>'; echo '<li>'; echo $row['vp_desc']; echo '</li>'; if(!empty($row['vp_terms'])){ echo '<li>'; echo $row['vp_terms']; echo '</li>'; } if(!empty($row['vp_website'])){ echo '<li>'; echo '<a href="' . $row['vp_website'] . '" title="" rel="nofollow" target="_blank" class="md">Visit Website</a>'; echo '</li>'; } echo '</ul>'; echo '</div>'; echo '</div>'; echo '</div>'; Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, I am haivng a little problem with this js and was wondering if anyone had any idea on how to fix it. Here is the issue: Visit: http://www.test.trpn.com/1/cgi/page.cgi?g=;d=1 (the guy at the footer with numbers) Now unless you are using IE, you will notice that when you try to click on search-box and type anything it won't work. The only way to make any input field work is by first right clicking on it and then it will accept input. Test site works normally without the js at footer. Here is the URL with full JS: http://www.test.trpn.com/ratenow/rate.js I have 'no clue' what is wrong, however if someone can tell me how to fix this, it would be much appreciated. Thanks. I'm new to HTML and javascript programming, so I apologize if the solution to this is blatantly obvious. I've got expanding text / menus in javascript on my page. These all work in IE with no problems that I can tell. Unfortunately, when I view the page in Firefox, only the first expanding menu is actually a link and works - the rest do not even appear as links and don't work (and the expanded text isn't showing either). You can visit the page at http://www.scienceadvice.ca/uploads/...s/may2010.html Any help would be most appreciated! Thanks! Hi, Wonder if you could help I have a js issue with i.e, my gallery works fine in ff but not in ie. Any ideas heres the link http://www.sparekeys.org.uk/ |