Advertisement
noam76

index.php

Apr 17th, 2020
564
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 3.11 KB | None | 0 0
  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