API tools faq
paste
Advertisement
noam76

index.php

noam76
Apr 17th, 2020
594
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 3.11 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>How to autocomplete data on multiple fields with jQuery and AJAX</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel = "stylesheet" type = "text/css" href = "myStyle.css"/>
  8. <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
  9. <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
  10. <script src="jquery-ui.min.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function(){
  13.   $(document).on('keydown', '.username', function() {                
  14.     var id = this.id;
  15.     var splitid = id.split('_');
  16.     var index = splitid[1];
  17.     $( '#'+id ).autocomplete({
  18.       source: function( request, response ) {
  19.         $.ajax({
  20.             url: "getDetails.php",
  21.             type: 'post',
  22.             dataType: "json",
  23.             data: {
  24.                 search: request.term,request:1
  25.             },
  26.             success: function( data ) {
  27.                 response( data );
  28.             }
  29.         });
  30.       },
  31.       select: function (event, ui) {
  32.         $(this).val(ui.item.label); // display the selected text
  33.         var userid = ui.item.value; // selected id to input
  34.  
  35.         // AJAX
  36.         $.ajax({
  37.           url: 'getDetails.php',
  38.           type: 'post',
  39.           data: {userid:userid,request:2},
  40.           dataType: 'json',
  41.           success:function(response){      
  42.             var len = response.length;
  43.             if(len > 0){
  44.               var id = response[0]['ID'];
  45.               var name = response[0]['product_number'];
  46.               var categoriesname = response[0]['categories_name'];
  47.               var totalstock = response[0]['total_stock'];
  48.               document.getElementById('name_'+index).value = name;
  49.               document.getElementById('categories_name_'+index).value = categoriesname;
  50.               document.getElementById('total_stock_'+index).value = totalstock;
  51.             }
  52.           }
  53.         });    
  54.         return false;
  55.       }
  56.     });
  57.   });
  58.    
  59.   // Add more
  60.   /*
  61.   $('#addmore').click(function(){
  62.     // Get last id
  63.     var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
  64.     var split_id = lastname_id.split('_');
  65.  
  66.     // New index
  67.     var index = Number(split_id[1]) + 1;
  68.  
  69.     // Create row with input elements
  70.     var html = "<tr class='tr_input'><td><input type='text' class='username' id='username_"+index+"' placeholder='Enter username'></td><td><input type='text' class='name' id='name_"+index+"' ></td></tr>";
  71.     // Append data
  72.     $('tbody').append(html);
  73.   });*/
  74. });
  75. </script>
  76. <style>
  77.   form label {
  78.    display: inline-block;
  79.    width: 100px;
  80.    font-weight: bold;
  81.   }
  82.  
  83.   body {font-family: calibri;color:#4e7480;}
  84.  .tutorial-table {
  85.       border: #e1e0e0 1px solid;
  86.  }
  87.   .tutorial-table th {
  88.       text-align: center;
  89.       background: #f0F0F0;
  90.      padding: 10px;
  91.   }
  92.   .tutorial-table td {
  93.       text-align: right;
  94.       border-bottom: #e1e0e0 1px solid;
  95.      padding: 10px;
  96.   }
  97.  
  98.   @media screen and (max-width: 900px) and (min-width: 550px) {
  99.     .priority-5{
  100.         display:none;
  101.     }
  102.   }
  103.  
  104.   @media screen and (max-width: 550px) {
  105.     .priority-5{
  106.         display:none;
  107.     }
  108.     .priority-4{
  109.         display:none;
  110.     }
  111.   }
  112.  
  113.   @media screen and (max-width: 300px) {
  114.     .priority-5{
  115.         display:none;
  116.     }
  117.     .priority-4{
  118.         display:none;
  119.     }
  120.     .priority-3{
  121.         display:none;
  122.     }
  123.     .priority-2{
  124.         display:none;
  125.     }
  126.   }
  127.  </style>
  128. </head>
  129. <body>
  130.  <div align="right">
  131.    <!-- <input type='button' value='Add more' id='addmore'> -->  
  132.   <table class='tutorial-table' align='center';>
  133.   <form class="form-style-9" action="" method="post">
  134.    <tr>
  135.     <th>כמות במלאי</th>
  136.     <th>קטגוריה</th>
  137.     <th>מק"ט</th>
  138.    <th>שם המוצר</th>
  139.   </tr>
  140.  <tr>
  141.   <td><input type='number' class="totalstock" name="total_stock" id='total_stock_1' readonly></td>
  142.   <td><input type='text' class="categoriesname" name="categories_name" id='categories_name_1' ></td>
  143.   <td><input type='text' class="name" name="product_name" id='name_1' ></td>
  144.   <td><input type='text' class="username" name="product_number" id='username_1' placeholder='הכנס שם מוצר'></td>
  145.  </tr>
  146.  <tr>
  147.  <td></td>
  148.  <td><input type="reset" class="align-right" name="submit2" value="נקה תופס"></td>
  149.  <td><input type="submit" class="align-right" name="update" value="עדכן"></td>
  150.  <td><input type="submit" class="align-left" name="submit1" value="מוצר חדש"></td>
  151.  </tr>
  152. </form>
  153. </table>
  154. </div>
  155. </body>
  156. </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!