JavaScript - Javascript Function Does Not Work In Ie8 But Works In Ff
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 Similar TutorialsI'm using the Javascript Tabifier (found he http://www.barelyfitz.com/projects/tabber/) on a new website I'm building. Here is the test page I've been trying it out on: http://www.myohmomma.com/test-2 It seems to be working well in IE, but doesn't even appear in Firefox. Any idea why? Additionally, there seem to be some positioning issues when I view it in Firefox, which I'm thinking is a topic for the CSS forums, but I thought could be relevant to my issue, somehow. I don't want to overwhelm anyone williing to help with code, so please let me know if there is more you need to see. This is what applies to the tabifier: In the head of my php document: [CODE]<script type="text/javascript" src="http://www.myohmomma.com/wp-includes/js/tabber-minimized.js"></script>[CODE] In the sidebar of my php document: [CODE] <div class="sidebar"> <div class="tabber"> <div class="tabbertab"> <h2>Welcome</h2> <img src="images/Welcome.png" alt="" /> <div id="Connect"> <div id="Connect-01"> <img src="images/Connect_01.png" width="315" height="48" alt="" /> </div> <div id="Connect-02"> <img src="images/Connect_02.png" width="27" height="87" alt="" /> </div> <div id="Facebook"> <img src="images/Facebook.png" width="76" height="82" alt="" /> </div> <div id="Connect-04"> <img src="images/Connect_04.png" width="21" height="87" alt="" /> </div> <div id="Newsletter"> <img src="images/Newsletter.png" width="77" height="82" alt="" /> </div> <div id="Connect-06"> <img src="images/Connect_06.png" width="21" height="87" alt="" /> </div> <div id="Twiiter"> <img src="images/Twiiter.png" width="75" height="82" alt="" /> </div> <div id="Connect-08"> <img src="images/Connect_08.png" width="18" height="87" alt="" /> </div> <div id="Connect-09"> <img src="images/Connect_09.png" width="76" height="5" alt="" /> </div> <div id="Connect-10"> <img src="images/Connect_10.png" width="77" height="5" alt="" /> </div> <div id="Connect-11"> <img src="images/Connect_11.png" width="75" height="5" alt="" /> </div> </div> </div> <div class="tabbertab"> <h2>Features</h2> <p>Tab 2 content.</p> </div> <div class="tabbertab"> <h2>Categories</h2> <p>Tab 3 content.</p> </div> <div class="tabbertab"> <h2>Search</h2> <p>Tab 4 content.</p> </div> </div> </div>[CODE] From my CSS stylesheet: [CODE].sidebar{ position: relative; top:0px; padding-top:20px; padding-right:10px; padding-left:10px; padding-bottom:0px; float:right; width:350px; } .sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; background:#ffffff; } .sidebar ul li{ padding: 10px 0 10px 0; background:#ffffff; } .sidebar ul li h2{ font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #2d0a0b; border-top: 1px solid #2d0a0b; border-bottom: 1px solid #2d0a0b; padding: 5px 0px 5px 0px; background:#ffffff; } .sidebar ul ul li{ padding: 0; background:#ffffff; } /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */ /*-------------------------------------------------- REQUIRED to hide the non-active tab content. But do not hide them in the print stylesheet! --------------------------------------------------*/ .tabberlive .tabbertabhide { display:none; } /*-------------------------------------------------- .tabber = before the tabber interface is set up .tabberlive = after the tabber interface is set up --------------------------------------------------*/ .tabber { } .tabberlive { margin-top:1em; } /*-------------------------------------------------- ul.tabbernav = the tab navigation list li.tabberactive = the active tab --------------------------------------------------*/ ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 0px solid #778; font: bold 12px Verdana, sans-serif; } ul.tabbernav li { list-style: none; margin: 0; display: inline; } ul.tabbernav li a { padding: 3px 0.5em; margin-left: 0px; margin-right: 3px; border: 1px solid white; background: white; text-decoration: none; } ul.tabbernav li a:link { color: #2d0a0b; } ul.tabbernav li a:visited { color: #2d0a0b; } ul.tabbernav li a:hover { color: #2d0a0b; text-decoration:underline; background: white; border-color: white; } ul.tabbernav li.tabberactive a { color: #fbb1c0; background-color: #2d0a0b; border: 1px solid #2d0a0b; } ul.tabbernav li.tabberactive a:hover { color: #fbb1c0; text-decoration:underline; background: #2d0a0b; border-bottom: 1px solid white; } /*-------------------------------------------------- .tabbertab = the tab content Add style only after the tabber interface is set up (.tabberlive) --------------------------------------------------*/ .tabberlive .tabbertab { padding:5px; border:10px solid #2d0a0b; /* If you don't want the tab size changing whenever a tab is changed you can set a fixed height */ height:285px; /* If you set a fix height set overflow to auto and you will get a scrollbar when necessary */ overflow:auto; } /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 { display:none; } .tabberlive .tabbertab h3 { display:none; } /* Example of using an ID to set different styles for the tabs on the page */ .tabberlive#tab1 { } .tabberlive#tab2 { } .tabberlive#tab2 .tabbertab { height:200px; overflow:auto; } #Connect { position:absolute; left:30px; top:200px; width:315px; height:135px; } #Connect-01 { position:absolute; left:0px; top:0px; width:315px; height:48px; } #Connect-02 { position:absolute; left:0px; top:48px; width:27px; height:87px; } #Facebook { position:absolute; left:27px; top:48px; width:76px; height:82px; } #Connect-04 { position:absolute; left:103px; top:48px; width:21px; height:87px; } #Newsletter { position:absolute; left:124px; top:48px; width:77px; height:82px; } #Connect-06 { position:absolute; left:201px; top:48px; width:21px; height:87px; } #Twiiter { position:absolute; left:222px; top:48px; width:75px; height:82px; } #Connect-08 { position:absolute; left:297px; top:48px; width:18px; height:87px; } #Connect-09 { position:absolute; left:27px; top:130px; width:76px; height:5px; } #Connect-10 { position:absolute; left:124px; top:130px; width:77px; height:5px; } #Connect-11 { position:absolute; left:222px; top:130px; width:75px; height:5px; }[CODE] I've visited the forums so many times as a reader and usually find solutions here. I'm usually good at figuring it out on my own, but I'm really stumped. I am new at this and I think I'm in over my head. I'd reallly appreciate some help. 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; } <?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 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> 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>"; We have created this function with loops and arrays Problem is the loops work only when I take out the function when the function is in place, nothing works, it is part of exercise anyone have suggestions here is my code Code: title>Congressional Races</title> <link href="results.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="votes.js"></script> <script type="text/javascript"> function totalVotes(votes){ var total=0; for (var i = 0; i <votes1.length; i++) { total = total + votes1[i]; } document.write(total); } </script> } </head> <body> thanks all who can help 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 function hasTagsInText(text) { if(text.indexOf("<TABLE") >=0 || text.indexOf("<table") >=0) return 'table'; ///this line of code doesnt work in firefox I have a function which allows the number of buttons selected depending on the number selected from the drop down menu. Problem is that this code works in all of the major browsers except for Internet Explorer (No Suprise). For example if user chose the number 3 from the dropdown menu, then user can only select 3 buttons. Why is it not working in Internet explorer and what can be used to make it work in Internet Explorer? Below is javascript functions: Code: function getButtons() { document.getElementById("answerA").class="answerBtnsOff"; document.getElementById("answerA").setAttribute("class","answerBtnsOff"); document.getElementById("answerA").setAttribute("className","answerBtnsOff"); document.getElementById("answerB").class="answerBtnsOff"; document.getElementById("answerB").setAttribute("class","answerBtnsOff"); document.getElementById("answerB").setAttribute("className","answerBtnsOff"); document.getElementById("answerC").class="answerBtnsOff"; document.getElementById("answerC").setAttribute("class","answerBtnsOff"); document.getElementById("answerC").setAttribute("className","answerBtnsOff"); document.getElementById("answerD").class="answerBtnsOff"; document.getElementById("answerD").setAttribute("class","answerBtnsOff"); document.getElementById("answerD").setAttribute("className","answerBtnsOff"); document.getElementById("answerE").class="answerBtnsOff"; document.getElementById("answerE").setAttribute("class","answerBtnsOff"); document.getElementById("answerE").setAttribute("className","answerBtnsOff"); currenttotal=0; } function btnclick(btn) { if(document.getElementById("numberDropId").value=="") { alert('You must first select the number of answers you require from the drop down menu'); return false; } if (btn.class=="answerBtnsOn") { btn.class="answerBtnsOff"; btn.setAttribute("class","answerBtnsOff"); btn.setAttribute("className","answerBtnsOff"); currenttotal--; return false; } if(document.getElementById("numberDropId").value==currenttotal) { alert('You are not allowed beyond the limit of the number of answers you require, deselect other button'); return false; } if (btn.class=="answerBtnsOff") { btn.class="answerBtnsOn"; btn.setAttribute("class","answerBtnsOn"); btn.setAttribute("className","answerBtnsOn"); currenttotal++; return false; } } If you html code then this is below: Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" > <table id="middleDetails" border="1"> <tr> <td>Question:</td> <td rowspan="3"> <textarea rows="5" cols="40" name="questionText"></textarea> </td> <td>Option Type:</td> <td> <select name="optionDrop" onClick="getDropDown()"> <option value="">Please Select</option> <option value="abc">ABC</option> <option value="abcd">ABCD</option> <option value="abcde">ABCDE</option> <option value="trueorfalse">True or False</option> <option value="yesorno">Yes or No</option> </select> </td> <tr> <td colspan="2"></td> <td>Number of Answers:</td> <td> <span id="na">N/A</span> <select name="numberDrop" id="numberDropId" onChange="getButtons()"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> </form> 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, I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work. Is there away around this? Not sure if providing my script helps or not, but just in case here it: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <title>Messages</title> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function (){ $('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){ var btn = $(this).attr('id'); if(btn == 'submitNewSend'){ file = 'insertMessage.php'; Msg = 'Your message has been sent'; } else if(btn == 'submitNewSend2'){ file = 'insertMessage.php'; Msg = 'Your message has been sent'; } else if (btn == 'submitNewSave'){ file = 'insertSaveMessage.php'; Msg = 'Your message has been saved'; } else if (btn == 'submitNewSave2'){ file = 'insertSaveMessage.php'; Msg = 'Your message has been saved'; } var data = $('#MessageNew').serialize(); $.post (file,data, function(){ alert(Msg); $('#MessageNew').each (function(){ this.reset(); }); }); return false; }); }); </script> <script type="text/javascript"> function loadXMLDoc(File,ID){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST",File,true); xmlhttp.send(); } </script> <head> <body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')"> <br /> <br /> <div id="txtHintCompose"></div> </form> </body> </html> And the getloadCompose.php is: Code: <form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF"> <table id="new" width="60%"> <tr> <th>Compose Message</th> </tr> <tr> <td class="first"> <input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send"> <input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save"> <input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" /> </td> </tr> <tr> <td> <br /> <label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br /> <div id="txtHintEmailTo"></div> </td> </tr> <tr> <td> <label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br /> </td> </tr> <tr> <td> <label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br /> </td> </tr> <tr> <td class="first"> <input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send"> <input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save"> <input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" /> </td> </tr> </table> </form> I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do. 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, |