Events Made Easy › Forums › How do I … › Add JavaScript to an RSVP form

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Fri 22 Aug 2014 at 00:19 #52709
    Anonymous
    Inactive

    I’d like to add some JavaScript-driven functionality to the RSVP form, such as…

    • Auto-formatting the phone number if the user doesn’t include any separators
    • Changing the visibility of certain form rows based on the options chosen in other form elements
    • Other form validation before submission

    All of these things require modification of the HTML elements as they’re created, but the form elements are all created under the hood by EME. For example, to tweak the phone number formatting after the user has finished entering it, I’d need to add an “onblur” event handler to the form field. However, there’s no way to do that without changing the core EME code. Or am I missing something?

    Fri 22 Aug 2014 at 00:26 #52710
    Franky
    Keymaster

    Sure that is possible, using jquery. Small example (see js/eme_admin_events.js for more examples):

    
   jQuery('textarea#event_cancel_form_format').blur(function(){
         alert(jQuery(this).val(''));
   });
    Fri 19 Sep 2014 at 21:57 #52859
    Anonymous
    Inactive

    Thanks for the tip. I’m not sure where to add my changes, though. The more critical items are checks that need to be made when the user tries to submit the form. In the file you pointed to as an example, I see a “validateEventForm” function at the bottom, but it looks like it only applies to admin pages. I’m guessing there’s similar code for the event registration form, but I couldn’t find it.

    And on a related note, how do I ensure that my changes don’t get overwritten when I install updates to the EME plugin? Or is there no way around that, and I have to re-apply them with each update?

    Sat 20 Sep 2014 at 16:20 #52864
    Franky
    Keymaster

    Add the code either to a javascript file of your theme or try adding it to the setting eme ‘extra html headers’ (in the tab ‘Others’), then you shouldn’t need to worry about an update.

    Fri 3 Oct 2014 at 19:22 #52980
    Anonymous
    Inactive

    jsbarrett,

    I am also interested in doing some of the same things you mentioned in your first post, but my jQuery is terrible.

    Have you made any progress on this?

    Any code snippets you could share?

    These two would interest me:

    • Auto-formatting the phone number if the user doesn’t include any separators
    • Changing the visibility of certain form rows based on the options chosen in other form elements

    Also looking to remove the “Previous year” & “Next year” text in pagination buttons via scripting – but that’s another thread.

    Thanks for any assistance you can give!

    Fri 3 Oct 2014 at 20:49 #52983
    Anonymous
    Inactive

    Sorry, but I haven’t taken a stab at it yet. This is just one of many plates I’m spinning right now, and at the moment it’s kind of a low priority. When I get around to working on it, I’ll share my results here.

    Fri 3 Oct 2014 at 20:50 #52985
    Anonymous
    Inactive

    I know the feeling! 🙂

    Sun 5 Oct 2014 at 15:56 #52993
    Franky
    Keymaster

    Try this for your phone thing: http://snipplr.com/view/11578/jquery-snippet-to-convert-numbers-into-us-phone-number-format-as-theyre-typed/
    Concerning visibility, check out the functions updateShowHideRecurrence and updateShowHideRecurrenceSpecificDays in js/eme_admin_events.js as examples 🙂

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘How do I …’ is closed to new topics and replies.
Scroll to Top