When my form is filled out in FF or chrome, the email i receive is perfect, however when i fill out the form using IE the checkbox values do not showup in the email. al that shows up is {check0} and {check1} it works fine though in other browsers. Help please.
Thanks
Hi,
Could you post a link to the form?
/Fredrik
Hello ! i have the same problem, checkboxes doesn't work in IE8, it works fine though in other browsers Heeeeeeeeelp !!!!
Hmm...
The generated form looks ok both in FireBug and DebugBar. There's an added $included element visible in IE only, though I'm not sure it's related. Could you try disabling the RokCandy (or Gantry Framework) in your RT template, and see if that helps? From experience, RokCandy and CF don't always play nicely together..
/Fredrik
I've tried this, disabled rokCandy in my RT template ... still not working ... with ie8 ... working in others browsers .... 😟
Not sure if it will help or not, but i forwarded you the 2 emails.
@jameschrono:
If I load your form in "component view" (adding ?tmpl=component to the URL), DebugBar shows that the check0 and check1 form fields are included in the submitted data. This way, the form is loaded without any of RT's javascripts, so this might suggest your template is at fault, or atleast part of it. Any success disabling the RokCandy/Gantry?
Unfortunately, RT likes to obfuscate their javascripts, making it rather tiresome to track down what is going on behind the scenes.
/Fredrik
I tried disabling rokcandy, but that did not work. I dont see gantry on the plugin list, how can i disable it? Also do you think changing from checkboxes to radio buttons would remedy the problem?
@jameschrono:
Not all RT templates are built around their Gantry framework. Other names you might look for in your template setup could be 'Input styling'. Since you tried disabling rokcandy, that would suggest there's more at play here :/
/Fredrik
You're right, the problem is with the RT template, i've tried whith an other one, it works in ie8 ...
Thank you, you are a genius. I just set input styling to disabled in the template manager, works!!!!
Thank you sir.
Yes ! worked for me too ... but do you thing there is another solution ? .. worked hard on my design ... 😢
Hi leskma,
It just that the CSS doesn't work together so there has to be a solution!
Bob
Hi all,
I believe it's alittle bit more complicated than a CSS issue/conflict. CSS-wize, the input element is given the "display: none;" property to hide it, and a label is attached with a special class (two actually, depending on whether the checkbox/radiobutton is selected or not). There are two key CSS properties for the label, padding and background-image, used to offset the label enough to show the image of a styled "checkbox/radiobutton" in the background-image. The background-image further has an y-coordinate offset, which "selects" which image (or rather which part of) to be shown as select/not select element.
Ohh, I think I just had an Eureka! moment!!!
Using DebugBar and the javascript console, I tested the value of a checked checkbox both using ja_purity and rt_quasar_j15 templates. It would seem the checked property of the HTMLInputElement is NOT updated in IE8 when using the 'Input Styling' in Gantry. Thus, the inputs are still within the form and enabled (Which is why DebugBar and FireBug both show a completely normal Form structure), unfortunately we are completely unable to affect the state of the checkbox/radiobutton. Since checkboxes are not checked by default (unless explicitly added to the code), and unchecked boxes does not submit any value at all, the checkboxes seem to disappear in the submission.
You could set the state of the checkbox/radiobutton using javascript, though this would not update the classes of the respective label (leaving a confused visitor).
A further test, if I restore the display-property to 'inline' as opposed to 'none', the checkbox does indeed update it's value properly. So, apparently, IE8 does not "keep the link" between an input and it's label when the input is not displayed. This seems to work even with the input being offset to the point where it's no longer visible (IE: left: -10000px; as done by RT).
I'm not sure if this is an intended behaviour in IE8 or a bug. Using "visibility: hidden" instead generates the very same behavior.
/Fredrik
Hi Fredrik,
Well researched - I hadn't realised that the RokCandy was making such deep changes.
Bob
Hi Bob,
Thank you!
As I've understood, both RokCandy and the Gantry Framework are capable of far more than simply style your forms to match the look'n'feel of the template. Gantry seems especially powerful if you like building your own "flexible" templates.
I've yet to trace down the actions done by the "Form Styling" part, but it would seem it adds the "display: none" style to the HTMLFormInput elemets of type radio and checkbox, and adds two custom classes (rokchecks and rokcheckX enumerated) and a javascript event (I'd assume onClick) to the associated label that, simply toggles an additional class (rokchecks-active). As mentioned in my earlier post, these classes are merely used to display a background image and alter the y-axis offset depending on the type and state of the input, and add padding to the label text.
Rather simple once you get under it's skin.
/Fredrik
All very good and detailed stuff, Fredrik, (and thanks for your efforts) but I seem to be missing where the solution lies (sadly I am not a pro like you). We have the very same problem with rt_infuse_j15 and rt_kinetic_j15 and could use some beginner's help.
Thanks.
Tom
Hi Tom,
Please check Fredrik' recent posts (the last few weeks), I'm pretty sure he posted a CSS fix for the template CSS problem.
Bob
Hi Tom & Bob,
Unfortunately, the CSS-fix I posted some time ago only sorts the issue of the text and checkboxes/radiobuttons being miss-aligned. The problem here is that IE does not update inputs through the label-mechanism, that are not rendered on the webpage. Unfortunately, RocketTheme's form styling adds "display: none;" to the checkboxes and radiobuttons in order to hide them - this css needs to go away. Unfortunately, as it is added on the fly, I believe you're pretty much stuck with editing their obfuscated javascripts :/
You could try adding some javascript to change the display-property, but I'm not sure how reliable that would be, given that the form styling is done on the domReady event too...
A last option would be to add some onClick event to the labels, and force update the value of the checkbox/radiobutton. You'd run the risk of having your rendered image (of the checkbox) not being in sync with the actual input however...
/Fredrik
Hi Fredrik,
Oh dear . . .
Bob
Hmmm. This is indeed disappointing. Since we use Rockettheme templates often, I'm afraid that we'll have to search for another solution. Too bad, because Chronoforms was working quite well for us before this.
I will, however, continue to monitor this post topic in case an easy solution comes along.
Thanks for your hard work.
Hi Tom,
I'm afraid that it is a problem rooted in the way that RocketTheme do their scripting and CSS, I don't think that there is much to be done about it from the ChronoForms end.
Bob
Yes, thanks Bob. I'll go at it from the Rockettheme side and see what we can accomplish.
Hi Tom,
You could always disable the "Form styling" option in your RT-template as a quickfix. Maybe not as "pretty" as with the form styling enabled, but it will work with any browser. Though, in the end, this seems to be an issue the RocketTheme people have to sort out.
/Fredrik