Title: javascript / jquery in modals
Last modified: April 15, 2021

---

# javascript / jquery in modals

 *  [billyqureshi](https://wordpress.org/support/users/billyqureshi/)
 * (@billyqureshi)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/javascript-jquery-in-modals/)
 * hi
    i have a page with a simple html form, with some jquery for input masking
   etc. it works fine.
 * when i copy and paste this into a modal, the JS functions dont work at all.
 * is this a known limitation?
    -  This topic was modified 5 years, 1 month ago by [billyqureshi](https://wordpress.org/support/users/billyqureshi/).

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

 *  [Abhishek](https://wordpress.org/support/users/abhikr781/)
 * (@abhikr781)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/javascript-jquery-in-modals/#post-14330281)
 * Hello,
 * Please share the related snapshots of the issue, like your settings of modal,
   page settings, etc.
    and also share the page URL to check the issue.
 *  Thread Starter [billyqureshi](https://wordpress.org/support/users/billyqureshi/)
 * (@billyqureshi)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/javascript-jquery-in-modals/#post-14335495)
 * hi abhishek
    this link ([https://newcastleproms.co.uk/dev/native-obsentry](https://newcastleproms.co.uk/dev/native-obsentry))
   is to a page that is a simple form. it contains some jquery which initially i
   couldnt get to work in the modal but i have fixed that. however. if i copied 
   and pasted the html from this page into a modal but it changes the look of some
   of the fields – they arent styled properly.
 * ive attached a photo of the modal.
 * [https://pasteboard.co/JY2aFZ9.png](https://pasteboard.co/JY2aFZ9.png)
 * the html is here:
 *     ```
       <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
           <script src="https://code.jquery.com/jquery-1.2.6.js"></script>
           <script src="https://newcastleproms.co.uk/jquery.maskedinput-1.2.2-co.min.js"></script>    
           <script>var $oldJ = $.noConflict(true);</script>
           <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
           <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
       <script>
       jQuery(document).ready(function(){
       jQuery('#dateofprocedure').datepicker({ dateFormat: 'dd/mm/yy'}); 
       jQuery("#dateofprocedure").datepicker().datepicker("setDate", new Date());
       });
       $oldJ(document).ready(function($) {            
       $("#to").mask("99999999999");
       $("#mrn").mask("9999999*");
       });
       </script>
   
       <form name="frm1" action="https://newcastleproms.co.uk/dev/rvi-obstetrics-staff" method="GET">
       <input type="hidden" name="creator" value="staff">
   
         <table>
           <tr>
             <td>Mobile No:</td>
             <td><input name="mobile" id="to" type="text" /></td>
             <td>Date of Procedure:</td>
             <td><input name="date"  type="text" id="dateofprocedure"/></td>
   
           </tr>
   
           <tr>
             <td>Procedure:</td>
             <td><select id="surgicalprocedure" name="procedure"> 
               <option value="EFL">Epidural for Labour</option>
               <option value="EpiResite">Epidural Resite</option>
               <option value="C-section">Caesarean Section</option>
               <option value="MRP">Manual Removal of Placenta</option>
               <option value="Instr-Deliv">Instrumental Delivery</option>
               <option value="CS-Failed-Instr">Caesarean after Failed Instrumental</option>
               <option value="Peri-Repair">Perineal Repair</option>
               <option value="Haemostasis">Bleeding Haemostatis</option>
               <option value="ECV">ECV</option>
               <option value="Cerv-Suture">Cervical Suture</option>
               <option value="NA">Not applicable</option>
       </select>
               </td>
             <td>Priority:</td>
             <td><select id="priority" name="priority"> 
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="Notapplicable">Not applicable</option>
       </select>
               </td>
   
           </tr>
   
           <tr>
             <td>Neuraxial Anaesthesia:</td>
             <td><select id="neuraxial" name="neuraxial"> 
               <option value="EFL">Epidural for Labour</option>
   
               <option value="EpiTopUp">Epidural Top Up</option>
               <option value="Spinal">Spinal</option>
               <option value="CSE">CSE</option>
               <option value="None">None</option>
       </select>
               </td>
             <td>MRN:</td>
             <td><input name="mrn" id="mrn" type="text" /></td>
           </tr>
           <tr>
             <td>GA Provided?</td>
             <td><select id="ga" name="ga"> 
               <option value="No">No</option>
               <option value="Yes">Yes</option>
       </select>
               </td>
              <td>Anaes Surname:</td>
             <td><input name="anaes" id="anaes" type="text" />
               </td>
           </tr>
               <tr>
             <td>Periph Nerve Block?</td>
             <td><select id="ra" name="ra"> 
               <option value="No">No</option>
               <option value="Yes">Yes</option>
               <option value="Attempted">Attempted</option>
       </select>
               </td>
                <td>Procedure Notes:</td>
             <td><input name="clinnotes" id="clinnotes" type="text" maxlength="100" />
             <span id="count"></span>
               </td>
               <script>
       var maxchar = 100;
       var i = document.getElementById("clinnotes");
       var c = document.getElementById("count");
       c.innerHTML = maxchar;
   
       i.addEventListener("keydown",count);
   
       function count(e){
           var len =  i.value.length;
           if (len >= maxchar){
              e.preventDefault();
           } else{
              c.innerHTML = maxchar - len-1;
           }
       }
       </script>
           </tr>
           <tr>
             <td><input type="submit" value="SUBMIT"></td>
           </tr>
   
   
       </table> 
       ```
   
    -  This reply was modified 5 years, 1 month ago by [billyqureshi](https://wordpress.org/support/users/billyqureshi/).
    -  This reply was modified 5 years, 1 month ago by [billyqureshi](https://wordpress.org/support/users/billyqureshi/).
    -  This reply was modified 5 years, 1 month ago by [billyqureshi](https://wordpress.org/support/users/billyqureshi/).
 *  [Abhishek](https://wordpress.org/support/users/abhikr781/)
 * (@abhikr781)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/javascript-jquery-in-modals/#post-14341601)
 * Hello,
 * Good to know that you have managed to fix the previous issue.
 * Please let us know with which button you have associated this popup, so I can
   click on that and check the styling issue.

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

The topic ‘javascript / jquery in modals’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/oceanwp/4.1.6/screenshot.png)
 * OceanWP
 * [Support Threads](https://wordpress.org/support/theme/oceanwp/)
 * [Active Topics](https://wordpress.org/support/theme/oceanwp/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/oceanwp/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/oceanwp/reviews/)

## Tags

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

 * 3 replies
 * 2 participants
 * Last reply from: [Abhishek](https://wordpress.org/support/users/abhikr781/)
 * Last activity: [5 years, 1 month ago](https://wordpress.org/support/topic/javascript-jquery-in-modals/#post-14341601)
 * Status: not resolved