pryley / float-labels.js

A zero-dependency plugin that applies the float label pattern to a form.
https://pryley.github.io/float-labels.js/
MIT License
88 stars 22 forks source link

Not working with textarea #1

Closed DevinWalker closed 8 years ago

DevinWalker commented 8 years ago

I noticed the plugin is having issues with textareas:

9-22-2015 3-06-44 pm

DevinWalker commented 8 years ago

Correction: Appears working with select fields but NOT text areas.

pryley commented 8 years ago

Looking into this now

pryley commented 8 years ago

I think this issue is related to https://github.com/WordImpress/Give/issues/271

Here is an example block of HTML that is generated from the Form Fields Manager:

<p id="give_email-wrap" class="form-row ">
    <label class="give-label" for="ffm-give_email">Email</label>
    <input id="give_email" type="email" class="give_email" data-required="yes" data-type="text" required="required" name="give_email" placeholder="" value="" size="40">
</p>

The label for is supposed to point to the id of the related input element. In the example above, the form for is "ffm-give_email" but the input id is "give_email".

However, float-labels should skip a form element if it is not structured correctly which is not happening completely...

pryley commented 8 years ago

v1.0.6: Skip a form element if related label is not found

DevinWalker commented 8 years ago

Hey @pryley I added the text area by actually following this tutorial on our documentation: https://givewp.com/documentation/developers/how-to-create-custom-form-fields/

... but I'm glad you're thinking ahead to FFM because we'll be releasing that soon here.

DevinWalker commented 8 years ago

@pryley I just updated and am seeing the same issue with the textarea. The code I'm using to add the textarea is within the documentation above.

DevinWalker commented 8 years ago
/**
 * Custom Form Fields
 * 
 * @param $form_id
 */
function give_myprefix_custom_form_fields( $form_id ) {

    //Only display for a specific form;
    //Remove "If" statement to display on all forms
    if ( $form_id == '754' ) {
        ?>
        <div id="give-referral-wrap">
            <label class="give-label" for="give-referral"><?php _e( 'How did you hear about GDI?:', 'give' ); ?></label>
            <span class="give-tooltip icon icon-question" data-tooltip="<?php _e( 'Please take a second to tell us how you first heard about Girl Develop It.', 'give' ) ?>"></span>
            <textarea class="give-textarea" name="give_referral" id="give-referral"></textarea>
        </div>
    <?php
    }//endif
}

add_action( 'give_after_donation_levels', 'give_myprefix_custom_form_fields', 10, 1 );
pryley commented 8 years ago

Will have this taken care of by today. Will also address the edge case of float-labels not detecting when duplicate IDs exist in the DOM.

pryley commented 8 years ago

v1.0.7: https://github.com/geminilabs/float-labels.js#changelog