SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Sep 2010
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Javascript Internet Explorer

    Hi i have this script which works well with all browsers except IE. you can see the functions when you click on the male /female. It toggles between the DIV's on selection.
    Please advice how do i get it to work in IE

    Code:
    <html>
    <head>
    <title>Example</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
    </script>
    
        <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function() {
    
            $('.toggle').show();
            $('.gender').click( function() {
    		$('.toggle').hide();
              var target = this.id + '_content';
              // Use ID-selectors to toggle a single element.
              $('#' + target).toggle();
              // Use class-selectors to toggle groups of elements.
              $('.' + target).toggle();
              $('.toggle.always').toggle();
            });
            $('#toggle_everything').click( function() { $('.toggle').toggle(); });
        });
        //]]></script>
    	
    </head>
    <body>
    
        <noscript>
    		        <div>
                        <h1 align="center">
                            <font color="#FF0000">JavaScript is disabled on your 
    						browser.</font></h1>
    					<h1 align="center">
                            Please Enable JavaScript or your data will not be 
    						precisely captured. 
                        </h1>
                        <p>
                           The browser you are using does not currently have Java or JavaScript enabled which
                            is recommended when visiting the HealthWebAdvice website. Follow the instructions below
                            for your browser to update your settings.
                        </p>
                        <h2>
                            <strong>Microsoft Internet Explorer (IE)</strong></h2>
                        <ol>
                            <li>Select 'Internet Options...' from the Tools menu in your browser window.</li>
    
                            <li>Click on the 'Security' tab in the upper left corner of the 'Internet Options' dialog
                                box.</li>
                            <li>Click the 'Internet' icon (the globe).</li>
                            <li>Click the 'Default Level' button. If that button is grayed out, set the 'Security
                                Level' slider to 'Medium'.</li>
                            <li>Click the 'Apply' button then the 'OK' button to save your changes and close the
                                dialog box.</li>
                            <li>Close all browser windows and relaunch your browser.</li>
                        </ol>
    
                        <h2>
                            <strong>Mozilla Firefox users:</strong></h2>
                        <ol>
                            <li>Select 'Options' from the Tools menu in your browser window.</li>
                            <li>Click on the 'Content' tab in the upper left corner of the 'Options' dialog box.</li>
                            <li>Click the 'Enable Java' checkbox so that the checkbox is checked.</li>
                            <li>Click the 'Enable JavaScript' checkbox so that it is also checked.</li>
    
                            <li>Click 'OK' to save your changes and close the 'Options' dialog box.</li>
                            <li>Close all browser windows and relaunch your browser.</li>
                        </ol>
                        <h2>
                            <strong>Safari</strong></h2>
                        <ol>
                            <li>Select Preferences from the Safari menu. </li>
    
                            <li>Select Security tab at the top. </li>
                            <li>Make sure "Enable JavaScript" is checked.</li>
                        </ol>
                                        <div style="clear:both;"><hr></div>
                    </div>
        </noscript>
    
        <form name="analysis" id="analysis" action="index2.php" method="POST" onsubmit="return validate(this)">
     
                <div align="center"><b style="color:red;">Select Your Gender First and Continue: </b>
    				Male<input type="radio" class="gender" name="gender" id="Male" value="M">
    				Female<input type="radio" class="gender" name="gender" id="Female" value="F">
                </div>
    
    		<div class="toggle female_content">
                <table width="70%">
    				<h5><strong>Question and options</strong></h5>
    				<tr>
    					<th align="left">SECTION 1</th><td align="right">A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;</td>
    				</tr>
    				<tr class="question">
    					<td>1. Breast lumps
    							<td align="right">
    								<input type="radio" name="Breast_lumps" id="sec211" value="0">
    								<input type="radio" name="Breast_lumps" id="sec211" value="2">
    								<input type="radio" name="Breast_lumps" id="sec211" value="5">
    								<input type="radio" name="Breast_lumps" id="sec211" value="10">
    				<tr class="question">
    					<td>2. Breast tenderness
    							<td align="right">
    								<input type="radio" name="Breast_tenderness2" id="sec212" value="0">
    								<input type="radio" name="Breast_tenderness2" id="sec212" value="1">
    								<input type="radio" name="Breast_tenderness2" id="sec212" value="3">
    								<input type="radio" name="Breast_tenderness2" id="sec212" value="5">
    					<td>
    					<td align="right"><input type="hidden" name="SecTotal21" id="sectotal21" value="" maxlength="5" size="5" class="textbox">
    	        </table>
    		</div>
    
    		<div><b>Section 1 is for Female only</b></div>
                    <div style="clear:both;"><hr></div>
    		<div class="toggle female_content">
                <table width="70%">
    				<h5><strong>Question and options</strong></h5>
    				<tr>
    					<th align="left">SECTION 2</th><td align="right">A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;</td>
    				</tr>
    				<tr class="question">
    					<td>1. Insomnia
    						<td align="right">
    								<input type="radio" name="Insomnia" id="sec221" value="0">
    								<input type="radio" name="Insomnia" id="sec221" value="1">
    								<input type="radio" name="Insomnia" id="sec221" value="3">
    								<input type="radio" name="Insomnia" id="sec221" value="5">
    				<tr class="question">
    					<td>2. Joint pain
    							<td align="right">
    								<input type="radio" name="Joint_pain" id="sec222" value="0">
    								<input type="radio" name="Joint_pain" id="sec222" value="1">
    								<input type="radio" name="Joint_pain" id="sec222" value="3">
    								<input type="radio" name="Joint_pain" id="sec222" value="5">
    
    		<td align="right"><input type="hidden" name="SecTotal22" id="sectotal22" value="" class="textbox" maxlength="5" size="5">
    </table>
    		</div>
    
    		<div><b>Section 2 is for Female only</b></div>
                    <div style="clear:both;"><hr></div>
    		<div class="toggle male_content">
                <table width="70%">
    				<h5><strong>Question and options</strong></h5>
    				<tr>
    					<th align="left">SECTION 3</th><td align="right">A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;</td>
    				</tr>
    				<tr class="question">
    					<td>1. Low libido
    							<td align="right">
    								<input type="radio" name="Low_libido" id="sec231" value="0">
    								<input type="radio" name="Low_libido" id="sec231" value="2">
    								<input type="radio" name="Low_libido" id="sec231" value="5">
    								<input type="radio" name="Low_libido" id="sec231" value="7">
    	<tr class="question">
    					<td>2. Premature ejaculation
    							<td align="right">
    								<input type="radio" name="Premature_ejaculation" id="sec232" value="0">
    								<input type="radio" name="Premature_ejaculation" id="sec232" value="2">
    								<input type="radio" name="Premature_ejaculation" id="sec232" value="5">
    								<input type="radio" name="Premature_ejaculation" id="sec232" value="7">
    
    		<td align="right"><input type="hidden" name="SecTotal23" id="sectotal23" value="" class="textbox" maxlength="5" size="5">
    </table>
    		</div>
    
    <div><b>Section 3 is for Male only</b></div>
                    <div style="clear:both;"><hr></div>
    <div>
    <input type="submit" id="create" name="create">
    </div>
    </form>
    
    </body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lower-case id
    Code:
    Male<input type="radio" class="gender" name="gender" id="male" value="M">
    Female<input type="radio" class="gender" name="gender" id="female" value="F">
    id must be unique to document: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

    Validate your document: http://validator.w3.org/

  3. #3
    Non-Member
    Join Date
    Sep 2010
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dogFang View Post
    Lower-case id
    Code:
    Male<input type="radio" class="gender" name="gender" id="male" value="M">
    Female<input type="radio" class="gender" name="gender" id="female" value="F">
    id must be unique to document: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

    Validate your document: http://validator.w3.org/
    Thanx Mate


Bookmarks

Posting Permissions

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