Pro Form "Buy Now" button not working in IE9

Just to let you guys know, the before mentioned button does not work independently (theme independent).

I had to hack my funtions.php to disable the auto paragraph function, and afterwards edit 9 pages and 169 posts with inserting coded breaks and paragraphs just to make the buy now button working with IE9

This wasnt one of my good days! You need to correct this!

• This topic was modified 4 years ago by  Ronnie.

Hi Ronnie.

I’m sorry you went through that but, although we’ve had someone report from time to time a problem with IE9, it’s normally a problem introduced by the custom theme or another plugin.

A default installation of WP with s2Member only, doesn’t have that problem in our tests, so it’s being introduced by something else. To find what, you’d test the theme and other plugins. Knowledge Base » Common Troubleshooting Tips

Once you find what is causing the problem, you can find a replacement, or ask the developer to fix it.

I hope that helps.

I would like to chime in for IE9. I used the Pro-form for billing modification and one member could not get it to work. When i suggested she tries a different browser, she did and it worked. She emailed me back saying that it was with IE9 that it would not work.

Hi there,

There’s a bug with IE9 that we found a few weeks back that might be the issue. Try editing the page in HTML mode, and put the following right before the start of the Pro Form (before the new line, or anything): </p>

The error is caused by IE9s HTML parsing techniques. It closes the form before anything is put into it and that means that the submit buttons don’t work because there’s nothing to submit.

Ill re-enable the wordpress autoparagraph function and try it.
Ill keep you posted in 2 minutes.

@ Bruce

Unfortunately I cannot confirm that your solution works effectively.

This is how a payment page looks like in HTML:

<img class="alignnone size-full wp-image-464" title="ssl" src="https://www.movielocker.dk:443/wp-content/uploads/2012/12/ssl2.png" alt="" width="102" height="32" />
<br>
[s2If is_user_logged_in()]<br>
<strong>Du er allerede medlem og er logget ind på din konto.<br>
Hvis du ønsker at købe et nyt medlemskab  skal du først logge af! </strong>[/s2If]
[s2If !is_user_logged_in()]
For denne engangs-betaling for du adgang i 24 timer til MovieLocker.<br>
Herefter vil dit medlemsskab automatisk blive slettet, og du vil ikke blive opkrævet igen.<br>
Du skal dog oprette dig som medlem og betale endnu engang hvis du vil have medlemsskab hos os igen.
<br><br>
Dette er en god løsning for dig, hvis du skal hygge en enkelt aften med kæresten eller vennerne, eller hvis du er ved at kede dig ihjel og mangler lidt spænding!
</p>[s2Member-Pro-PayPal-Form level="1" ccaps="" desc="Uden abonnement / 12,- for 24 timer" ps="movielocker" lc="" cc="DKK" dg="0" ns="1" custom="www.movielocker.dk" ta="0" tp="0" tt="D" ra="12" rp="1" rt="M" rr="0" rrt="" rra="2" accept="paypal" accept_via_paypal="paypal,visa,mastercard,amex,discover,maestro" accept_coupons="0" default_country_code="DK" captcha="0" /]
[/s2If]

You can view the page with IE here: https://www.movielocker.dk/?page_id=507
It is still not possible to click the buy now button.

The solution is to add this code to your custom theme functions.php:

remove_filter ('the_content', 'wpautop');

And regarding the buy now button, I am allowed by paypal to use a custom Buy Now button image (we are not using PayPal Pro but PayPal express checkout), and it would be great if you or someone in the support team would tell me how I can either a) change the button image, or 2) atleast have it in our native language (danish).
I have searched the forum, and tried the solutions with hacks etc, and nothing works.

Hi Ronnie,

The solution is to add this code to your custom theme functions.php:

remove_filter ('the_content', 'wpautop');

Thanks for that info. We had found that the issue was arising because of the paragraph tags but did not find the root cause of it. This should work perfectly in the future.

and it would be great if you or someone in the support team would tell me how I can either a) change the button image, or 2) atleast have it in our native language (danish).

Are you talking about the PayPal button image, or the button that’s generated by s2Member?

The PayPal image can be changed with the image attribute. See: Knowledge Base » Custom Image in PayPal Button.

If you’re looking to change the way that the Buttons look, you’ll need to write a little hack. Try this:

Will there be an update to s2 to work around this IE9 but or will everyone have to edit their pro-forms like that in the future?

Hi Cassel,

There really isn’t a way to get this patched from within s2Member. I’ll let Jason know about the issue with wpautop, but I do not think that there is a way for this to be fixed within s2Member. This issue is more of an incompatibility between IE9 and wpautop than IE9 and s2Member.

Thanks for the heads up on this thread.

To clarify what Bruce is talking about here…

We researched a bug report related to IE9 several weeks ago, which we ultimately tracked back to the WordPress Editor, and WordPress content filters. While the issue causing this problem in IE9, can be caused in part by the wpautop filter, it’s really NOT the true problem. The wpautop filter is just doing it’s job.

The real issue is related to an invalid HTML nesting order, and how IE9 in particular will respond when your HTML tags are out of balance (e.g. when you have an invalid HTML document).

So what is an invalid HTML nesting order (aka: unbalanced tags)?

For example, if you look at the source code for your site, you might discover something like this.

<div class="content">
	</p>
</div>

See how there is a matching open/close tag for the div element, but there is no matching open tag for the p element? That’s an invalid nesting order. Or, some might refer to this as unbalanced HTML code.

IE9 (more so, than other browsers) attempts to correct unbalanced tags in ways that can lead to some problems in JavaScript, which will effectively break some functionality with elements on your page, such as an s2Member Pro Form. You can’t really blame IE9 for this either, because really, your site contains unbalanced tags when this occurs, and that’s what really needs to be fixed. This problem just shows up more in IE9, because… well Microsoft. Need I say more :-)

Anyway, here are some things that can cause unbalanced tags.

• If you’re working in the WordPress Visual Editor and you’re relying on WordPress to write your HTML code for you, this is always possible, just given the nature of a WYSIWYG editor like this. This is why WordPress comes with an option that you can enable in your Dashboard, to help prevent this on your site.
  
• If your theme itself has unbalanced HTML, this could be an issue. If correcting your WordPress Posts/Pages to ensure they do NOT contain unbalanced HTML tags, does NOT fix the issue for you; then look elsewhere. Does your theme contain an extra closing </div> tag somewhere by mistake? It’s always a good idea to run your site through the W3C Markup Validation Service, to ensure that your site (or specific pages on your site) are coded properly. See: http://validator.w3.org/
• While the wpautop filter in WordPress seems to work just fine most of time, some site owners DO experience subtle issues with this filter, and I have personally seen it cause problems for a few folks here and there. If all else fails, you can publish a WordPress Post/Page with that filter disabled. There is a great plugin called Raw HTML that allows you do this on a per-Post/Page basis if you like.

In conclusion, this is NOT a bug with s2Member specifically (not that I’m aware of at this time). It’s also NOT a bug with WordPress (that I’m aware of at this time). It’s really just caused by unbalanced HTML tags, and that can happen for any number of reasons.

Always run your site through the W3C Markup Validation Service, to ensure that your site (or specific pages on your site) are coded properly.

I can’t really provide a one-size fits all solution here. The solution to this problem is to balance your HTML tags. Depending on what’s causing unbalanced tags on your installation, the solution might be slightly different from one case to the next.