IE9 and Form not working right

I have a form at http://www.zluth.org/vision-gathering-sign-up which seems to work fine using firefox, but when I tested it in IE9, it did not do any of the validations (all my fields are required), and it just sent a blank email. Does chronoforms work in IE9?

On a side note with this, the submit button looks like it is not getting the right style applied, as the button is showing up blue, but if you look at it in firefox, the button shows up the correct dark grey color.

Thanks!

Hi Jrthor2,

There are occasional problems with MooTools and IE9 please see this FAQ which lets you force the form page back to IE8 browser mode.

The button color is coming from the ChronoForms CSS where there is a setting of

.ccms_form_element .button {
  . . .
  background-color: rgb(55, 168, 240);
}

But I don't' think that this is the standard ChronoForms CSS.

It may be showing up in IE because the template CSS uses a lot of moz- prefixed settings which presumably are ignored in IE.

Bob

I've tried the php code you referenced and put it in the onLoad portion of the form (before and after the Show html) and I've tried it as set to controller and view, and nothing seems to working to get IE9 to validat the form. It still submits with empty fields.

Thanks.

Hi jrthor2,

The validation appears to work OK without the SEF URL

http://www.zluth.org/index.php?option=com_chronoforms&chronoform=visiongathering

I don't know why this should be though - I can't see any obvious problems or errors anywhere and the
scripts being loaded appear to be identical in each case.

Bob

So any ideas now? We have actually just advertised our page, with the SEF url, so now people are hitting that url, so I can't really change it or anything.

Thanks

Hi jrthor2,

One thing to try is to set the Relative URL to No on the form General tab. I don't see why this would make a difference but it might . . .

After that you are down to detailed debugging. I don't know of any reason why using SEF URLs would cause a JavaScript error :-( possibly one of the files isn't loading correctly??

Later: I ran a 'diff' comparison between the page source on the two versions (see below) and noticed that the version on the SEF page has <p> tags around the form which are invalid HTML (though other browsers tolerate them).

If you are including the form using the plug-in in an article please check the article HTML and remove any <p> tags around the {chronoforms}form_name{chronoforms} tags - if the editor insists on putting them back then add div tags which are OK.

Bob

10c10
<     <base href="http://www.zluth.org/vision-gathering-sign-up" />
---
>     <base href="http://www.zluth.org/index.php" />
14c14
<   <title>Zion Evangelical Lutheran Church - Vision Gathering Sign Up</title>
---
>   <title>Zion Evangelical Lutheran Church</title>
19,20d18
<   <link rel="stylesheet" href="/plugins/content/attachments/attachments1.css" type="text/css" />
<   <link rel="stylesheet" href="/plugins/content/attachments/attachments.css" type="text/css" />
28d25
<   <script src="/media/system/js/caption.js" type="text/javascript"></script>
33d29
<   <script src="/plugins/content/attachments/attachments_refresh.js" type="text/javascript"></script>
38,40d33
< window.addEvent('load', function() {
< 				new JCaption('img.caption');
< 			});
221c214
< <li  class="first icon-home"><a  href="/" title="Start here..." >
---
> <li  class="current first icon-home"><a class="current" href="/" title="Start here..." >
321,338c314
<                           <script type="text/javascript" src="/plugins/content/scripturelinks/scripturelinks/wz_tooltip/wz_tooltip.js"></script>
<       <script type="text/javascript" src="/plugins/content/scripturelinks/scripturelinks/wz_tooltip/tip_balloon.js"></script>
<       <div class="com-content ">
< 	<div class="article">
< 				
< 			
< 		
< 					<h2 class="contentheading">
< 							Vision Gathering Sign Up						</h2>
< 				
< 		
< 				
< 				
< 		<div class="jsn-article-content">
< 											<div class="content-links">
< 		<ul>	</ul></div>
< 							
< 										<p><form action="http://www.zluth.org/vision-gathering-sign-up?chronoform=visiongathering&event=submit" name="visiongathering" id="chronoform_visiongathering" method="post" class="Chronoform"><div class="ccms_form_element cfdiv_text" id="first_name_container_div" style=""><label for="first_name">First Name</label><input id="first_name" maxlength="150" size="30" class=" validate['required','alpha']" title="" type="text" value="" name="first_name" />
---
>                     <form action="http://www.zluth.org/index.php?option=com_chronoforms&chronoform=visiongathering&event=submit" name="visiongathering" id="chronoform_visiongathering" method="post" class="Chronoform"><div class="ccms_form_element cfdiv_text" id="first_name_container_div" style=""><label for="first_name">First Name</label><input id="first_name" maxlength="150" size="30" class=" validate['required','alpha']" title="" type="text" value="" name="first_name" />
352,360c328
< <div class="clear"></div><div id="error-message-input_submit_7"></div></div><input type="hidden" name="7e9a9de1081b0a51f2ddc0e3961542b8" value="1" /></form><div class="chronoform"><a href="http://www.chronoengine.com">Powered By ChronoForms - ChronoEngine.com</a></div></p> <div class="attachmentsContainer">
< 
< <div class="attachmentsList" id="attachmentsList_com_content_default_81"></div>
< 
< </div>			
< 					</div>
< 		<div class="clearbreak"></div>
< 					</div>
< </div>
---
> <div class="clear"></div><div id="error-message-input_submit_7"></div></div><input type="hidden" name="7e9a9de1081b0a51f2ddc0e3961542b8" value="1" /></form><div class="chronoform"><a href="http://www.chronoengine.com">Powered By ChronoForms - ChronoEngine.com</a></div>
382c350
<                 <div class=" jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div><div><div class="jsn-modulecontent"><form action="/vision-gathering-sign-up.html" method="post">
---
>                 <div class=" jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div><div><div class="jsn-modulecontent"><form action="/component/chronoforms/" method="post">
386c354
< 	<input type="hidden" name="Itemid" value="447" />
---
> 	<input type="hidden" name="Itemid" value="0" />
490c458,460
<             <div class=" jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div class="jsn-modulecontent">
---
>             <div class=" jsn-modulecontainer"><div class="jsn-modulecontainer_inner"><div class="jsn-modulecontent">      <script type="text/javascript" src="/plugins/content/scripturelinks/scripturelinks/wz_tooltip/wz_tooltip.js"></script>
>       <script type="text/javascript" src="/plugins/content/scripturelinks/scripturelinks/wz_tooltip/tip_balloon.js"></script>
>       

GREAT. The JCE editor was surrounging the {chronoforms} code with <p> tags. I changed them to <div> tags and validations are now working on IE9.

thanks for all your help!!!