Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2018, 00:10
Новичок на форуме
Отправить личное сообщение для Samogon Посмотреть профиль Найти все сообщения от Samogon
 
Регистрация: 10.01.2018
Сообщений: 3

клонирование div
Доброе время суток
в JS я почти нульовый, но нужно сделать такую вещь:
существует блок div с формой внутри, и кнопка снизу, при нажатии на которую в HTML должен вставиться такой же блок, но с другими ID, так сказать следующими по очереди
<div class="main" id="0">
                <form class="station" name="mainForm"  method="post" action="#">
                    <div class="line-left">
                    <select name="type" class="type" id="type-0">
			             <option value="null">Тип линии</option>

                      </select>
                      <select name="cross-section" class="cross-section" id="cross-section-0">
			             <option value="null">Сечение</option>

                      </select>
                    </div>
                      <div class="line-right">
                          <input type="text" name="long" id="long-0" value="" placeholder="Длина участка, м">
                           <input type="text" name="beginx" id="begin-0" value="" placeholder="Нагрузка в начале линии, кВт">
                          <input type="text" name="end" id="end-0" value="" placeholder="Нагрузка в конце линии, кВт">
                    </div>
                </form>
        
            </div>
<button class="right-button">Добавить участок</button>


var addButton = document.querySelector(".right-button");
var i = 0;

addButton.addEventListener("click", function (event) {
    event = event || window.event;
    event.preventDefault();
    var mainDiv = document.querySelector("#" + i);
    var newDiv = mainDiv.cloneNode('true');
    mainDiv.parentNode.insertBefore(newDiv, mainDiv.nextSibling);
    newDiv.getElementsById('0').id = i + 1;
    newDiv.getElementsById('type-0').id = "type-" + i + 1;
    newDiv.getElementsById('cross-section-0').id = "cross-section-" + i + 1;
    newDiv.getElementsById('long-0').id = "long-" + i + 1;
    newDiv.getElementsById('begin-0').id = "begin-" + i + 1;
    newDiv.getElementsById('end-0').id = "end-" + i + 1;
});
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2018, 00:18
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Откажитесь от id и все станет на много проще.
Ответить с цитированием
  #3 (permalink)  
Старый 10.01.2018, 00:25
Новичок на форуме
Отправить личное сообщение для Samogon Посмотреть профиль Найти все сообщения от Samogon
 
Регистрация: 10.01.2018
Сообщений: 3

Дело в том что мне потом полученные данные надо в формулы загонять, и мне надо их как то различать, с нулевого блока, первого и так далее
Ответить с цитированием
  #4 (permalink)  
Старый 10.01.2018, 00:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Коллекции обладают индексами, а объект в коллекции вряд ли имеет уникальную формулу. Кроме того, если обработчики на полях ввода, то можно просто найти родительскую форму, получив у нее всех детей, id для этого совсем не нужен.

PS. Сразу добавлю, что "в формулы", это будет выгоднее обработку расчета делегировать форме, одной общей.

Последний раз редактировалось laimas, 10.01.2018 в 00:55.
Ответить с цитированием
  #5 (permalink)  
Старый 10.01.2018, 01:01
Новичок на форуме
Отправить личное сообщение для Samogon Посмотреть профиль Найти все сообщения от Samogon
 
Регистрация: 10.01.2018
Сообщений: 3

спасибо, я учту

насчет ухода от id
var addButton = document.querySelector(".right-button");
var mainDiv = document.querySelector(".main");

addButton.addEventListener("click", function (event) {
    event = event || window.event;
    event.preventDefault();
    var newDiv = mainDiv.cloneNode(true);
    mainDiv.parentNode.insertBefore(newDiv, mainDiv.nextSibling);
});

результат тот же-не работает
Ответить с цитированием
  #6 (permalink)  
Старый 10.01.2018, 01:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Может все-таки сначала подумать над html структурой? Ведь сразу все формы отправить нельзя, тогда почему их несколько клонировать? Может иметь одну родительскую, в которую и вставлять клонируемые элементы? И потом как и чему отправляется поля?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработчик событий для динамически добавленных элементов Tecvid Events/DOM/Window 28 25.06.2018 13:49
Клонирование DIV DVMade Элементы интерфейса 1 10.04.2017 22:13
Клонирование div блока в форме. RazerVG Events/DOM/Window 0 01.11.2014 16:12
Показать div при наведении / jQuery updaite Элементы интерфейса 4 28.07.2014 03:45
Клонирование DOM объекта или как вставить один div много раз Jmunb Общие вопросы Javascript 7 04.04.2013 14:58