• Resolved farlington

    (@farlington)


    Nice plugin!
    A general question about forms – I was hoping I could use short codes and inject just the inputted text and also the font name (current selection from the dropdown) from fontsampler into two separate hidden dynamic form fields on the same page. Can this be done?
    Otherwise can the values be extracted via jquery ?

    NB I see you have an event for fontssampler.events.activatefont which fires when a new font is selected (?does it fire on page load) but can’t see what would trigger for an edit to the text area.
    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author kontur

    (@kontur)

    Hey,

    both things can be done via jQuery. As you already found, the fontsampler.events.activatefont event can be used to detect the font being changed. You can use that event and its parameters to update the text field. The object passed from the event is that fontsampler instance root. You can get the selected font name with the selector .fontsampler .font-lister .selectric .label or you use $(.fontsampler .font-lister select option:selected).html()

    Equally, and there is no need for a fontsampler-specific event for text changes, you can just use the keyup/keydown event of the text field (use .fontsampler .current-font selector) or the change event of the select (use .fontsampler select[name=”sample-text”] ) to react to changes in the text.

    Let me know how you get on with those things ??

    Thread Starter farlington

    (@farlington)

    Thanks for the reply. Just tested this and still having issues – I can trap the event but can’t extract the label value
    Here is my code (in footer for now):

    <script type="text/javascript">
    jQuery(document).ready(function( $ ){
      $("body").on("fontsampler.event.activatefont", ".fontsampler-wrapper", function (myevent) {
        console.log("The event type is: " + myevent.type);
    // The event type is: fontsampler
       console.log(myevent.font-lister.selectric.label);
    // Uncaught ReferenceError: lister is not defined
    });
    });
    </script>
    

    Also can I establish in chrome devtools (f12) what properties and methods are available for fontsampler without referring to the documentation?

    NB looks like a typo in the GitHub documentation: should be fontsampler.event.afterinit and fontsampler.event.activatefont?

    Thanks again

    Plugin Author kontur

    (@kontur)

    Thanks, I fixed the typo, you are correct! ??

    Inside your event listener function this will give you a jQuery element of the fontsampler:

    $(myevent.target)

    So you can use:

    $(myevent.target).find(".font-lister option:selected").val() // the index of the selected option
    $(myevent.target).find(".font-lister option:selected").html() // the displaed name of the selected option

    Does this help? ??

    Plugin Author kontur

    (@kontur)

    Closing as resolved.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Extract field data for forms’ is closed to new replies.