JavaScript - Em "'undefined' Is Null Or Not An Object" Only In Ie
Hiya,
I would like to ask your help regarding this damned error message that comes out only in Internet Explorer and makes impossible to submit the form. The javascript code is: Code: function checkForm() { var cname, cspouse, cemail, chphone, ccellular, caddress, ccity, cstate, czip, cpets, cvolunteer, cadditional; with(window.document.volApplForm) { cname = Name; cspouse = Spouse; cemail = Email; chphone = HomePhone; ccellular = Cellular; caddress = Address; ccity = City; cstate = State; czip = Zip; cpets = Pets; cvolunteer = Volunteer; cadditional = Additional; } var ALERT_TITLE = "Oops!"; var ALERT_BUTTON_TEXT = "Close"; if(document.getElementById) { window.alert = function(txt) { createCustomAlert(txt); } } function createCustomAlert(txt) { d = document; if(d.getElementById("modalContainer")) return; mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); mObj.id = "modalContainer"; mObj.style.height = document.documentElement.scrollHeight + "px"; alertObj = mObj.appendChild(d.createElement("div")); alertObj.id = "alertBox"; if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px"; alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px"; h1 = alertObj.appendChild(d.createElement("h1")); h1.appendChild(d.createTextNode(ALERT_TITLE)); msg = alertObj.appendChild(d.createElement("p")); msg.innerHTML = txt; btn = alertObj.appendChild(d.createElement("a")); btn.id = "closeBtn"; btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT)); btn.href = "#"; btn.onclick = function() { removeCustomAlert();return false; } } if(trim(cname.value) == '') { alert('Please enter your name'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); cname.focus();} return false; } else if(trim(cemail.value) == '') { alert('Please enter your email'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); cemail.focus();} return false; } else if(!isEmail(trim(cemail.value))) { alert('Email address is not valid'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); cemail.focus();} return false; } else if(trim(chphone.value) == '') { alert('Please enter your valid phone number'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); chphone.focus();} return false; } else if(trim(ccellular.value) == '') { alert('Please enter valid cell phone number'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); ccellular.focus();} return false; } else if(trim(caddress.value) == '') { alert('Please enter your valid address'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); caddress.focus();} return false; } else if(trim(ccity.value) == '') { alert('Please enter your city'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); ccity.focus();} return false; } else if(trim(cstate.value) == '') { alert('Please enter valid state name'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); cstate.focus();} return false; } else if(trim(czip.value) == '') { alert('Please enter valid zip code'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); czip.focus();} return false; } else if(trim(cvolunteer.value) == '') { alert('Please fill in all fields'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); cvolunteer.focus();} return false; } else if(trim(cadditional.value) == '') { alert('Please fill in all fields'); function removeCustomAlert() {document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); cadditional.focus();} return false; } else { cname.value = trim(cname.value); cspouse.value = trim(cspouse.value); cemail.value = trim(cemail.value); chphone.value = trim(chphone.value); ccellular.value = trim(ccellular.value); caddress.value = trim(caddress.value); ccity.value = trim(ccity.value); cstate.value = trim(cstate.value); czip.value = trim(czip.value); cpets.value = trim(cpets.value); cvolunteer.value = trim(cvolunteer.value); cadditional.value = trim(cadditional.value); return true; } } function trim(str) { return str.replace(/^\s+|\s+$/g,''); } function isEmail(str) { var regex = /^[-_.a-z0-9]+@(([-_a-z0-9]+\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn |bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk| dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs |gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr| kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum |mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr |pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf |tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za| zm|zw)|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i; return regex.test(str); } And when trying to submit the form, I get the error message: Code: Line: 177 Character: 4 Code: 0 Error Message: 'undefined' is null or not an object URL: https://localhost/ruff/scripts/validationVol.js Do you have an idea what could be the problem? As I checked line 177, it seems to be OK. I checked the web, but didn't find anything related to this message in a situation like this. Thanks in advance for your comments. Similar TutorialsBelow are the full Javascript and HTML to detect a browser and either display HTML5 or Flash video. However, the script is returning an error, 'document.getElementById(...)' is null or not an object. Any suggestions? Code: var deviceAgent = navigator.userAgent.toLowerCase(); $brwzr = deviceAgent.match(/(chrome|firefox|safari|msie 9.0)/); if ($brwzr) { document.getElementById("video_5").setAttribute("class", "on"); } else { document.getElementById("video_F").setAttribute("class", "on"); } Code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Video Switch</title> <script language="JavaScript" src="index/js/detect.js"></script> <style> <!-- .off { display: none; } .on { display: inline; } --> </style> </head> <body> <div id="video_5" class="off">HTML5!</div> <div id="video_F" class="off">Flash!</div> </body> </html> Though I took out the source of the iframe, I get an error when I click the test button to get the value of msg_title. I am using IExplorer to debug it, as firefox doesnt show the error. Code: <script type='text/javascript'> function test(){ page = window.location.href document.getElementById('1').value = window.frames[2].document.getElementByName('msg_title').value } function apple(){ document.getElementById('3').innerHTML = '<iframe src="" name="4" id="4"></iframe>' } window.onLoad = test(); </script> <div id='3' name='3'></div> <input type='button' value='apple' name='apple' id='apple' onclick='apple()'> <input type='button' value='test' name='test' id='test' onclick='test()'> <input type='text' value='' name='1' id='1'> <br> <iframe src='' name='2' id='2'> I'm getting the following problem. The reason is that the object appears through AJAX. But if I choose it NOT to appear it gives this problem. How can I avoid this? I put an if statement inline Code: if(document.getElementById('vsbtitle_1').value!=null){ thisurlext+='&btitle1='+document.getElementById('vsbtitle_1').value; } But it doesn't help. Quote: Error: document.getElementById("vsbtitle_1") is null Source File: javascript:%20var%20file='forforum.php';%20var%20thisurlext='?type=forforum&btitle0='+document.getEl ementById('vsbtitle_0').value;%20if(document.getElementById('vsbtitle_1').value!=null){thisurlext+=' &btitle1='+document.getElementById('vsbtitle_1').value;%20}%20var%20checkedlength=0;%20thisurlext+=' &checkresult0=';%20for(i=0;i<document.getElementsByName('checkresult_0').length;++i){if(document.get ElementsByName('checkresult_0')[i].checked){thisurlext+=document.getElementsByName('checkresult_0')[i].value;checkedlength++;if(i+1<document.getElementsByName('checkresult_0').length){if(document.getEle mentsByName('checkresult_0')[i+1].checked){thisurlext+='+';}}}};%20thisurlext+='&checkresult1=';%20for(i=0;i<document.getElementsByNa me('checkresult_1').length;++i){if(document.getElementsByName('checkresult_1')[i].checked){thisurlext+=document.getElementsByName('checkresult_1')[i].value;checkedlength++;if(i+1<document.getElementsByName('checkresult_1').length){if(document.getEle mentsByName('checkresult_1')[i+1].checked){thisurlext+='+';}}}};var%20getKeyURL='';%20for(a=0;%20a<document.getElementById('txtid').v alue;%20a++){if(document.getElementById('txtarea_'+[a]).value!=%20''){getKeyURL+='&txtarea'+[a]+'=';}getKeyURL+=document.getElementById('txtarea_'+[a]).value;}var%20thisnewurlext=file+thisurlext+getKeyURL;%20forForum(); Line: 1 Hey all, For the below code, I'm just trying to create a simple toggle menu for a Table of Contents. However, when page loads, I get document.gelementbyid('sidebar') is null even though it's clearly there and if I move script to below markup, it will also give me a hideElements() is not a function error, even though it clearly is. Code: <script type="text/javascript"> (function(){ var headers = document.getElementById("sidebar").childNodes; for(var i=0; i < headers.length; i++){ hideElements(headers[i]); if(headers[i].nodeName == "h1"){ headers[i].childNodes[0].onclick = function(){ hideElements(headers[i]); this.parentNode.nextSibling.style.display = "block"; return false; } } } var hideElements = function(element){ if(element.nodeName == "UL") element.style.display = "none"; } })(); </script> <body> <a name="top"></a> <div id="masthead"> <h1>This is the Help Page</h1> </div> <div id="sidebar"> <h1><a href="chapter1"> Info</a></h1> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ul> <h1><a href="chapter2"> Info</a></h1> <ul> <li><a href="#section4">Section 4</a></li> <li><a href="#section5">Section 5</a></li> <li><a href="#section6">Section 6</a></li> </ul> </div> <div id="content"> <h1 id="section1">Section 1</h1> <p> </p> <a href="#top">Back to Top</a> <h1 id="section2">Section 2</h1> <p> </p> <a href="#top">Back to Top</a> <h1 id="section3">Section 3</h1> <p> </p> <a href="#top">Back to Top</a> </div> </body> Thanks for any response. 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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Washington DC</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="scripts/downloadxml.js"></script> <style type="text/css"> html, body { height: 100%; } </style> <script type="text/javascript"> var side_bar_html = ""; var gmarkers = []; var map = null; function createMarker(latlng, name, html) { var contentString = html; var marker = new google.maps.Marker({ position: latlng, map: map, zIndex: Math.round(latlng.lat()*-100000)<<5 }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); // save the info we need to use later for the side_bar gmarkers.push(marker); // add a line to the side_bar html side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; } function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } function initialize() { var myOptions = { zoom: 14, center: new google.maps.LatLng(38.897725,-77.036511), mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // Read the data from Washington.xml downloadUrl("Washington.xml", function(doc) { var xmlDoc = xmlParse(doc); var marker = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(marker[i].getAttribute("lat")); var lng = parseFloat(marker[i].getAttribute("lng")); var point = new google.maps.LatLng(lat,lng); var html = marker[i].getAttribute("html"); var label = marker[i].getAttribute("label"); // create the marker var POI = createMarker(point,label,html); } // put the assembled side_bar_html contents into the side_bar div document.getElementById("side_bar").innerHTML = side_bar_html; }); } var infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50) }); </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <table border="1"> <tr> <td> <div id="map_canvas" style="width: 1000px; height: 600px"></div> </td> <td valign="top" style="width:200px; text-decoration: underline; color: #4444ff;"> <div id="side_bar"></div> </td> </tr> </table> </body> </html> Hi, My webpage can work normally in IE but not in Safari(e.g. when I clicked on some buttons like 'Delete' button, the page opened in Safari stays the same while it should delete the object chosen). When I tried debugging on Safari, after clicking the 'update' button, this message error appeared: "TypeError: Result of expression 'this.form.fireEvent' [undefined] is not a function". I believe this code makes the incompatability between the 2 browser: Code: function DeleteClick() { var frmSWO = document.getElementById("form"); var answer = confirm("Do you really want to delete?") if (answer != 0) { frmSWO.action = "/domsWeb/mtd/doms/web/operation/eDepotMNR/controller/manageWorkOrder/DeleteJobOrImage.do"; frmSWO.method = "post"; this.form.fireEvent('onsubmit'); frmSWO.submit(); } } Any suggest how should I amend the script for it to work on 2 browser concurrently? Thanks all! Hi, window.clipboardData.getData("text") is giving undefined on remote server(unix). When deployed locally(windows xp) it is coming giving correct value. In both cases the brower is IE running on windows xp. Is there anything wrong in the way I am reading the clipboard data? Here is a clip of code from a script project im working on. Now my document.getElementsByTagName is returning a "undefined" value. Can anyone tell me whats wrong with my code? Code: <a href="http://www.anotherrandomsite.com" style="text-decoration: none; color: #EDDBAF; font-size: 16px;"> <center style="margin-left: 10px; margin-right: 10px;"> <font style="color: #EDDBAF; font-size: 16px;" id="title"></font> </center> </a> <li id="name"><a http="http://www.randomsite.com" style="color: blue;">John Doe</a></li> <script type="text/javascript"> var pname = document.getElementById('name').getElementsByTagName('a'); //now if i remove the ".getElementsByTagName('a')" it will actually work, but it also includes the <a> tag thats within the <li> tag, which i dont want. document.getElementById('title').innerHTML=pname.innerHTML; </script> Alright so this is my problem. I'm using ajax to validate my form without refreshing the page. Everything works but the message part of my contact form. The name, email, and subject get passed but the message returns back as "undefined". I've looked through some of the older posts with the keyword being undefined and I didn't really find anything that helped. I've been trying to get this working for like days now an I'm sure its something really simple and right under my nose. So I will post my html for the form and the validation code. I want to thank all who help. Here is the HTML Code: <div id="forminfo"> <form name="contact" method="post" action=""> <dl> <dt id="name"><label for="fName" class="">Name</label></dt> <dd><input type="text" class="text" name="fName" id="fName" style="width:200px; height:20px;" /></dd> <label class="error" for="fName" id="fName_error">This field is required.</label> <dt id="eMail"><label for="email" class="">Email</label></dt> <dd><input type="text" class="text" name="email" id="email" style="width:200px; height:20px;" /></dd> <label class="error" for="email" id="email_error">This field is required.</label> <dt id="subject"><label for="subject">Subject</label></dt> <dd><input type="text" size="8" maxlength="40" name="subject" id="subj" style="width:200px; height:20px;" class="text" /></dd> <label class="error" for="subject" id="subj_error">This field is required.</label> <dt id="comments">Message</dt> <dd><textarea name="memo" class="text2" id="memo"></textarea></dd> <dd><input type="submit" class="button" id="submit" name="submit" value="" /></dd> </dl> </form> </div><!--forminfo--> Here is the JavaScript/AJAX Code: $(function() { $('.error').hide(); $('input.text-input').css({backgroundColor:"#FFFFFF"}); $('input.text-input').focus(function(){ $(this).css({backgroundColor:"#FFFFFF"}); }); $(".button").click(function() { // validate and process form // first hide any error messages $('.error').hide(); var name = $("input#fName").val(); if (name == "") { $("label#fName_error").show(); $("input#fName").focus(); return false; } var email = $("input#email").val(); if (email == "") { $("label#email_error").show(); $("input#email").focus(); return false; } var subject = $("input#subj").val(); if (subject == "") { $("label#subj_error").show(); $("input#subj").focus(); return false; } var comments = $("input#memo").val(); if (comments == "") { $("input#memo").focus(); return false; } var dataString = 'fName='+ name + '&email=' + email + '&subj=' + subject + '&memo=' + comments; //alert (dataString);return false; $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function() { $('.formContainer').html("<div id='message'></div>"); $('#message').html("<h2>Contact Form Submitted!</h2>") .append("<p>I will be in touch soon.</p>") .hide() .fadeIn(1500, function() { $('#message').append("<img id='checkmark' src='images/check.png' />"); }); } }); return false; }); }); runOnLoad(function(){ $("input#fName").select().focus(); }); I've been testing my site in firefox and safari and everything was a OK. Now IE is telling me that "pagetracker" is undefined and its not taking me to the other links on my site. Also the content on the first page is not showing up in IE. jonathaneiger.com Hi everyone, I'm using a JavaScript to upload multiple files, namely this one: http://valums.com/ajax-upload/ The script has the ability to post additional parameters to the server, by calling the function setParams Code: var doktyp = "default"; var uploader = new qq.FileUploader({ element: document.getElementById('file-uploader-scope'), action: 'uploads.php', // additional data to send, name-value pairs debug: true, onSubmit: uploader.setParams ({ dateityp: getCheckedValue(document.forms['doktyp'].elements['dateityp']), comment: jQuery('#dateityp').val() }) }); Without the onSubmit: part the script works well and does as it's supposed to, but with it FireBug reports "uploader is undefined" und the script seizes to function. Now JavaScript istn't my strong suit, so I have been reading up on this for the last two hours, tried calling that function from a different place, tried to modify it, but no luck; the error remains the same (or slightly different; if I point at the class in question directly, the function doesnt work...). I would appreciate any advice you could give. Code: <script type="text/javascript"> function loadText() { var t1=setTimeout("document.getElementById('data').innerHTML='<center><img style=\"margin-top:30px;\" src=\"loading.gif\" /></center>'",0000); var t2=setTimeout("document.getElementById('data').innerHTML='THEPAGE'",6000) } </script> The above is in the header, and I'm calling it in the html. Code: <script type="text/javascript"> document.write(loadText()); </script> in the page it displays properly, but then it also says "undefined" not sure why? anyone have any ideas? Hello there! I am completely new to these forums and to programming in general (however, I used to program some games, albeit not very good ones, on a version of BASIC that came with my Playstation 2 about 10 years ago hehe). I have a basic understanding of functions, loops, if/else/switch and an extremely basic understanding of objects/methods. I wanted to consolidate my knowledge by putting it to practical use so I have made a little text adventure game. At the moment it is horrendously non-user-friendly as it has just been me experimenting with functions, if/else statements etc. Anyway, below is my code and I have two specific questions regarding it (but general answers telling me how I could do things more efficiently OR telling me what I should consider studying would be very appreciate also :)). Firstly, I have a little inventory object up top and when the player picks up something in the game I change the inv item to "true" so they can use it later (it seemed logical!). I would really love to know how the user could type in "inv" and for their inventory to be shown back to them. i.e. How could I show only the "true" items of an object? I have tried coding this myself but I really am stumped for an answer. Secondly, you can see in the "north21" function within the "north2" function that I used a series of if/else statements instead of a switch. I would have much prefered to use a switch and then for the case of "go north" have an if/else statement to check if vineclear is true or not (so that they can pass through to the non-existent north3 room). Is this possible? You can use if/else statements within an if/else statement but it seemed when I tried doing that in a switch it didn't like it. I am running this script through an interpreter to play the "game". I understand that JS probably isn't the best for what I am trying to do, it was more just a "see what I can do" exercise more than anything. Thanks in advance for your help and please be nice to me, forums scare me generally :D testgame.txt I have to attach the code in a txt file as for some reason it wasn't displaying properly when I copied and pasted it here. Apologies! Reply With Quote 01-17-2015, 08:26 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Briefly: Code: // based on this: var inv = { sword: false, shield: false, vines: false }; // try this: function displayInventory( ) { var list = [ ]; for ( var item in inv ) { if ( inv[item] == true ) { list.push( item ); } } if ( list.length == 0 ) { return "You have no items in your inventory"; } return "You have these items in your inventory:<ul><li>" + list.join("</li><li>") + "</ul>"; } My code is designed for display in an HTML page, not for use in clumsy console.log( ) coding. prompt() and alert() and confirm() and document.write() and console.log() should be used ONLY when debugging, not for any real work. But if you must use console.log, then try this, to replace the code in italics: Code: return "You have these items in your inventory: " + list.join(","); Hi, I'm trying to use a form which is existent on one of my sites and try re-creating a similar form on another site for the exact same purpose. Here is the URL for the form on our website Cast Iron Cookware Depot. I have everything duplicated but running into form validation errors. Right now without event entering any data into the form and also the verification code the form still gets submitted but ofcourse runs into "object expected" error at onsubmit="return validate(this);"> by IE Debugger. Below is the total code and would appreciate if any of you gurus point out where the mistake is and also why the exact same code is working on one site is not working on this site. Thanks much in advance. Please help me! ------------------------------------------------------------------------ Code: <style> .TableBG { background-color: #83a338; color: #ffffff; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .no { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #333333; width: 35px; text-align:right; } input, textarea {border: 1px inset #cccccc; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px;} .input01 {width: 150px;} .input02 {width: 250px;} .button { background-color: #83a338; color: #000000; border: 1px outset #83a338; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; } </style><br /> <br /> <table width="600" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF" class="TableBG"> <tr> <td bgcolor="#FFFFFF"> <FORM name="form1" method="POST" action="http://s.p8.hostingprod.com/@castironcookwaredepot.com/php/tellafriend.php" onsubmit="return validate(this);"> <FORM name="form1" method="POST" action="http://s.p4.hostingprod.com/@bestsafetyapparel.com/php/tellafriend.php" onsubmit="return validate(this);"> <table width="100%" border="0" cellpadding="5" cellspacing="0"> <tr> <td class="TableBG"> </td> <td class="TableBG"><strong>Your Name: </strong></td> <td class="TableBG"><strong>Your Email: </strong></td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td> </td> <td> <input type="text" name="sName" class="input01" style="font-weight: bold;" /> </td> <td> <input type="text" name="sEmail" class="input02" size="40" style="font-weight: bold;" /> </td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td width="4%" class="TableBG"> </td> <td width="36%" class="TableBG"> Your Friend's Name :</td> <td width="60%" class="TableBG">Your Friend's Email:</td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td class="no"><strong>1.</strong></td> <td> <input type="text" name="name1" class="input01" /> </td> <td> <input type="text" name="email1" class="input02" size="40" /> </td> </tr> <tr> <td class="no"><strong>2.</strong></td> <td> <input type="text" name="name2" class="input01" /> </td> <td> <input type="text" name="email2" class="input02" size="40" /> </td> </tr> <tr> <td class="no"><strong>3.</strong></td> <td> <input type="text" name="name3" class="input01" /> </td> <td> <input type="text" name="email3" class="input02" size="40" /> </td> </tr> <tr> <td class="no"><strong>4.</strong></td> <td> <input type="text" name="name4" class="input01" /> </td> <td> <input type="text" name="email4" class="input02" size="40" /> </td> </tr> <tr> <td class="no"><strong>5.</strong></td> <td> <input type="text" name="name5" class="input01" /> </td> <td> <input type="text" name="email5" class="input02" size="40" /> </td> </tr> <tr> <td class="TableBG"> </td> <td colspan="2" class="TableBG">Your Message </td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td colspan="3" align="center"> <textarea name="comments" cols="65" rows="5" id="comments" style="width: 420px;"></textarea> </td> </tr> <tr> <td class="TableBG"> </td> <td colspan="3" class="TableBG">Enter Verification Code</td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td colspan="3" align="center" valign="absmiddle"><img src="http://s.p8.hostingprod.com/@castironcookwaredepot.com/php/captcha.php" align="absmiddle"> <input type="text" name="vercode" value="Enter Verification Code" onFocus="if(this.value=='Enter Verification Code') this.value='';" onBlur="if(this.value=='') this.value='Enter Verification Code';" size="25"/></td> </tr> <tr> <td colspan="3" align="center"> <input type="submit" name="Submit" value=" Send Email " class="button" /> </td> </tr> </table> </form> </td> </tr> </table> <script> function validate(frm) { name = frm.sName; email = frm.sEmail; name1=frm.name1; email1=frm.email1; err_flag = 0; if (name.value == "" || !removeSpaces(name.value)) { alert ("Please enter proper Name!"); name.value=""; name.focus(); return false; } else if (email.value == "" || !validate_email(email.value)) { alert ("Please enter proper Email!"); email.value=""; email.focus(); return false; } else if (name1.value == "" || !removeSpaces(name1.value)) { alert ("Please enter proper Friend\'s Name!"); name1.value=""; name1.focus(); return false; } else if (email1.value == "" || !validate_email(email1.value)) { alert ("Please enter proper Friend\'s Email!"); email1.value=""; email1.focus(); return false; } } function validate_email(e) { var str=e; var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i if (!filter.test(str)) return false; else return true; } function removeSpaces(string) { var tstring = ""; string = '' + string; splitstring = string.split(" "); for(i = 0; i < splitstring.length; i++) tstring += splitstring[i]; return tstring; } </script> <br /> <br /> Regards Learner Hi, There is a live search on my web page but the box of available options which falls below the 'input' field has a transparent background color. How can it be changed to non-transparent? This line below makes the background white, but all the text on the page shines through, since the default is transparent. [CODE] document.getElementById("linksearch").style.backgroundColor="#FFFFFF"; [CODE] This instruction line does not help much 'cos I can't figure out the correct way to make it work: [CODE] Object.style.backgroundColor="color|inherit|transparent". [CODE] Thanks. Hello, I'm working on web apps for a company and unfortunately the websites work in Mozilla, chrom and IE9 but not in IE8. In IE8 the error message "undefined is null or not an object" is pointing to this line: temp = val.replace(/-/g, "/"); That line is inside a function. I'm not sure how to troubleshoot this...any help would be appreciated. This is a common issue, however, I haven't found anything ( yet ) that points out a solution that I can find in my code. As usual, this site works with every single browser known to man ...........except for any version of IE. I have tried using IE's devel tools to no avail ....though I'm a complete newb, so that isn't saying much. Code??? Here's the section IE complains about: Code: function display(str) { var nodeList = xmlDoc.getElementsByTagName("item"); var cnt = 0; var list = "<hr />"; for(var i=0; i< nodeList.length; i++) { cnt++; // Get vars from XML title = nodeList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue; author = nodeList[i].getElementsByTagName("author")[0].childNodes[0].nodeValue; pubDate = nodeList[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue; call = nodeList[i].getElementsByTagName("call")[0].childNodes[0].nodeValue; cover = nodeList[i].getElementsByTagName("cover")[0].childNodes[0].nodeValue; link = nodeList[i].getElementsByTagName("link")[0].childNodes[0].nodeValue; summary = nodeList[i].getElementsByTagName("summary")[0].childNodes[0].nodeValue; style = nodeList[i].getElementsByTagName("class")[0].childNodes[0].nodeValue; page = nodeList[i].getElementsByTagName("page")[0].childNodes[0].nodeValue; category = nodeList[i].getElementsByTagName("category")[0].childNodes[0].nodeValue; I opened this with Firebug and I see nothing of interest. Specifically, IE complains about line 86: Code: summary = nodeList[i].getElementsByTagName("summary")[0].childNodes[0].nodeValue; Thanks for reading ~ Bub **** UPDATE ***** Well ...it looks like I can't have null values in any elements ( in the xml document ). How do you experts satisfy this requirement in an elegant fashion. Since there is no data for certain elements, I'm looking for a reasonable failover solution. Empty quotes? ..... still experimenting. A script produces the xml file from a database so some elements do not have data for certain child elements. **** UPDATE 2 ***** Using the Unicode non-breaking space in the xml file for empty child elements. Works, but if you have a cooler solution, let me know. Thanks! I am running on Magento eCommerce, however please don't turn away if you have no experience with it. Problem is with JavaScript. When one clicks on the button, nothing happens, when the page loads browsers in general display error message, that 'productAddtoCartForm' is null or not an object Here's the piece of code around the Add button: Code: <div class="product-view"> <div class="product-essential"> <form action="http://myhairpalace.com/index.php/default/checkout/cart/add/uenc/aHR0cDovL215aGFpcnBhbGFjZS5jb20vaW5kZXgucGhwL2RlZmF1bHQvaW5kaWFuLXJlbXktZnJvbnQvMTAwLWh1bWFuLWhhaXItbGFjZS1mcm9udC13aWctc3V6aWUuaHRtbD9fX19TSUQ9VQ,,/product/57/" method="post" id="product_addtocart_form" enctype="multipart/form-data"> <div class="no-display"> <input type="hidden" name="product" value="57� /> <input type=" hidden"="" id="related-products-field" product-shop"=""> <div class="product-name"> <h1>100% Human Hair Lace Front Wig-Suzie</h1> </div> <p class="email-friend"><a href="http://myhairpalace.com/index.php/default/sendfriend/product/send/id/57/cat_id/11/">Email to a Friend</a></p> <p class="no-rating"><a href="http://myhairpalace.com/index.php/default/review/product/list/id/57/category/11/#review-form">Be the first to review this product</a></p> <p class="availability in-stock">Availability: <span>In stock</span></p> <div class="price-box"> <span class="regular-price" id="product-price-57"> <span class="price">$75.00</span> </span> </div> <ul class="add-to-links"> <li><a href="http://myhairpalace.com/index.php/default/wishlist/index/add/product/57/" class="link-wishlist">Add to Wishlist</a></li> <li><span class="separator">|</span> <a href="http://myhairpalace.com/index.php/default/catalog/product_compare/add/product/57/uenc/aHR0cDovL215aGFpcnBhbGFjZS5jb20vaW5kZXgucGhwL2RlZmF1bHQvaW5kaWFuLXJlbXktZnJvbnQvMTAwLWh1bWFuLWhhaXItbGFjZS1mcm9udC13aWctc3V6aWUuaHRtbD9fX19TSUQ9VQ,,/" class="link-compare">Add to Compare</a></li> </ul> <div class="short-description"> <h2>Quick Overview</h2> <div class="std">Suzie</div> </div> </div> <div class="product-img-box"> <p class="product-image product-image-zoom"> <img id="image" src="http://myhairpalace.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/l/a/lace_front-shan.jpg" alt="100% Human Hair Lace Front Wig-Suzie" title="100% Human Hair Lace Front Wig-Suzie"></p> <p class="zoom-notice" id="track_hint">Double click on above image to view full picture</p> <div class="zoom"> <img id="zoom_out" src="http://myhairpalace.com/skin/frontend/default/default/images/slider_btn_zoom_out.gif" alt="Zoom Out" title="Zoom Out" class="btn-zoom-out"> <div id="track"> <div id="handle"></div> </div> <img id="zoom_in" src="http://myhairpalace.com/skin/frontend/default/default/images/slider_btn_zoom_in.gif" alt="Zoom In" title="Zoom In" class="btn-zoom-in"> </div> <script type="text/javascript"> //<![CDATA[ Event.observe(window, 'load', function() { product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint'); }); //]]> </script> <div class="more-views"> <h2>More Views</h2> <ul> <li> <a href="#" onclick="popWin('http://myhairpalace.com/index.php/default/catalog/product/gallery/id/57/image/56/', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title=""><img src="http://myhairpalace.com/media/catalog/product/cache/1/thumbnail/56x/9df78eab33525d08d6e5fb8d27136e95/l/a/lace_front-shan.jpg" width="56" height="56" alt=""></a> </li> </ul> </div> </div> <div class="clearer"></div> <div class="product-options" id="product-options-wrapper"> <script type="text/javascript"> //<![CDATA[ var DateOption = Class.create({ getDaysInMonth: function(month, year) { var curDate = new Date(); if (!month) { month = curDate.getMonth(); } if (2 == month && !year) { // leap year assumption for unknown year return 29; } if (!year) { year = curDate.getFullYear(); } return 32 - new Date(year, month - 1, 32).getDate(); }, reloadMonth: function(event) { var selectEl = event.findElement(); var idParts = selectEl.id.split("_"); if (idParts.length != 3) { return false; } var optionIdPrefix = idParts[0] + "_" + idParts[1]; var month = parseInt($(optionIdPrefix + "_month").value); var year = parseInt($(optionIdPrefix + "_year").value); var dayEl = $(optionIdPrefix + "_day"); var days = this.getDaysInMonth(month, year); //remove days for (var i = dayEl.options.length - 1; i >= 0; i--) { if (dayEl.options[i].value > days) { dayEl.remove(dayEl.options[i].index); } } // add days var lastDay = parseInt(dayEl.options[dayEl.options.length-1].value); for (i = lastDay + 1; i <= days; i++) { this.addOption(dayEl, i, i); } }, addOption: function(select, text, value) { var option = document.createElement('OPTION'); option.value = value; option.text = text; if (select.options.add) { select.options.add(option); } else { select.appendChild(option); } } }); var dateOption = new DateOption(); //]]> </script> <script type="text/javascript"> //<![CDATA[ var optionFileUpload = { productForm : $('product_addtocart_form'), formAction : '', formElements : {}, upload : function(element){ this.formElements = this.productForm.select('input', 'select', 'textarea', 'button'); this.removeRequire(element.readAttribute('id').sub('option_', '')); template = '<iframe id="upload_target" name="upload_target" style="width:0; height:0; border:0;"><\/iframe>'; Element.insert($('option_'+element.readAttribute('id').sub('option_', '')+'_uploaded_file'), {after: template}); this.formAction = this.productForm.action; var baseUrl = 'http://myhairpalace.com/index.php/default/catalog/product/upload/'; var urlExt = 'option_id/'+element.readAttribute('id').sub('option_', ''); this.productForm.action = parseSidUrl(baseUrl, urlExt); this.productForm.target = 'upload_target'; this.productForm.submit(); this.productForm.target = ''; this.productForm.action = this.formAction; }, removeRequire : function(skipElementId){ for(var i=0; i<this.formElements.length; i++){ if (this.formElements[i].readAttribute('id') != 'option_'+skipElementId+'_file' && this.formElements[i].type != 'button') { this.formElements[i].disabled='disabled'; } } }, addRequire : function(skipElementId){ for(var i=0; i<this.formElements.length; i++){ if (this.formElements[i].readAttribute('name') != 'options_'+skipElementId+'_file' && this.formElements[i].type != 'button') { this.formElements[i].disabled=''; } } }, uploadCallback : function(data){ this.addRequire(data.optionId); $('upload_target').remove(); if (data.error) { } else { $('option_'+data.optionId+'_uploaded_file').value = data.fileName; $('option_'+data.optionId+'_file').value = ''; $('option_'+data.optionId+'_file').hide(); $('option_'+data.optionId+'').hide(); template = '<div id="option_'+data.optionId+'_file_box"><a href="#"><img src="var/options/'+data.fileName+'" alt=""><\/a><a href="#" onclick="optionFileUpload.removeFile('+data.optionId+')" title="Remove file" \/>Remove file<\/a>'; Element.insert($('option_'+data.optionId+'_uploaded_file'), {after: template}); } }, removeFile : function(optionId) { $('option_'+optionId+'_uploaded_file').value= ''; $('option_'+optionId+'_file').show(); $('option_'+optionId+'').show(); $('option_'+optionId+'_file_box').remove(); } } var optionTextCounter = { count : function(field,cntfield,maxlimit){ if (field.value.length > maxlimit){ field.value = field.value.substring(0, maxlimit); } else { cntfield.innerHTML = maxlimit - field.value.length; } } } Product.Options = Class.create(); Product.Options.prototype = { initialize : function(config){ this.config = config; this.reloadPrice(); }, reloadPrice : function(){ price = new Number(); config = this.config; skipIds = []; $$('.product-custom-option').each(function(element){ var optionId = 0; element.name.sub(/[0-9]+/, function(match){ optionId = match[0]; }); if (this.config[optionId]) { if (element.type == 'checkbox' || element.type == 'radio') { if (element.checked) { if (config[optionId][element.getValue()]) { price += parseFloat(config[optionId][element.getValue()]); } } } else if(element.hasClassName('datetime-picker') && !skipIds.include(optionId)) { dateSelected = true; $$('.product-custom-option[id^="options_' + optionId + '"]').each(function(dt){ if (dt.getValue() == '') { dateSelected = false; } }); if (dateSelected) { price += parseFloat(this.config[optionId]); skipIds[optionId] = optionId; } } else if(element.type == 'select-one' || element.type == 'select-multiple') { if (element.options) { $A(element.options).each(function(selectOption){ if (selectOption.selected) { if (this.config[optionId][selectOption.value]) { price += parseFloat(this.config[optionId][selectOption.value]); } } }); } } else { if (element.getValue().strip() != '') { price += parseFloat(this.config[optionId]); } } } }); try { optionsPrice.changePrice('options', price); optionsPrice.reload(); } catch (e) { } } } function validateOptionsCallback(elmId, result){ var container = $(elmId).up('ul.options-list'); if (result == 'failed') { container.removeClassName('validation-passed'); container.addClassName('validation-failed'); } else { container.removeClassName('validation-failed'); container.addClassName('validation-passed'); } } var opConfig = new Product.Options({"80":{"447":0,"448":0,"451":0,"452":0,"449":0,"450":0,"454":0,"453":0}}); //]]> </script> <dl> <dt><label>Color<span class="required"> *</span></label></dt> <dd class="last"> <select name="options[80]" id="select_80" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"><option value="">-- Please Select --</option><option value="447">1 </option><option value="448">1B </option><option value="451">1B/30 </option><option value="452">1B/33 </option><option value="449">2 </option><option value="450">4 </option><option value="454">4/27 </option><option value="453">4/30 </option></select> </dd> </dl> <script type="text/javascript"> //<![CDATA[ enUS = {"m":{"wide":["January","February","March","April","May","June","July","August","September","October","November","December"],"abbr":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}}; // en_US locale reference Calendar._DN = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; // full day names Calendar._SDN = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; // short day names Calendar._FD = 0; // First day of the week. "0" means display Sunday first, "1" means display Monday first, etc. Calendar._MN = ["January","February","March","April","May","June","July","August","September","October","November","December"]; // full month names Calendar._SMN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; // short month names Calendar._am = "AM"; // am/pm Calendar._pm = "PM"; // tooltips Calendar._TT = {}; Calendar._TT["INFO"] = "About the calendar"; Calendar._TT["ABOUT"] = "DHTML Date/Time Selector\n" + "(c) dynarch.com 2002-2005 / Author: Mihai Bazon\n" + "For latest version visit: http://www.dynarch.com/projects/calendar/\n" + "Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." + "\n\n" + "Date selection:\n" + "- Use the \xab, \xbb buttons to select year\n" + "- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" + "- Hold mouse button on any of the above buttons for faster selection."; Calendar._TT["ABOUT_TIME"] = "\n\n" + "Time selection:\n" + "- Click on any of the time parts to increase it\n" + "- or Shift-click to decrease it\n" + "- or click and drag for faster selection."; Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)"; Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)"; Calendar._TT["GO_TODAY"] = "Go Today"; Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)"; Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)"; Calendar._TT["SEL_DATE"] = "Select date"; Calendar._TT["DRAG_TO_MOVE"] = "Drag to move"; Calendar._TT["PART_TODAY"] = ' (' + "Today" + ')'; // the following is to inform that "%s" is to be the first day of week Calendar._TT["DAY_FIRST"] = "Display %s first"; // This may be locale-dependent. It specifies the week-end days, as an array // of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1 // means Monday, etc. Calendar._TT["WEEKEND"] = "0,6"; Calendar._TT["CLOSE"] = "Close"; Calendar._TT["TODAY"] = "Today"; Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value"; // date formats Calendar._TT["DEF_DATE_FORMAT"] = "%b %e, %Y"; Calendar._TT["TT_DATE_FORMAT"] = "%B %e, %Y"; Calendar._TT["WK"] = "Week"; Calendar._TT["TIME"] = "Time:"; //]]> </script> <p class="required">* Required Fields</p> </div> <script type="text/javascript">decorateGeneric($$('#product-options-wrapper dl'), ['last']);</script> <div class="product-options-bottom"> <div class="price-box"> <span class="regular-price" id="product-price-57_clone"> <span class="price">$75.00</span> </span> </div> <div class="add-to-cart"> <label for="qty">Qty:</label> <input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty"> <button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit()"><span><span>Add to Cart</span></span></button> <p class="paypal-logo"><a id="ec_shortcut_c2e3fb1be4b9e9d53800cbc4d5f1e274" href="http://myhairpalace.com/index.php/default/paypal/express/start/"> <img src="https://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&buttontype=ecshortcut&locale=en_US" alt="Checkout with PayPal"> </a> <input type="hidden" id="pp_checkout_url" name="return_url" value=""> <script type="text/javascript"> //<![CDATA[ Event.observe('ec_shortcut_c2e3fb1be4b9e9d53800cbc4d5f1e274', 'click', function(event) { $('pp_checkout_url').value = this.href; productAddToCartForm.submit(); event.stop(); }); //]]> </script></p> </div> </div> </form> <script type="text/javascript"> //<![CDATA[ var productAddToCartForm = new VarienForm('product_addtocart_form'); productAddToCartForm.submit = function(){ if (this.validator.validate()) { this.form.submit(); } }.bind(productAddToCartForm); //]]> </script> </div> <div class="product-collateral"> <div class="box-collateral box-description"> <h2>Details</h2> <div class="std"> Nautral Hairline 100% Human Hair Lace Front wig. </div> </div> <div class="box-collateral box-tags"> <h2>Product Tags</h2> <form id="addTagForm" action="http://myhairpalace.com/index.php/default/tag/index/save/product/57/uenc/aHR0cDovL215aGFpcnBhbGFjZS5jb20vaW5kZXgucGhwL2RlZmF1bHQvaW5kaWFuLXJlbXktZnJvbnQvMTAwLWh1bWFuLWhhaXItbGFjZS1mcm9udC13aWctc3V6aWUuaHRtbD9fX19TSUQ9VQ,,/" method="get"> <div class="form-add"> <label for="productTagName">Add Your Tags:</label> <div class="input-box"> <input type="text" class="input-text required-entry" name="productTagName" id="productTagName"> </div> <button type="button" title="Add Tags" class="button" onclick="submitTagForm()"> <span> <span>Add Tags</span> </span> </button> </div> </form> <p class="note">Use spaces to separate tags. Use single quotes (') for phrases.</p> <script type="text/javascript"> //<![CDATA[ var addTagFormJs = new VarienForm('addTagForm'); function submitTagForm(){ if(addTagFormJs.validator.validate()) { addTagFormJs.form.submit(); } } //]]> </script> </div> </div> </div> Magento uses Prototype framework and the problem has something to do with prototype.js file and indeed, when I debugged in Chrome, here's what came up: Now, the crux is that the error shows up only pages featuring products w/ options in dropdown menus: http://myhairpalace.com/index.php/de...inkerbell.html You are able to add Simple Products to cart just fine: http://myhairpalace.com/index.php/de...o-measure.html I would be incredibly grateful for ANY suggestions. I am testing the contents of e.min for null, this works in everything except the latest version of Safari and Chrome. In the latest versions if I test for "" it works correctly but this does not work in IE, Firefox or older versions of Safari. e.min has not been set to anything. For now I have fixed the problem by omitting the test but I would like to know if it is possible to implement a real fix.
|