0

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

hepcat72
  • 890
  • 4
  • 22
  • 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`: http://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
  • @Barmar - I tried your suggestion of changing onClick to onclick on the promotional version of the form. Could you test it out with IE for me to see if it works?: http://rhythmshuffle.com/RS2013/Promo.html – hepcat72 Jun 20 '13 at 16:46
  • I don't have a PC, either. I use BrowserStack to test with other browsers, give it a try. – Barmar Jun 20 '13 at 16:52
  • OK. I tried BrowserStack and apparently the only versions of IE I myself can confirm do not work are IE 8 and below, regardless of the version of windows. I trust my own testing better than I do of those who claimed to me that it didn't work under 9 and/or 10, so I'm going to update my question to be specifically about IE 7 & 8. – hepcat72 Jun 24 '13 at 20:15

1 Answers1

0

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();
    }
});
user1447420
  • 1,382
  • 2
  • 12
  • 14
  • 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 01: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 01: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