SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2004
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    disable/enable difference between FF and IE7

    Hi all,

    I have a form where I hideor show a dropdown list based on the selection in a radio button group. If I select radio button 1, I want to enable a dropdown list and disable 4 others. If I press the other radiobutton I want it to reverse. This works fine in FF, but in IE7 it goes wrong.

    Anyone out there who knows why this happens ?

    Thx,
    Michel

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post your code and then let's see what's wrong with it.
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Here's a template for what you're after.

    Code css:
    .hidden {
    	display: none;
    }

    Code html4strict:
    <form id="myForm">
    <p>
    <input type="radio" name="choice" id="radio1" value="choice1"><label for="radio1">Choice 1</label>
    <input type="radio" name="choice" id="radio2" value="choice2"><label for="radio2">Choice 2</label>
    </p>
    <p id="choice1">
    	<select id="choice1" name="choice1">
    		<option value="option1">Option 1</option>
    		<option value="option2">Option 2</option>
    	</select>
    </p>
    <p id="choice2">
    	<select name="choice2">
    		<option value="option1">Option 1</option>
    		<option value="option2">Option 2</option>
    	</select>
    	<select name="choice3">
    		<option value="option1">Option 1</option>
    		<option value="option2">Option 2</option>
    	</select>
    	<select name="choice4">
    		<option value="option1">Option 1</option>
    		<option value="option2">Option 2</option>
    	</select>
    	<select name="choice5">
    		<option value="option1">Option 1</option>
    		<option value="option2">Option 2</option>
    	</select>
    </p>
    <input type="submit" value="Submit">
    </form>

    And the script, to be run from the end of the body.
    Code javascript:
    // attach events
    var elements = document.getElementById('myForm').elements;
    for (var i = 0; i < elements.length; i++) {
    	if (elements[i].value === 'choice1') {
    		elements[i].onclick = showChoice1;
    		// activate default event
    		elements[i].onclick();
    	}
    	if (elements[i].value === 'choice2') {
    		elements[i].onclick = showChoice2;
    	}
    }
    // process events
    function showChoice1() {
    	document.getElementById('choice1').className = '';
    	document.getElementById('choice2').className = 'hidden';
    }
    function showChoice2() {
    	document.getElementById('choice1').className = 'hidden';
    	document.getElementById('choice2').className = '';
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2004
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx guys for helping me. Although it was a PHP related issue.

    M


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
  •