Form fields not displaying in IE « Support Forum | Kriesi.at

Support Forum » Propulsion

Form fields not displaying in IE

8 posts from 3 voices

Started 2 months ago by Lindsey
Latest reply from Devin
This topic is closed
This topic is not a support question

Tags:

Lindsey
Member

Hi Team,

I'm not sure if this is part of the theme conflicting with the Digital Downloads plugin or not. Is there a way to tell? If you can give me advice on how to identify this, that would be great. I don't want to waste your valuable support time if this isn't a conflict with the theme.

Here is my urgent issue (urgent because I launched my business two days ago and have been heavily campaigning and running ads and tweets to this post which contains a form that isn't showing field names for anyone using IE (even version 9+).

These browser users are not able to see the fields that are in my download form such as \"email\", \"name\", etc. This is a problem because my customers are already emailing me telling me that they cannot download it when using IE.

You will see the form if you use IE and hit \"Check Out\" on my free download at: http://toxicfree.me/YVFcGe

Firefox, Safari, & Chrome are fine but a large population of my target audience uses IE.

Thanks for letting me know if this is theme related or not.

- Lindsey

Posted 2 months ago #
Nick
Moderator

Hi,

IE does not recognize the placeholder property, thus it doesn't display anything inside the text fields.

What you need to do is use this jquery (demo http://mathiasbynens.be/demo/placeholder ) script ( https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.min.js )

You will need to add the jquery.placeholder.min.js file to your website, and then hardcode it or enqueue it like the other .js files and then just repeat what the demo does.

Thanks,

Nick

Posted 2 months ago #
Lindsey
Member

Thank you so much, Nick!

This helps, and it's a bit embarrassing but I have to learn this and need clarification, please.

I have placed the jquery.placeholder.min.js file in my js folder. I haven't added a script to WP prior to this - only on hand-coded XHTML sites like my portfolio (www.iamlindsey.com) - not PHP like WP. (If it wasn't PHP - I'd put <script type="text/javascript" src="js/jquery.placeholder.min.js"></script> in the header. )

Would I place it in functions.php with the other .js files, like this?

if(!function_exists('avia_frontend_js'))
{
function avia_frontend_js()
{
wp_register_script( 'avia-default', AVIA_BASE_URL.'js/avia.js', array('jquery','avia-html5-video'), 1, false );
wp_register_script( 'avia-prettyPhoto', AVIA_BASE_URL.'js/prettyPhoto/js/jquery.prettyPhoto.js', 'jquery', "3.0.1", true);

wp_register_script( 'avia-default', AVIA_BASE_URL.'js/jquery.placeholder.min.js', array('jquery', 1, false or true? );

wp_register_script( 'avia-html5-video', AVIA_BASE_URL.'js/projekktor/projekktor.min.js', 'jquery', "1", true);
wp_register_script( 'adaptavia-slider', AVIA_BASE_URL.'js/adaptavia.js', 'jquery', "1.0.0", true);
}
}

Or would it be something like this in functions.php?

<?php
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/jquery.placeholder.min.js',
array('jquery')
);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Thanks for your clarification and time!!

- Lindsey

Posted 2 months ago #
Nick
Moderator
Hi,

Whichever way you want, either of the first two examples look good to me. Then you will also need to add that little bit inline jquery into the page
```
<script>

 jQuery(document).ready(function($) {
 $('input, textarea').placeholder();
});

</script>
```
You can also hard-code it in the footer.php next to the other inline jquery.

Thanks,

Nick
Posted 2 months ago #
Lindsey
Member

Awesome! Thanks for your help.

This solution worked for me in IE10 (however most people using IE are still in IE9). It is still much better than not having it in any IE browser, and hopefully people will upgrade soon.

Thank you, again, Nick!

You're the best.

- Lindsey

Posted 2 months ago #
Nick
Moderator

Hi,

I changed the jquery above in my last post a bit because the one you had is causing an error , that is why ie9 etc,. wouldn't display it. So please overwrite with this update above and see if this time it works better.

Thanks,

Nick

Posted 2 months ago #
Lindsey
Member

Thank you so much, Nick!

That worked perfectly!

I really appreciate your help!!

Kudos!!

- Lindsey

Posted 2 months ago #
Devin
Moderator

Glad Nick could help :)

Let us know if you have any other questions or issues.

Regards,

Devin

Posted 2 months ago #