API tools faq
paste
Advertisement
Guest User

Java

a guest
Oct 31st, 2017
203
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 10.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- Bootstrap core CSS -->
  8.     <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
  9.  
  10.     <!-- Custom styles for this template -->
  11.     <link href="css/logo-nav.css" rel="stylesheet">
  12.    
  13.      <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
  14.     <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
  15.     <script src="jquery-ui.min.js" type="text/javascript"></script>
  16.  
  17.     <script type="text/javascript">
  18.         $(document).ready(function(){
  19.  
  20.             $(document).on('keydown', '.username', function() {
  21.                
  22.                 var id = this.id;
  23.                 var splitid = id.split('_');
  24.                 var index = splitid[1];
  25.  
  26.                 $( '#'+id ).autocomplete({
  27.                     source: function( request, response ) {
  28.                         $.ajax({
  29.                             url: "getDetails.php",
  30.                             type: 'post',
  31.                             dataType: "json",
  32.                             data: {
  33.                                 search: request.term,request:1
  34.                             },
  35.                             success: function( data ) {
  36.                                 response( data );
  37.                             }
  38.                         });
  39.                     },
  40.                     select: function (event, ui) {
  41.                         $(this).val(ui.item.label); // display the selected text
  42.                         var userid = ui.item.value; // selected id to input
  43.  
  44.                         // AJAX
  45.                         $.ajax({
  46.                             url: 'getDetails.php',
  47.                             type: 'post',
  48.                             data: {userid:userid,request:2},
  49.                             dataType: 'json',
  50.                             success:function(response){
  51.                                
  52.                                 var len = response.length;
  53.  
  54.                                 if(len > 0){
  55.                                     var id = response[0]['id'];
  56.                                     var name = response[0]['name'];
  57.                                     var email = response[0]['email'];
  58.                                     var age = response[0]['age'];
  59.                                     var salary = response[0]['salary'];
  60.  
  61.                                     document.getElementById('name_1'+index).value = name;
  62.                                     document.getElementById('age_'+index).value = age;
  63.                                     document.getElementById('email_'+index).value = email;
  64.                                     document.getElementById('salary_'+index).value = salary;
  65.                                    
  66.                                 }
  67.                                
  68.                             }
  69.                         });
  70.  
  71.                         return false;
  72.                     }
  73.                 });
  74.             });
  75.            
  76.            
  77.         });
  78.  
  79.     </script>
  80. </head>
  81. <body>
  82.  
  83.     <div class="container">
  84.     <nav class="navbar navbar-default" style="
  85.     background-color: #afafaf; ">
  86.   <div class="container-fluid">
  87.     <div class="navbar-header">
  88.       <a class="navbar-brand" href="#">
  89.      
  90.       </a>
  91.     </div>
  92.   </div>
  93. </nav>
  94.           <div class="row">
  95.        
  96.             <div class="col-10"style="
  97.     background-color: #d2d2d2; padding: 0;">
  98.     <form name="catwebformform43575">
  99.     <ol class="breadcrumb" style="
  100.     padding: 0;">
  101.   <li>
  102.       <center style="
  103.     background-color: #3a4692;"><font color="white">        Vrijgeven/etiketteren ( ctpetiqt_d )</font> </center>
  104.     </li>
  105.     </ol>
  106.     <!-- Inputy -->
  107.      <div class="row">
  108.      <div class="col-12" >
  109.      </br></br></br></br>
  110.      </div>
  111.           <div class="col-7"  style="padding: 5px;
  112.           border:1px solid #929292;
  113.           -webkit-box-shadow:0px 0px 1px 1px #929292 ;
  114. -moz-box-shadow:0px 0px 1px 1px #929292 ;
  115. box-shadow:0px 0px 1px 1px #929292 ;">
  116.  
  117.  
  118.         <div class="input-group">
  119.         <span class="input-group-addon" id="basic-addon1">Vrij te geven prod</span>
  120.         <div class='tr_input'>
  121.         <input type="text" id="Vrijtegevenprod"  class='username' id='username_1' placeholder="" aria-describedby="basic-addon1" style="
  122.     max-width: 200px; background-color: #ffffcc;
  123. ">
  124. </div>
  125.  
  126.         </div>
  127.         </br></br></br></br>
  128.         </div>
  129.           <div class="col-3">
  130.         Bloedgroep
  131.         </div>
  132.         <div class="col-7" style="padding: 5px;
  133.           border:1px solid #929292;
  134.           -webkit-box-shadow:0px 0px 1px 1px #929292 ;
  135. -moz-box-shadow:0px 0px 1px 1px #929292 ;
  136. box-shadow:0px 0px 1px 1px #929292 ;">
  137.  
  138.  
  139.  
  140.         <div class="input-group">
  141.         <div class="col-3">
  142.         <span class="input-group-addon" id="basic-addon1">Origineel EIN</span>
  143.         </div>
  144.         <div class="col-9">
  145.         <input type="text" id="OrigineelEIN" class="form-control" placeholder="" aria-describedby="basic-addon1" style="
  146.     width: 300px;
  147. ">
  148.         </div>
  149.         </div>
  150.         </br>
  151.        
  152.         <div class="input-group">
  153.         <div class="col-3">
  154.         <span class="input-group-addon" id="basic-addon1">Afgenomen op</span>
  155.         </div>
  156.         <div class="col-9">
  157.         <div class='tr_input'>
  158.         <input type="text"  class='name' id='name_1' placeholder="" aria-describedby="basic-addon1" style="
  159.     width: 200px;
  160. ">
  161. </div>
  162.         </div>
  163.         </div>
  164.        
  165.        
  166.         <div class="input-group">
  167.         <div class="col-3">
  168.         <span class="input-group-addon" id="basic-addon1">Exp. datum</span>
  169.         </div>
  170.         <div class="col-9">
  171.         <div class='tr_input'>
  172.         <input type="text" class='age' id='age_1' placeholder="" aria-describedby="basic-addon1" style="
  173.     width: 330px;
  174. ">
  175. </div>
  176.         </div>
  177.         </div>
  178.    
  179.        
  180.         <div class="input-group">
  181.         <div class="col-3">
  182.         <span class="input-group-addon" id="basic-addon1">Fenotype</span>
  183.         </div>
  184.         <div class="col-9">
  185.         <div class='tr_input'>
  186.         <input type="text" class='email' id='email_1' placeholder="" aria-describedby="basic-addon1" style="
  187.     width: 450px;
  188. ">
  189. </div>
  190.         </div>
  191.         </div>
  192.        
  193.        
  194.         <div class="input-group">
  195.         <div class="col-3">
  196.         <span class="input-group-addon" id="basic-addon1">Kenmerken</span>
  197.         </div>
  198.         <div class="col-9">
  199.         <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" style="
  200.     width: 450px;
  201. ">
  202.         </div>
  203.         </div>
  204.        
  205.        
  206.         <div class="input-group">
  207.         <div class="col-3">
  208.         <span class="input-group-addon" id="basic-addon1">Productcode</span>
  209.         </div>
  210.         <div class="col-9">
  211.         <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" style="
  212.    width: 200px;
  213. ">
  214.         </div>
  215.         </div>
  216.        
  217.        
  218.         <div class="input-group">
  219.         <div class="col-3">
  220.         <span class="input-group-addon" id="basic-addon1">Bloedgroepcode</span>
  221.         </div>
  222.         <div class="col-9">
  223.         <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" style="
  224.     width: 180px;
  225. ">
  226.         </div>
  227.         </div>
  228.        
  229.        
  230.         <div class="input-group">
  231.         <div class="col-3">
  232.         <span class="input-group-addon" id="basic-addon1">EIN op eindetiket</span>
  233.         </div>
  234.         <div class="col-9">
  235.         <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" style="
  236.     width: 300px;
  237. ">
  238.         </div>
  239.         </div>
  240.        
  241.        
  242.         <div class="input-group">
  243.         <div class="col-3">
  244.         <span class="input-group-addon" id="basic-addon1">Code ISO-groep</span>
  245.         </div>
  246.         <div class="col-9">
  247.         <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" style="
  248.     width: 50px;
  249. ">
  250.         </div>
  251.         </div>
  252.        
  253.        
  254.         <div class="input-group">
  255.         <div class="col-3">
  256.         <span class="input-group-addon" id="basic-addon1">Naam patient</span>
  257.         </div>
  258.         <div class="col-9">
  259.         <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" style="
  260.     width: 450px;
  261. ">
  262.         </div>
  263.         </div>
  264.         </br>
  265.         </div> 
  266.         <div class="col-12" style="padding: 5px;
  267.           border:1px solid #929292;
  268.           -webkit-box-shadow:0px 0px 1px 1px #929292 ;
  269. -moz-box-shadow:0px 0px 1px 1px #929292 ;
  270. box-shadow:0px 0px 1px 1px #929292 ;">
  271.             <div class="input-group">
  272.         <span class="input-group-addon" id="basic-addon1">Origineel EIN</span>
  273.         <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" style="
  274.     max-width: 300px;
  275. ">
  276.         </div>
  277.         </br></br>     
  278.                
  279.        
  280.            
  281.         </div> 
  282.         </form>
  283.     </div>
  284.    </div>  
  285.    
  286.    
  287.    
  288.     <div class="col-2" style="
  289.     padding-left: 0;
  290.     background-color: #afafaf;
  291. ">
  292.  
  293.     <img class="img-responsive" src="./img/logo.png" alt="Logo" style="
  294.     width: 100%;
  295. ">
  296. <!-- button on side -->
  297. <div class="btn-group btn-group-vertical btn-group-lg" style="
  298.     padding-top: 20px;
  299.     padding-right: 58px;
  300.     padding-left: 58px;
  301.     padding-bottom: 20px;
  302. ">
  303. <center>
  304.             <button type="button" id="myBtn" class="btn-group btn-group-sm" style="
  305.     margin: 25px; text-align: center;
  306.  
  307. ">
  308.                 <center style="vertical-align: middle;">Esc</center>
  309.             </button>
  310.  
  311.  
  312.            
  313.            
  314.  
  315.     </div>
  316.           </div>
  317.      
  318.    
  319.     </div>
  320.      <!-- Messages -->
  321.  <!-- The Modal -->
  322. <div id="myModal" class="modal">
  323.  
  324.   <!-- Modal content -->
  325.   <div class="modal-content">
  326.    <header class="header">
  327.      <a href="#" class="close" style="
  328.     font-size: 15px;margin-top: -5px; width: 0.675em;
  329.     height: 0.475em;
  330.     width: 15px;
  331.     height: 15px;
  332.     background-color: tomato;
  333.    
  334. ">x</a>  
  335.     </header>
  336.    
  337.     <p>Some text in the Modal..</p>
  338.   </div>
  339.  
  340. </div>
  341.   <!-- Bootstrap core JavaScript -->
  342.    
  343.     <script src="vendor/popper/popper.min.js"></script>
  344.     <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  345.     <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  346.    
  347.    
  348.    
  349.    
  350.    
  351.   <script>
  352. // Get the modal
  353. var modal = document.getElementById('myModal');
  354.  
  355. // Get the button that opens the modal
  356. var btn = document.getElementById("myBtn");
  357.  
  358. // Get the <span> element that closes the modal
  359. var span = document.getElementsByClassName("close")[0];
  360.  
  361. // When the user clicks the button, open the modal
  362. btn.onclick = function() {
  363.     modal.style.display = "block";
  364. }
  365.  
  366. // When the user clicks on <span> (x), close the modal
  367. span.onclick = function() {
  368.     modal.style.display = "none";
  369. }
  370.  
  371. // When the user clicks anywhere outside of the modal, close it
  372. window.onclick = function(event) {
  373.     if (event.target == modal) {
  374.         modal.style.display = "none";
  375.     }
  376. }
  377. </script>
  378.   </body>
  379.  
  380. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!