API tools faq
paste
Advertisement
deyanivanov966

Упражнение 6 Банков Решения на задачи за упражнение (2)

deyanivanov966
Jan 13th, 2022
907
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  8.     <script>
  9.         document.addEventListener('DOMContentLoaded', () => {
  10.             let data = [{"id": 1, "name": "Иван Иванов", "email": "pereinar@optonline.net", "phone": "12345344", "title": "Мениджър"},
  11.             {"id": 2, "name": "Мария Петрова", "email": "juliano@aol.com", "phone": "368938736", "title": "Програмист"},
  12.             {"id": 3, "name": "Стефан Колев", "email": "jipsen@outlook.com", "phone": "866893", "title": "Финансов директор"},
  13.             {"id": 4, "name": "Петя Илиева", "email": "rasca@msn.com", "phone": "10237129", "title": "Бодигард"},
  14.             {"id": 5, "name": "Деница Филева", "email": "mahbub@att.net", "phone": "0739483", "title": "Офис сътрудник"}];
  15.  
  16.  
  17.             let select = document.querySelectorAll('.form-select')[0];
  18.             let alert = document.createElement('div');
  19.  
  20.             console.log(data[0]);
  21.             select.addEventListener('change', (e) => {
  22.                 let id = e.target.value;
  23.                 let user = null;
  24.                 data.forEach((item, index) => {
  25.                   if(item.id == id){
  26.                     user = index;
  27.                   }
  28.                 });
  29.                 if(user != null){
  30.                   document.querySelectorAll('.email-field')[0].value = data[user].email;
  31.                   document.querySelectorAll('.phone-field')[0].value = data[user].phone;
  32.                   document.querySelectorAll('.title-field')[0].value = data[user].title;
  33.                   alert.className = 'alert alert-success';
  34.                   alert.innerHTML = 'Намерен потребител!';
  35.                 } else {
  36.                   alert.className = 'alert alert-danger';
  37.                   alert.innerHTML = 'Не е намерен потребител!';
  38.                   // [...document.querySelectorAll('[type=text]')].map(item => item.value = '');
  39.                   let fields = document.querySelectorAll('[type=text]');
  40.                   fields.forEach(item => {
  41.                       item.value = '';
  42.                   });
  43.  
  44.                 }
  45.  
  46.  
  47.                 document.querySelectorAll('.col-6')[0].insertBefore(alert, document.querySelectorAll('.col-6')[0].firstElementChild);
  48.             });
  49.  
  50.         });
  51.     </script>
  52. </head>
  53. <body>
  54.     <div class="container">
  55.         <div class="row flex-column ">
  56.             <div class="col-6 mx-auto mt-3">
  57.  
  58.                 <div class="form-group">
  59.                     <select class="form-select">
  60.                       <option selected="">Избери потребител</option>
  61.                       <option value="1">Иван Иванов</option>
  62.                       <option value="2">Мария Петрова</option>
  63.                       <option value="3">Стефан Колев</option>
  64.                       <option value="4">Петя Илиева</option>
  65.                       <option value="5">Деница Филева</option>
  66.                       <option value="7">Красимир Жечев</option>
  67.                       <option value="8">Здравко Стоянов</option>
  68.                       <option value="10">Катерина Момчилова</option>
  69.                       <option value="11">Панчо Панчев</option>
  70.                       <option value="15">Елица Стоинева</option>
  71.                     </select>
  72.                     </div>
  73.                     <div class="form-group">
  74.                         <label for="">Имейл</label>
  75.                         <input type="text" class="form-control email-field">
  76.                     </div>
  77.                     <div class="form-group">
  78.                         <label for="">Телефон</label>
  79.                         <input type="text" class="form-control phone-field">
  80.                     </div>
  81.                     <div class="form-group">
  82.                         <label for="">Длъжност</label>
  83.                         <input type="text" class="form-control title-field">
  84.                     </div>
  85.                     <div class="form-group d-grid">
  86.                         <input type="button" class="btn btn-primary" value="Съхрани">
  87.                     </div>
  88.                 </div>
  89.             </div>
  90.         </div>
  91.     </div>
  92. </body>
  93. </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!