WordPress.org

Ready to get started?Download WordPress

Forums

Emma Emarketing Plugin for WordPress
How to replace Placeholder with onfocus and onblur (4 posts)

  1. Souljah67
    Member
    Posted 2 years ago #

    Awesome plugin just had a question about replacing the code where the text field calls for the Placeholder command. Placeholder works perfect in Firefox but does not work in IE. I have tried to edit the code but keep getting a syntax error.

    Here is the current code for the email address field:

    $emma_form .= '<input id="emma-email" class="emma-form-input" type="text" name="emma_email" size="30" placeholder="' . $this->form_setup_settings['email_placeholder'] . '">';

    And I basically want to remove the placeholder and replace it with this:

    $emma_form .= '<input id="emma-email" class="emma-form-input" type="text" name="emma_email" size="30" onfocus="if (this.value=='Email Address')
    {this.value='';}" onblur="if (this.value=='') {this.value='Email Address';}">';

    If this can be done what is the proper way to write the code? Because I keep getting a syntax error when I try it the way I posted above.

    Thanks

    http://wordpress.org/extend/plugins/emma-emarketing-plugin/

  2. John Housholder
    Member
    Plugin Author

    Posted 2 years ago #

    you are absolutely correct, IE > 10 doesn't care for the placeholder attribute.
    please feel free to modify the plugin to your liking, but do keep in mind anything modded will be overwritten in an update.

    The reason for the syntax error is the way single and double quotes are handled in php,

    everything on the right of the = is getting concatenated into the variable on the left, since the plugin uses single quotes, the statement: this.value=='Email Address' causes php to think the end of those single quotes is over.

    all you have to do is replace those single quotes with double ones.

    $emma_form .= '<input id="emma-email" class="emma-form-input" type="text" name="emma_email" size="30" onfocus="if (this.value=="Email Address")
    {this.value="";}" onblur="if (this.value=="") {this.value="Email Address";}">';

    a slight caveat, if i may, and i only bring it up because we've done the same thing elsewhere.
    by using JS to change the actual value of an input element, when the user clicks submit, that's the value that will get processed in the form. No worries for "Email Address", as the plugin uses the internal WP function is_email() to validate email addresses, but if you were to do similarly for "First Name" and "Last Name", if the user leaves in those default values, they'll get passed to Emma.

    thanks for posting!

  3. Souljah67
    Member
    Posted 2 years ago #

    I tried what you posted above and it got rid of the syntax error but nothing shows up in the text field boxes now on both IE and Firefox.

    You mentioned using JavaScript do I have to have a JS at the top of the class-form.php page? Or should this work by just replacing the default code with the code you provided above?

    Thanks for the quick reply.

  4. John Housholder
    Member
    Plugin Author

    Posted 1 year ago #

    admittedly, i did not test the code i sent you, sadly we don't have the time to invest in custom alterations of the plugin, but we can help out in small ways.
    i mentioned using JS, as that is what this code is,
    onblur="if (this.value=="") {this.value="Email Address";}"
    it's inline JavaScript. it simply says: "when this element receives focus, and if the value is empty, then make the value "Email Address"
    i cannot say why that would not work in IE or FF, that question is beyond the scope of support we offer. however, yes, it is better to include JS within the <head> or down below the footer of the page.
    there is an excellent online support forum for questions of this nature you may have heard of called stackoverflow
    it is an invaluable resource and chances are, someone has already had the problem you're having.
    ty for posting.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.