onedear Posted November 30, 2011 Share Posted November 30, 2011 Last night I verified my code using the W3 verification and thought everything was okay, until I checked my site in IE. The main problem is the innerHTML with the drop down boxes. The idea is to select the boxes, and based on the input, the text would change to whatever was selected (for example, Monday at 7PM). I looked at the site in IE, but it leaves a blank when I do it. This works fine in Firefox. So I wanted to know if anything in the code is off, or if I need to add something else in order for it to work in IE. Thanks! <?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"><style type="text/css">@charset "utf-8";/* style sheet for index.html *//*Image from iStockphoto.com*/body { color: #ddaa44; background-image: url("Images/back.png"); background-position: right; background-repeat: repeat-y; background-color:#9D3326; font-family: Verdana, Geneva, sans-serif;} h1 {font-size: 18px;}p { font-size: 12px; color: #ffccaa;}.background { background-color: aa5533;}#container { float: left; width:900px; height:300px; }#container 2 {float:left; width:1000px; height:500px;}a:link {color:#ff8800; text-decoration:none; underline; }a:active {color: #ff8800; text-decoration: underline; }a:visited {color: #0000bb; text-decoration: underline; }a:hover {color: #ffccaa; text-decoration: none; }#container{ float:left; width:900px; height:300px}#navigation{ float: left; width: 100px; height:120px; background: clear; position:static; border-style:solid; border-width:2px; border-color:#ddaa44; margin:5px; padding-top:10px; padding-bottom:20px; padding-left:20px; padding-right:20px;}#words{ float: left; width: 500px; height:350px; background: clear; position:static; border-style:solid; border-width:2px; border-color:#ddaa44; margin:5px; padding-top:2px; padding-bottom:20px; padding-left:20px; padding-right:20px; overflow:auto;}#sidebox{ float: left; width: 150px; height:350px; background: clear; position:static; border-style:solid; border-width:2px; border-color:#ddaa44; margin:5px; padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; overflow:auto;}#footer{ clear: both; background: clear; margin:-1; }</style><title>Rosa's Kitchen Mexican Restaurant</title><meta name="description" content="mexican restaurant"><meta name="keywords" content="restaurant, mexican, mexican restaurant/> <meta content="><script type="text/javascript">function changeText(){ var userInput = document.getElementById('selDays').value; var userInput2 = document.getElementById('selTimes').value; document.getElementById('text1').innerHTML = userInput; document.getElementById('text2').innerHTML = userInput2; return false; }</script><style type="text/css">div.c1 {text-align: center}</style></head><body><img src="Images/logo-tinyY.png" alt="Rosa's Kitchen logo" width="353" height="142"><h1>Welcome to Rosa's Kitchen Mexican Restaurant!</h1><div id="container"><div id="navigation">Home<br><a href="menu.html">Menu</a> <a href="catering.html">Catering</a> <a href="specials.html">Specials</a> <a href="map.html">Location</a> <a href="contact.html">Contact</a> <p> </p> </div><div id="words"><p>At our restaurant, we serve the most authentic and freshest Mexican dishes in the Valley! We offer varied dishes from tacos to fajitas, as well as tempting desserts and amazing drinks.</p><p>Please refer to the side menu for navigation.<p>Website requires CSS, Javascript, and pop-ups enabled for full functionality<p><img src="Images/stock-photo-15573992-hacienda-yaxcopoil.jpg" alt="The outside of our restaurant" width="343" height="219"></p></div><div id="sidebox"><h4>Make a Reservation!</h4><p><label>Name: <input type="text" id="fname" name="fname"></label><br><label>Phone: <input type="text" id="phone" name="phone"></label><br><label>Email: <input type="text" id="email" name="email"></label><br></p><form name="frmDays" method="get" action="#" onsubmit="return changeText()" id="frmDays"><select name="selDays" id="selDays"><option>Select a Day</option><option>Monday</option><option>Tuesday</option><option>Wednesday</option><option>Thursday</option><option>Friday</option><option>Saturday</option></select></form><form name="frmTimes" method="get" action="#" onsubmit="return changeText()" id="frmTimes"><select name="selTimes" id="selTimes"><option>Select a Time</option><option>10 AM</option><option>11 AM</option><option>12 PM</option><option>1 PM</option><option>2 PM</option><option>3 PM</option><option>4 PM</option><option>5 PM</option><option>6 PM</option><option>7 PM</option><option>8 PM</option><option>9 PM</option><option>10 PM</option></select> <input type="submit" value="Send"><p>Your reservation is <strong id='text1'>Day</strong> at <strong id='text2'>Time</strong></p></form></div><div id="footer"><div class="c1"><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> ©2011 Rosa's Kitchen</div></div></div></body> Link to comment Share on other sites More sharing options...
thescientist Posted November 30, 2011 Share Posted November 30, 2011 do you mean the w3c validation service? There are errors in that markup. Are you having trouble getting it to display in IE, or to function in IE? I think what you want is to use is an onchange event on the dropdown to get the value of the selected index, which you can then use to put into the innerHTML of another element. Link to comment Share on other sites More sharing options...
onedear Posted November 30, 2011 Author Share Posted November 30, 2011 do you mean the w3c validation service? There are errors in that markup. Are you having trouble getting it to display in IE, or to function in IE? I think what you want is to use is an onchange event on the dropdown to get the value of the selected index, which you can then use to put into the innerHTML of another element. The page itself displays fine in IE, but the function doesn't work like it's supposed to. I can try the onchange event, and hopefully it will work. Link to comment Share on other sites More sharing options...
thescientist Posted November 30, 2011 Share Posted November 30, 2011 have you tried checking for errors? Link to comment Share on other sites More sharing options...
onedear Posted November 30, 2011 Author Share Posted November 30, 2011 I used the markup validation service, and it passed with this error: "NET-enabling start-tag requires SHORTTAG YES". The only other errors I've gotten are some formatting errors that are within the CSS. I don't understand why the form works fine in Firefox but not IE. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 30, 2011 Share Posted November 30, 2011 1) You have two form elements to hold two dropdowns, there should only one required to hold both and submit button. 2) Your code is checking for the VALUE of the options, which there are none, but! FF will treat the text as the value, but IE won't. To get it to work in both browsers you would have to use function changeText(){ var userInput = document.getElementById('selDays') var userInput2 = document.getElementById('selTimes') document.getElementById('text1').innerHTML = userInput.options[userInput.selectedIndex].text; document.getElementById('text2').innerHTML = userInput2.options[userInput2.selectedIndex].text;return false;} Link to comment Share on other sites More sharing options...
thescientist Posted December 2, 2011 Share Posted December 2, 2011 I meant javascript errors, in the console. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.