Цикл. Добавить несколько форм. - JavaScript, Ajax

Pro100blich · 05.11.2019, 18:29

Всем привет форумчане. Сразу скажу не особо понимаю в JS, больше в серверной части(PHp). Есть некая форма в ней есть, 3 селекта. 2-3 работают без нареканий и вмешательств не требуют. Но вот с первым надо сделать так, чтобы при нажатие Кнопки

Код HTML:

 <button>Добавить еще</button>

Происходило добавление еще одной формы такой же, только к select name,input name прибавлялось значения $i(число от 1 до 20), то бишь select name="test_select_$i",input name="start_date_$i".
И при каждом нажатие на кнопку Добавить еще происходило $i++.
Конечный результат.

Так как классы убраны то сумма считаться не будет. Могли бы вы добавить к итоговой сумме новые селекты.

Код HTML:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap DaeteTimePicker</title>
   <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">
   <link rel="stylesheet" href="style.css">

  </head>
<body>
  <style type="text/css">
    .close{
  cursor: pointer;
}
  </style>
  <div class="contener">
    <div class="col">
      <form class="form-horizontal" enctype='multipart/form-data'  action='' method='POST'>
        <fieldset>
          <legend>Программа1</legend>
          <div class="form-group row">
            <div class="col">
              <div class="">
                <select class="form-control" name="test_select">
                  <option data-price="100" value="1">1</option>
                  <option data-price="200" value="2">2</option>
                  <option data-price="300" value="3">3</option>
                  <option data-price="300" value="4">4</option>
                  <option data-price="300" value="5">5</option>
                  <option data-price="300" value="6">6</option>
                  <option data-price="300" value="7">7</option>
                  <option data-price="300" value="8">8</option>
                  <option data-price="300" value="9">9</option>
                  <option data-price="300" value="11">11</option>
                  
                </select>
                <div class="bg-danger">Сумма: <span class="summ">0</span> руб.</div>
                <div class="bg-warning">Было выбрано:</div>
                <div class="list bg-warning"></div>
              </div>
            </div>
            <div class="col">
              Начало <input type="date" name="start_date" class="form-control">
            </div>
            <div class="col">
              Конец <input type="date" name="end_date" class="form-control">
            </div>
            <div class="col">Номер <input type="text" name="num" class="form-control">
            </div>
          </div>

          <button>Добавить еще</button>
        </fieldset>
        <fieldset>
          <legend>Программы2</legend>
          <div class="form-group row">
            <div class="col">
              <div class="box-select">
                <select class="select form-control" >
                   <option data-price="100" value="1">1</option>
                  <option data-price="200" value="2">2</option>
                  <option data-price="300" value="3">3</option>
                  
                </select>
                <div class="bg-danger">Сумма: <span class="summ">0</span> руб.</div >
               <div class="bg-warning">Было выбрано:</div>
                <div class="list bg-warning"></div>
              </div>
            </div>
          </div>

          </fieldset>
          <fieldset>
            <legend>Программы3</legend>
            <div class="form-group row">
              <div class="col">
              <div class="box-select">
                <select class="select form-control" >
                  <option data-price="100" value="1">1</option>
                  <option data-price="200" value="2">2</option>
                  <option data-price="300" value="3">3</option>
                  <option data-price="300" value="4">4</option>
                  <option data-price="300" value="5">5</option>
                  <option data-price="300" value="6">6</option>
                  <option data-price="300" value="7">7</option>
                 
                </select>
                <div class="bg-danger">Сумма: <span class="summ">0</span> руб.</div>
                <div class="bg-warning">Было выбрано:</div>
                <div class="list bg-warning"></div>
              </div>
              </div>
            </div>

 <div class="form-group row">
          <div class="col-md-2">
            <div class="input-group">
              <div class="input-group-text">ИТОГ</div>
              <span class="total_span form-control" id="exampleInputAmount">0</span>
              <div class="input-group-text">.00</div>
            </div>
          </div>
          <button type="submit" name="button" class="btn btn-primary col-md-2">Оплатиь</button>
        </div>
      </form>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Код:

 (function() {
    document.querySelectorAll('.box-select').forEach(e => {
        e.querySelector('.select').insertAdjacentHTML('afterBegin', `<option disabled selected></option>`);
        [...e.querySelector('.select').children].forEach((e,i) => e.dataset.id = i + 1 );
    });
})();

function calc(e) {
    let target = e.target.selectedOptions[0];
    if (target.parentElement.classList.contains('select')) {
        let summ = this.parentElement.querySelector('.summ');
        let new_div = `<div class="position">${target.outerHTML.replace(/option/g,'span')}<span class="close">X</span></div>`;
        target.disabled = true;
        this.children[0].selected = true;
        this.parentElement.querySelector('.list').insertAdjacentHTML('beforeEnd', new_div);
        summ.textContent = +summ.textContent + +target.dataset.price;
    }
    total();
}

function del(e) {
    if (e.target.classList.contains('close')) {
        let data_id = +e.target.previousElementSibling.dataset.id;
        let parent = e.currentTarget.parentElement;
        parent.querySelector(`.select [data-id="${data_id}"]`).disabled = false;
        parent.querySelector(`.select`).children[0].selected = true;
        parent.querySelector('.summ').textContent = +parent.querySelector('.summ').textContent - +e.target.previousElementSibling.dataset.price;
        e.target.closest('.position').remove();
    }
    total();
}

function total() {
    document.querySelector('.total_span').textContent = [...document.querySelectorAll('.summ')].map(e => +e.textContent).reduce((a,b) => a + b);
}

document.querySelectorAll('.box-select .select').forEach(e => e.addEventListener('change', calc) );
document.querySelectorAll('.box-select .list').forEach(e => e.addEventListener('click', del) );

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
несколько форм в DLL	govorun1	Общие вопросы Delphi	7	10.11.2013 19:29
Как связать несколько форм?	Nefelhiem	Общие вопросы Delphi	1	23.11.2011 20:37
несколько форм - 1 post	Ghennadiy	PHP	1	16.01.2011 18:38
несколько форм?	FAiver	Общие вопросы Delphi	5	15.12.2007 22:58
Несколько форм.	Sargon	Помощь студентам	23	15.09.2007 23:52