Title: Add Custom Javascript?
Last modified: August 21, 2016

---

# Add Custom Javascript?

 *  [Newfound](https://wordpress.org/support/users/precipitatejournal/)
 * (@precipitatejournal)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/add-custom-javascript/)
 * Hi there!
 * Plugin’s look and functions are simply boss.
 * However, the custom javascript I’m using for the radio button on a form within
   the modal is not being recognized. Works for the form on any given page, but 
   not opened in the modal. Hence, the modal displays both options, not hiding one
   or the other, as according to the js.
 * Is there any way I can add this custom js to the plugin or some other work around
   you may know of?
 * Here’s a link to the site with the form on a page. The modal button is in the
   side bar, lower right.
 * [http://www.newfoundjournal.org/donation-test/](http://www.newfoundjournal.org/donation-test/)
 * Also, here’s the js I’m working with:
 *     ```
       <script type="text/javascript">// <![CDATA[
           (function($){
               $(document).ready(function(){
                   $("#recurring").hide();
                   $(".option").click(function(){
                       if($(this).val()=='single'){
                           $('#recurring').hide('slow', function(){
                               $('#single').show('slow');
                           });
                       } else {
                           $('#single').hide('slow', function(){
                               $('#recurring').show('slow');
                           });
                       }
                   });
               });
           })(jQuery);
       // ]]></script>
       ```
   
 * Any insight would be appreciated!
 * Cheers,
 * Daniel
 * [https://wordpress.org/plugins/easy-modal/](https://wordpress.org/plugins/easy-modal/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Daniel Iser](https://wordpress.org/support/users/danieliser/)
 * (@danieliser)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/add-custom-javascript/#post-4626637)
 * Hey newfound,
 * Your issue is likely caused by the fact that you are targeting #recurring by 
   an id which can by definition only exist once in the entire site. So it targets
   the first one in the document and since the modals are loaded in the footer the
   other form takes precedence and so your show/hide isn’t triggered on the correct
   element.
 * Try removing the other form or rewriting it to use classes and jquery traversal
   to select the correct div to show/hide.
 * Thanks for the great words, please take a moment to rate and review the plugin
   and or support [here](http://wordpress.org/support/view/plugin-reviews/easy-modal)
 *  Thread Starter [Newfound](https://wordpress.org/support/users/precipitatejournal/)
 * (@precipitatejournal)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/add-custom-javascript/#post-4626761)
 * Well, removed the page form altogether and still the modal isn’t recognizing 
   my JS. I do have the JS added to a custom JS box in the form plugin. Is that 
   maybe keeping it from applying to the footer? Any insight would be appreciated!
 *  Plugin Author [Daniel Iser](https://wordpress.org/support/users/danieliser/)
 * (@danieliser)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/add-custom-javascript/#post-4626766)
 * I can’t see a reason why your code wouldnt work from anywhere on the page to 
   be honest. I think you need to make the following changes though.
 *     ```
       <script type="text/javascript">// <![CDATA[
           (function($){
               $(document).ready(function(){
                   $("form .recurring").hide();
                   $(".option").click(function(){
                       var $this = $(this);
                       var $form = $this.parents('form').eq(0);
                       if($this.val()=='single'){
                           $('.recurring', $form).hide('slow', function(){
                               $('.single', $form).show('slow');
                           });
                       } else {
                           $('.single', $form).hide('slow', function(){
                               $('.recurring', $form).show('slow');
                           });
                       }
                   });
               });
           })(jQuery);
       // ]]></script>
       ```
   
 * Also i looked for this script in the html of the page returned and i didnt find
   it. So likely since the form ins’t in the content of the main page it didnt load
   its JS.
 * I would move the script to your themes JS or a custom JS file via plugin. The
   code above should allow multiple instances on one page. You will need to change
   your divs from `id="single"` to `class="single"`.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Add Custom Javascript?’ is closed to new replies.

 * ![](https://ps.w.org/easy-modal/assets/icon-256x256.png?rev=982657)
 * [Easy Modal](https://wordpress.org/plugins/easy-modal/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/easy-modal/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/easy-modal/)
 * [Active Topics](https://wordpress.org/support/plugin/easy-modal/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/easy-modal/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/easy-modal/reviews/)

## Tags

 * [add](https://wordpress.org/support/topic-tag/add/)
 * [custom](https://wordpress.org/support/topic-tag/custom/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [js](https://wordpress.org/support/topic-tag/js/)

 * 3 replies
 * 2 participants
 * Last reply from: [Daniel Iser](https://wordpress.org/support/users/danieliser/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/add-custom-javascript/#post-4626766)
 * Status: not resolved