javascript / jquery in modals

hi abhishek
this link (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

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.
• This reply was modified 5 years, 1 month ago by billyqureshi.
• This reply was modified 5 years, 1 month ago by billyqureshi.