www.webdeveloper.com
Results 1 to 8 of 8

Thread: Works in firefox/safari/opera but not in IE

  1. #1
    Join Date
    Dec 2008
    Posts
    6

    Works in firefox/safari/opera but not in IE

    Hi,

    im building a website where you click an image on a map and it ticks the checkbox in a form associated with that image. There are 11 images and 11 checkboxes. Im using a onclick="checked(1);" through to "onclick="checked(11);" on each image link which refers to this JS script:

    Code:
    function checked(n) {
    	   box = eval("document.getElementById('deal'+n)");
    	   if (box.checked == false) {
    		  box.checked = true;
    		  this.styles
    	   } else {
    		  box.checked = false;
    	   }
    	}
    each checkbox has the id="deal1" through to id="deal11"

    Currently it works a treat in everything except IE. when you click it checks the box and when you click again it unchecks it. IE however does nothing.

    Any help would be much appreciated
    Last edited by bobmcjob; 12-08-2008 at 10:22 PM.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb

    Try this ...
    PHP Code:
    function checked(n) {
           
    box document.getElementById('deal'+n);
           if (
    box.checked == false) {
              
    box.checked true;
           } else {
              
    box.checked false;
           }
        } 

  3. #3
    Join Date
    Dec 2008
    Posts
    6
    cheers, i gave it a whirl, still doesnt work in IE

    im only new to javascript is there a common rule or something im missing as to why firefox 3/2 and every other browser interprets it correctly but IE doesn't?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Question

    Quote Originally Posted by bobmcjob View Post
    cheers, i gave it a whirl, still doesnt work in IE

    im only new to javascript is there a common rule or something im missing as to why firefox 3/2 and every other browser interprets it correctly but IE doesn't?
    Can you post the full script?
    It should work, but you might have an error elsewhere.

  5. #5
    Join Date
    Dec 2008
    Posts
    6
    Firstly here is the image map which calls the checked(); function when the image is clicked. I have other functions that show hidden info divs when the mouse hovers over the image.

    HTML Code:
     <map name="Map" id="Map">
                        <area shape="poly" coords="421,374,431,390,444,403,435,449,418,453,407,445,408,415,432,411,411,379" href="#deal1" alt="" onmouseover="showtext(1);showbox();" onmouseout="hidebox();" onclick="checked(1)" />
                        <area shape="poly" coords="307,428,295,427,324,353,343,409,339,422,326,428" href="#deal2" alt="" onmouseover="showtext(2);showbox();" onmouseout="hidebox();" onclick="checked(2)" />
                        <area shape="poly" coords="236,410,217,366,207,397,205,450,233,450" href="#deal3" alt="" onmouseover="showtext(3);showbox();" onmouseout="hidebox();" onclick="checked(3)" />
                        <area shape="poly" coords="315,328,372,328,374,310,347,293,315,307" href="#deal4" alt="" onmouseover="showtext(4);showbox();" onmouseout="hidebox();" onclick="checked(4)"/>
                        <area shape="poly" coords="290,513,285,441,308,434,331,464,336,514" href="#deal5" alt="" onmouseover="showtext(5);showbox();" onmouseout="hidebox();" onclick="checked(5)"/>
                        <area shape="poly" coords="333,347,373,368,385,337,356,335" href="#deal6" alt="" onmouseover="showtext(6);showbox();" onmouseout="hidebox();" onclick="checked(6)"/>
                        <area shape="poly" coords="393,345,448,345,437,333,450,315,435,305,422,309,391,329" href="#deal7" alt="" onmouseover="showtext(7);showbox();" onmouseout="hidebox();" onclick="checked(7)" />
                        <area shape="poly" coords="281,60,339,57,321,38,301,24" href="#deal8" alt="" onmouseover="showtext(8);showbox();" onmouseout="hidebox();" onclick="checked(8)"/>
                        <area shape="poly" coords="227,127,310,124,296,67,266,71,234,106" href="#deal9" alt="" onmouseover="showtext(9);showbox();" onmouseout="hidebox();" onclick="checked(9)"/>
                        <area shape="poly" coords="64,118,171,119,172,80,66,80" href="#deal10" alt="" onmouseover="showtext(10);showbox();" onmouseout="hidebox();" onclick="checked(10)"/>
                        <area shape="poly" coords="181,61,127,73,88,62,112,42,153,44" href="#deal11" alt="" onmouseover="showtext(11);showbox();" onmouseout="hidebox();" onclick="checked(11)"/>
    					<area shape="poly" coords="57,65,36,54,15,74,18,100,40,122,56,118" href="#deal12" alt="" onmouseover="showtext(12);showbox();" onmouseout="hidebox();" />
                        <area shape="poly" coords="292,137,358,110,403,141,344,150" href="#deal13" alt="" onmouseover="showtext(13);showbox();" onmouseout="hidebox();" />
                        <area shape="poly" coords="71,186,131,185,118,151,100,125,75,160" href="#deal14" alt="" onmouseover="showtext(14);showbox();" onmouseout="hidebox();" />
                        <area shape="poly" coords="90,258,96,237,83,205,118,202,115,234,111,256" href="#deal15" alt="" onmouseover="showtext(15);showbox();" onmouseout="hidebox();" />
                        <area shape="poly" coords="295,288,282,265,292,231,323,233,335,262,323,278" href="#deal16" alt="" onmouseover="showtext(16);showbox();" onmouseout="hidebox();" />
                        <area shape="poly" coords="351,251,352,213,355,189,368,173,377,197,383,220,366,250" href="#deal17" alt="" onmouseover="showtext(17);showbox();" onmouseout="hidebox();" />
                        <area shape="poly" coords="388,291,376,260,382,242,430,249,431,291" href="#deal18" alt="" onmouseover="showtext(18);showbox();" onmouseout="hidebox();" />
                        <area shape="poly" coords="246,326,306,327,318,356,296,372,249,361" href="#deal19" alt="" onmouseover="showtext(19);showbox();" onmouseout="hidebox();" />
                        <area shape="poly" coords="240,485,247,458,285,492,272,524,246,516" href="#deal20" alt="" onmouseover="showtext(20);showbox();" onmouseout="hidebox();" />
                      
                      </map>
    Below is the form where each check box has the id of deal1 through to deal11

    HTML Code:
    <form action="entry.php"  method="post" >
    					
                                 <fieldset id="offers">
                                 
                                 	<fieldset class="checkbox">
                                        <input type="hidden" name="deal1" value="" />
                                        <input type="checkbox" name="deal1" id="deal1" />
                                        <label for="deal1">25% off Madagascan Explorer</label>
                                    </fieldset>
                                    
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal2" value=""/>
                                        <input type="checkbox" name="deal2" id="deal2" />
                                        <label for="deal2">25% off Okavango Experience</label>
                                    </fieldset>
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal3" value=""/>
                                        <input type="checkbox" name="deal3" id="deal3" />
                                        <label for="deal3">25% off Namibia Lodge Safari</label>
                                    </fieldset>
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal4" value=""/>
                                        <input type="checkbox" name="deal4" id="deal4" />
                                        <label for="deal4">25% off Mt Kilimanjaro Marangu Route</label>
                                    </fieldset>
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal5" value=""/>
                                        <input type="checkbox" name="deal5" id="deal5" />
                                        <label for="deal5">50% off 4 Day Kruger Adventure</label>
                                    </fieldset>
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal6" value=""/>
                                        <input type="checkbox" name="deal6" id="deal6" />
                                        <label for="deal6">50% off Zanzibar Beach Break</label>
                                    </fieldset>
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal7" value=""/>
                                        <input type="checkbox" name="deal7" id="deal7" />
                                        <label for="deal7">50% off Sunrise Balloon Ride</label>
                                    </fieldset>
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal8" value=""/>
                                        <input type="checkbox" name="deal8" id="deal8" />
                                        <label for="deal8">Free Dahab Beach Break</label>
                                    </fieldset>
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal9" value=""/>
                                        <input type="checkbox" name="deal9" id="deal9" />
                                        <label for="deal9">Free Alexandria City Break</label>
                                    </fieldset>
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal10" value=""/>
                                        <input type="checkbox" name="deal10" id="deal10" />
                                        <label for="deal10">50% off Active Morocco</label>
                                    </fieldset>
                                    
                                    <fieldset class="checkbox">
                                        <input type="hidden" name="deal11" value=""/>
                                        <input type="checkbox" name="deal11" id="deal11" />
                                        <label for="deal11">50% off Essaouira Escape</label>
                                    </fieldset>
                       		 </fieldset>
                        
                        <h3 class="sub-header">And enter to win a trip to Kenya and Tanzania - tell us why you want to win in 25 words or less</h3>
                        	<fieldset id="entry">
                                    <textarea name="comp_entry" title="Competition Entry" id="comp_entry" class="[val,8]" rows="0" cols="0" onkeypress="textCounter(this,this.form.counter,255);" ></textarea>
                         	</fieldset>
                        <!-- End Entry -->
                        		<fieldset id="submit-btn">
                                    <input class="continue" type="image" name="submit" src="css/images/btn_continue.gif" value="continue" onclick="entryCheck();" />
    							</fieldset>
                                </form>
    the javascript that is called from the image map is below

    Code:
    function checked(n) {
           box = document.getElementById('deal'+n);
           if (box.checked == false) {
              box.checked = true;
           } else {
              box.checked = false;
           }
        }
    It has me baffeled. Thanks for your help

  6. #6
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by bobmcjob View Post
    HTML Code:
     <fieldset class="checkbox">
      <input type="hidden" name="deal1" value="" />
      <input type="checkbox" name="deal1" id="deal1" />
    document.getElementById in I.E. doesn't distinguish between name and ID, so you cant use the same identifier for name and ID on different elements.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    How about a link to where the image for the map
    and the missing functions (textcounter(), entryCheck(), etc.)
    and class="[val,8]" are located.

    I'm getting too many errors to find out why the "checked(n)" function doesn't work.

  8. #8
    Join Date
    Dec 2008
    Posts
    6
    Cheers Logic Ali, i changed the name on the hidden input fields and thats worked!! Thank you everyone for your help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles