За последние 24 часа нас посетили 20689 программистов и 1113 роботов. Сейчас ищут 557 программистов ...

Цикл, добавление формочки

Тема в разделе "JavaScript и AJAX", создана пользователем pro100blich, 5 ноя 2019.

Метки:
  1. pro100blich

    pro100blich Активный пользователь

    С нами с:
    10 янв 2019
    Сообщения:
    15
    Симпатии:
    0
    Всем привет форумчане. Сразу скажу не особо понимаю в JS, больше в серверной части(PHp). Есть некая форма в ней есть, 3 селекта. 2-3 работают без нареканий и вмешательств не требуют. Но вот с первым надо сделать так, чтобы при нажатие Кнопки
    HTML:
    1. <button>Добавить еще</button>
    Происходило добавление еще одной формы такой же, только к select name,input name прибавлялось значения $i(число от 1 до 20), то бишь select name="test_select_$i",input name="start_date_$i".
    И при каждом нажатие на кнопку Добавить еще происходило $i++.
    Конечный результат. [​IMG]
    [​IMG]
    Так как классы убраны то сумма считаться не будет. Могли бы вы добавить к итоговой сумме новые селекты.
    HTML:
    1.  
    2. <!DOCTYPE html>
    3. <html lang="ru">
    4.   <head>
    5.     <meta charset="utf-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    8.     <title>Bootstrap DaeteTimePicker</title>
    9.    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    10.    <link rel="stylesheet" href="style.css">
    11.  
    12.   </head>
    13.   <style type="text/css">
    14.     .close{
    15.   cursor: pointer;
    16. }
    17.   </style>
    18.   <div class="contener">
    19.     <div class="col">
    20.       <form class="form-horizontal" enctype='multipart/form-data'  action='' method='POST'>
    21.         <fieldset>
    22.           <legend>Программа1</legend>
    23.           <div class="form-group row">
    24.             <div class="col">
    25.               <div class="">
    26.                 <select class="form-control" name="test_select">
    27.                   <option data-price="100" value="1">1</option>
    28.                   <option data-price="200" value="2">2</option>
    29.                   <option data-price="300" value="3">3</option>
    30.                   <option data-price="300" value="4">4</option>
    31.                   <option data-price="300" value="5">5</option>
    32.                   <option data-price="300" value="20">20</option>
    33.                 </select>
    34.                 <div class="bg-danger">Сумма: <span class="summ">0</span> руб.</div>
    35.                 <div class="bg-warning">Было выбрано:</div>
    36.                 <div class="list bg-warning"></div>
    37.               </div>
    38.             </div>
    39.             <div class="col">
    40.               Начало <input type="date" name="start_date" class="form-control">
    41.             </div>
    42.             <div class="col">
    43.               Конец <input type="date" name="end_date" class="form-control">
    44.             </div>
    45.             <div class="col">Номер <input type="text" name="num" class="form-control">
    46.             </div>
    47.           </div>
    48.  
    49.           <button>Добавить еще</button>
    50.         </fieldset>
    51.         <fieldset>
    52.           <legend>Программы2</legend>
    53.           <div class="form-group row">
    54.             <div class="col">
    55.               <div class="box-select">
    56.                 <select class="select form-control" >
    57.                    <option data-price="100" value="1">1</option>
    58.                   <option data-price="200" value="2">2</option>
    59.                   <option data-price="300" value="3">3</option>
    60.                   <option data-price="300" value="4">4</option>
    61.                   <option data-price="300" value="5">5</option>
    62.                 </select>
    63.                 <div class="bg-danger">Сумма: <span class="summ">0</span> руб.</div >
    64.                <div class="bg-warning">Было выбрано:</div>
    65.                 <div class="list bg-warning"></div>
    66.               </div>
    67.             </div>
    68.           </div>
    69.  
    70.           </fieldset>
    71.           <fieldset>
    72.             <legend>Программы3</legend>
    73.             <div class="form-group row">
    74.               <div class="col">
    75.               <div class="box-select">
    76.                 <select class="select form-control" >
    77.                   <option data-price="100" value="1">1</option>
    78.                   <option data-price="200" value="2">2</option>
    79.                   <option data-price="300" value="3">3</option>
    80.                   <option data-price="300" value="4">4</option>
    81.                   <option data-price="300" value="5">5</option>
    82.                 </select>
    83.                 <div class="bg-danger">Сумма: <span class="summ">0</span> руб.</div>
    84.                 <div class="bg-warning">Было выбрано:</div>
    85.                 <div class="list bg-warning"></div>
    86.               </div>
    87.               </div>
    88.             </div>
    89.  
    90. <div class="form-group row">
    91.           <div class="col-md-2">
    92.             <div class="input-group">
    93.               <div class="input-group-text">ИТОГ</div>
    94.               <span class="total_span form-control" id="exampleInputAmount">0</span>
    95.               <div class="input-group-text">.00</div>
    96.             </div>
    97.           </div>
    98.           <button type="submit" name="button" class="btn btn-primary col-md-2">Оплатиь</button>
    99.         </div>
    100.       </form>
    101.     </div>
    102.   </div>
    103.   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    104. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    105. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    106. </body>
    107. </html>
    108.  
    Код (Javascript):
    1.        (function() {
    2.     document.querySelectorAll('.box-select').forEach(e => {
    3.         e.querySelector('.select').insertAdjacentHTML('afterBegin', `<option disabled selected></option>`);
    4.         [...e.querySelector('.select').children].forEach((e,i) => e.dataset.id = i + 1 );
    5.     });
    6. })();
    7.  
    8. function calc(e) {
    9.     let target = e.target.selectedOptions[0];
    10.     if (target.parentElement.classList.contains('select')) {
    11.         let summ = this.parentElement.querySelector('.summ');
    12.         let new_div = `<div class="position">${target.outerHTML.replace(/option/g,'span')}<span class="close">X</span></div>`;
    13.         target.disabled = true;
    14.         this.children[0].selected = true;
    15.         this.parentElement.querySelector('.list').insertAdjacentHTML('beforeEnd', new_div);
    16.         summ.textContent = +summ.textContent + +target.dataset.price;
    17.     }
    18.     total();
    19. }
    20.  
    21. function del(e) {
    22.     if (e.target.classList.contains('close')) {
    23.         let data_id = +e.target.previousElementSibling.dataset.id;
    24.         let parent = e.currentTarget.parentElement;
    25.         parent.querySelector(`.select [data-id="${data_id}"]`).disabled = false;
    26.         parent.querySelector(`.select`).children[0].selected = true;
    27.         parent.querySelector('.summ').textContent = +parent.querySelector('.summ').textContent - +e.target.previousElementSibling.dataset.price;
    28.         e.target.closest('.position').remove();
    29.     }
    30.     total();
    31. }
    32.  
    33. function total() {
    34.     document.querySelector('.total_span').textContent = [...document.querySelectorAll('.summ')].map(e => +e.textContent).reduce((a,b) => a + b);
    35. }
    36.  
    37. document.querySelectorAll('.box-select .select').forEach(e => e.addEventListener('change', calc) );
    38. document.querySelectorAll('.box-select .list').forEach(e => e.addEventListener('click', del) );
     
  2. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    А если добавлять так :
    select name="test_select[]",input name="start_date[]"
    Не лучше ли будет?

    Ну и за тебя на этот раз делать не буду =) почитай тут, там очень все хорошо разжёвано:

    https://learn.javascript.ru/modifying-document
     
    #2 Artur_hopf, 5 ноя 2019
    Последнее редактирование: 5 ноя 2019
  3. pro100blich

    pro100blich Активный пользователь

    С нами с:
    10 янв 2019
    Сообщения:
    15
    Симпатии:
    0
    все сделал как мне надо, только вот еще тогда, как сделать чтобы цена считалась?
    --- Добавлено ---
    у меня есть итоговая цена к ней надо прибавить другую