current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I tried for days to get this to work in IE, and ultimately gave up by presenting the user with an alert window warning users that the form does not fully work in IE. Yet, people are still using IE to fill out the form and I'm having to email back and forth with them to finish their registration, so I'd like to see if I can actually fix the original problem. I have a long registration form for an event here:

http://rhythmshuffle.com/RS2013/Register.html

I decided to handle the length of the form by revealing form elements when the user clicks various checkboxes, e.g. the housing section at the very bottom of the form. Here's the javascript:

function togglehide(thiselem) {
  var item = document.getElementById(thiselem);
  if (item) {if (item.className == 'unhidden') {item.className='hidden';} else {item.className='unhidden';}}
}

here's the relevant CSS:

.hidden {display: none; overflow: hidden; border: none; text-decoration: none; background: transparent;}
.unhidden {display: block; overflow: auto; border: none; text-decoration: none; background: transparent;}

and here's an example of the html:

<input type="checkbox" name="housing" value="yes" onClick="javascript:togglehide('housingrequest')"/>
<div id=housingrequest class=hidden>
  whatever - more form elems...
</div>

Does anyone know how to make this work in IE? I searched Stack Overflow awhile back when I initially worked on this. I'd tried a number suggestions that were answers to similar but slightly different problems, but none of them had worked for me (I'd tell you what I tried, but cannot remember now).

Thanks, Rob

UPDATE: I confirmed myself that the code WORKS in IE 9 & 10 (despite what other testers were telling me). So this question is specifically for IE 8 and below. Apparently, some of my users are still using outdated versions of IE. In fact, one preferred printing out the screen shots I sent her to mail me the registration instead of installing any other up-to-date browser! sigh

share|improve this question
    
So what exactly happens in IE when you click on the checkbox? –  Pointy Jun 20 '13 at 15:44
1  
You don't need the javascript: prefix in an onclick attribute. –  Paul S. Jun 20 '13 at 15:44
    
You don't need the else as this just sets the class name to what it already is. –  Joe Jun 20 '13 at 15:51
    
Maybe correct it to onclick: stackoverflow.com/questions/4380719/onclick-or-onclick –  Barmar Jun 20 '13 at 15:55
    
Hi Pointy. I've gotten some conflicting reports from different users (probably associated with different versions of IE), but clicking the checkbox does not reveal the content in the hidden section. Every other browser however (I've tested) expands the form to include the options. I don't have a PC, so I can't test it out to give you exact feedback on what happens in the different versions. In fact, I've had conflicting feedback about the behavior on the SAME version of IE -probably just inaccurate users/bad testers. They don't send me the screenshots I ask for, so I don't know for sure. –  hepcat72 Jun 20 '13 at 16:32

1 Answer 1

up vote 0 down vote

first give a id to input:

<input id="test" type="checkbox" name="housing" value="yes"/>
<div id="housingrequest" class="hidden">
  whatever - more form elems...
</div>

then use this jquery code:

$("input#test").click(function(){
    if($(this).is(":checked")){
        $("div#housingrequest").show();
    }
    else{
        $("div#housingrequest").hide();
    }
});
share|improve this answer
    
I'm not very jquery savvy, or javascript savvy for that matter... I have a number of these hiding/revealing features. Is there a way to give the ID of the thing I want to show/hide? - I'm implementing your suggestion now BTW. I'll let you know how it goes. –  hepcat72 Jun 23 '13 at 1:06
    
I had to wrap the jquery code in "$(function(){...});", but It's now a test case which is functioning in Safari. All I have to do is find someone to test it in various versions of IE. –  hepcat72 Jun 23 '13 at 1:16
    
Well, this is exasperating. So far, everyone who has tested it for me claims that both the old and new methods work in IE 9 & 10. So I'm having a hard time reproducing people's IE behavior. I know it's not working for some people. I'm going to look into stackbrowser that was mentioned in another comment. –  hepcat72 Jun 24 '13 at 20:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.