Как добавить ещё одну аналогичную форму по нажатии на текущую, используя JS

@m0nte-cr1st0 · Регистрация: 15.01.2019

Студворк — интернет-сервис помощи студентам

Всё просто. Есть форма. Нужно по нажатию на неё добавить ещё одно поле. Точнее даже не по нажатию, а при вводе текста, если есть такая возможность в JS.

Вот сама форма.

HTML5
1
2
3
4
5
6
7
<div class="field inline">
            <label for="specially" class="subhead">Специальная цена от</label>
            {{ form.specially }}
            <span>кг</span>
            {{ form.number }}
            <span>грн</span>
</div>

JavaScript
1
2
3
4
5
6
7
<script>
$(document).ready(function() {    
  $('.field').on('click', function(){    //тут нужен не click, а функция, которая определяет ввод текста.
    ???
  })
})
</script>

То есть, задача простая, нужно просто такой же div добавить. И таких дивов может быть бесконечное множество. Так как JS пока не знаю, решить её сам не могу(

@klopp · 01.03.2019, 06:15

можно так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="wrapper">
    <div class="field inline">
        <label for="specially" class="subhead">Специальная цена от</label>
        <form action="">
            <input type="number">
        </form>
        <span>кг</span>
        <form action="">
            <input type="number">
        </form>
        <span>грн</span>
    </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let wrapper = document.getElementById('wrapper');
let addEl = (elem) => {
    let arr = elem.querySelectorAll('.field,.inline');
    let el = arr[arr.length - 1];
    let inpts = el.querySelectorAll('input');
    for(let i = 0; i < inpts.length; i++)
        if(!inpts[i].value)
            return false;
    let last = el.cloneNode(true);
    last.querySelectorAll('input').forEach(c => c.value = '');
    elem.appendChild(last);
}
wrapper.addEventListener('change', () => addEl(wrapper));

@Mr_Sergo · 01.03.2019, 09:27

Не по теме:

klopp, Приветствую

m0nte-cr1st0,

Можно еще так -> https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
2
3
4
5
6
7
8
9
<div class="field inline">
    <form class="form">
        <label for="specially" class="subhead">Специальная цена от</label><br>
        <input type="number"><br>
        <span>кг</span><br>
        <input type="number"><br>
        <span>грн</span><br><br>
    </form>
</div>

JavaScript
1
2
3
4
5
6
document.querySelector('.field.inline').addEventListener('input', e => {
    let copy = e.currentTarget.querySelector('.form').cloneNode(true).outerHTML;
    let input = e.currentTarget.querySelectorAll('input');
    for(let i of input) if(!+i.value || +i.value < 0) return;
    e.currentTarget.insertAdjacentHTML('beforeEnd', copy);
});

@m0nte-cr1st0 · 01.03.2019, 12:55 **[ТС]**

Mr_Sergo, klopp, спасибо за ответы, но не работает. возможно, потому что у меня форма представлена, ка {{form...}}, а у вас через инпуты?

@Mr_Sergo · 01.03.2019, 13:08

Сообщение от m0nte-cr1st0

Я могу ошибаться но разве это синтаксис не Vue.js?

@m0nte-cr1st0 · 01.03.2019, 15:28 **[ТС]**

Mr_Sergo, не знаю, как на счёт vue, но это джанго питоновский.)

Добавлено через 2 часа 12 минут

Python
1
2
3
4
5
6
7
8
9
10
11
12
'specially': forms.TextInput(
                attrs={
                    'class': 'event',
                    'style': 'width: 165px',
                }
            ),
'number': forms.TextInput(
                attrs={
                    'class': 'event',
                    'style': 'width: 100px'
                }
            ),

Jabbson · 01.03.2019, 19:13

Это не имеет никакого отношения к Джанго. Почему это в Джанго? Вопрос про дублирование поля ввода при начале ввода текста в существующем при помощи JS.

Топикстартер, покажите полученный html код страницы, после рендера в джанге,
JS пиплы, расскажите как для этого кода и этой конкретной формы дублировать поля ввода.

@m0nte-cr1st0 · 01.03.2019, 20:37 **[ТС]**

Jabbson, дичь какая-то.

это когда модеры в форум jquery переместили тему.

Мне кажется что вы не в ту ветку написали, тут в основном сидят "нативные JS-ники", вряд ли вам тут помогут, вам нужно было писать... наверное в ветку питона...

@m0nte-cr1st0 · 01.03.2019, 20:41 **[ТС]**

Как добавить ещё одну аналогичную форму по нажатии на текущую, используя JS

@Mr_Sergo · 01.03.2019, 20:47

m0nte-cr1st0, только не скрин а код со скрина

Jabbson · 01.03.2019, 20:50

Сообщение от m0nte-cr1st0

это когда модеры в форум jquery переместили тему.

так или иначе этому место не тут

@Mr_Sergo · 01.03.2019, 20:55

m0nte-cr1st0,
Под формой вы подразумеваете все дочерние элементы <div id="specially">?

@m0nte-cr1st0 · 01.03.2019, 21:11 **[ТС]**

Сообщение от Mr_Sergo

только не скрин а код со скрина

вот код со скрина

HTML5
1
2
3
4
5
6
7
<div id="specially" class="field inline">
  <label class="subhead" for="specially_price">Специальная цена от:</label>
  <input id="id_specially_price" class="event" type="text" name="specially_price" style="width: 165px" required="">
  <span>кг</span>
  <input id="id_specially_number" class="event" type="text" name="specially_number" style="width: 100px" required="">
  <span>грн</span>
</div>

Этот код видно в инспекторе HTML.

В самом же коде эта форма выглядит так:

HTML5
1
2
3
4
5
6
7
<div class="field inline" id="specially">
            <label for="specially" class="subhead">Специальная цена от</label>
            {{ form.specially_price }}
            <span>кг</span>
            {{ form.specially_number }}
            <span>грн</span>
</div>

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
widgets = {
            'specially_price': forms.TextInput(
                attrs={
                    'class': 'event',
                    'style': 'width: 165px',
                }
            ),
            'specially_number': forms.TextInput(
                attrs={
                    'class': 'event',
                    'style': 'width: 100px'
                }
            ),

@m0nte-cr1st0 · 01.03.2019, 21:12 **[ТС]**

Сообщение от Mr_Sergo

Под формой вы подразумеваете все дочерние элементы <div id="specially">?

да, это эти два поля

@Mr_Sergo · 01.03.2019, 22:38

m0nte-cr1st0,

Сам <div id="specially"> тоже должен копироваться или только его содержимое?

Добавлено через 3 минуты
m0nte-cr1st0,

И как быть с id-шниками у элементов? id в пределах страницы должен быть уникальным (не может быть одинаковых значений id), при копировании они соответственно будут плодиться, у новых элементов id-шники нужны или их можно удалить?

Добавлено через 2 минуты
В поля для ввода могут вводиться только цифры или буквы тоже можно?

Добавлено через 15 минут
А пока так -> https://codepen.io/Mr_Sergo/pe... itors=1000

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="specially" class="field inline">
    <label class="subhead" for="specially_price">Специальная цена от:</label>
    <input id="id_specially_price" class="event" type="text" name="specially_price" style="width: 165px" required="">
    <span>кг</span>
    <input id="id_specially_number" class="event" type="text" name="specially_number" style="width: 100px" required="">
    <span>грн</span>
</div>
 
<script>
    let copy = document.querySelector('#specially').cloneNode(true);
    copy.removeAttribute('id');
    for(let e of copy.querySelectorAll('input')) e.removeAttribute('id');
 
    document.querySelector('.field.inline').addEventListener('input', e => {
        let input = e.currentTarget.querySelectorAll('input');
        for(let i of input) if(!i.value) return;
        e.currentTarget.insertAdjacentHTML('beforeEnd', copy.outerHTML);
    });
</script>

@m0nte-cr1st0 · 01.03.2019, 23:28 **[ТС]**

Сообщение от Mr_Sergo

И как быть с id-шниками у элементов? id в пределах страницы должен быть уникальным (не может быть одинаковых значений id), при копировании они соответственно будут плодиться, у новых элементов id-шники нужны или их можно удалить?

не подумал об этом. можно айди на класс заменить тогда.

Сообщение от Mr_Sergo

В поля для ввода могут вводиться только цифры или буквы тоже можно?

цифры

Сообщение от Mr_Sergo

А пока так -> https://codepen.io/Mr_Sergo/pe... itors=1000

спасибо, сейчас попробую

Добавлено через 2 минуты

Сообщение от Mr_Sergo

Сам <div id="specially"> тоже должен копироваться или только его содержимое?

тоже должен копироваться

@m0nte-cr1st0 · 01.03.2019, 23:37 **[ТС]**

что-то не так

в архиве видео.

@Mr_Sergo · 02.03.2019, 13:12

m0nte-cr1st0,

Все id-шники перенесены в class-ы !!!
Пока вы не сделаете так что бы изначальная форма, на странице в браузере, выглядела так как ниже

HTML5
1
2
3
4
5
6
7
<div class="field inline specially">
    <label class="subhead" for="specially_price">Специальная цена от:</label>
    <input class="event id_specially_price" type="text" name="specially_price" style="width: 165px" required="">
    <span>кг</span>
    <input class="event id_specially_number" type="text" name="specially_number" style="width: 100px" required="">
    <span>грн</span>
</div>

имеется ввиду id перенесенные в классы, ничего работать не будет... можете даже не пробовать

Значит приводите форму к вышеприведенному формату и можете смело добавлять следующий JS-код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function(){
    var copy = document.querySelector('.field.inline.specially').cloneNode(true);
    document.querySelector('html').addEventListener('input', function(e){
        if(e.target.classList.contains('event') && e.target.tagName == 'INPUT'){
            var error = 0;
            for(var evt of document.querySelectorAll('.field.inline.specially input.event')){
                evt.value = evt.value.replace(/[^\d]/,'');
                if(!evt.value || +evt.value < 1) error++;
            }
            if(!error){
                var last = document.querySelectorAll('.field.inline.specially');
                last[last.length-1].insertAdjacentHTML('afterEnd', copy.outerHTML);
            }
        }
    });
})();

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓

На всякий случай страница целиком- так она выглядит в браузере

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Код</title>
</head>
<body>
 
<div class="field inline specially">
    <label class="subhead" for="specially_price">Специальная цена от:</label>
    <input class="event id_specially_price" type="text" name="specially_price" style="width: 165px" required="">
    <span>кг</span>
    <input class="event id_specially_number" type="text" name="specially_number" style="width: 100px" required="">
    <span>грн</span>
</div>
 
<script>
    (function(){
        var copy = document.querySelector('.field.inline.specially').cloneNode(true);
        document.querySelector('html').addEventListener('input', function(e){
            if(e.target.classList.contains('event') && e.target.tagName == 'INPUT'){
                var error = 0;
                for(var evt of document.querySelectorAll('.field.inline.specially input.event')){
                    evt.value = evt.value.replace(/[^\d]/,'');
                    if(!evt.value || +evt.value < 1) error++;
                }
                if(!error){
                    var last = document.querySelectorAll('.field.inline.specially');
                    last[last.length-1].insertAdjacentHTML('afterEnd', copy.outerHTML);
                }
            }
        });
    })();
</script>
 
</body>
</html>

Вот она в действии -> https://codepen.io/Mr_Sergo/pe... itors=1000

Если после всего проделанного не будет работать- дайте знать, есть еще кое-какие мысли.

Добавлено через 3 минуты
При вводе чисел меньше единицы новые формы не будут добавляться на страницу- если этого не нужно дайте знать.

@m0nte-cr1st0 · 02.03.2019, 14:50 **[ТС]**

Mr_Sergo, спасибо, заработало. осталось только понять, как вы к этому пришли)

Добавлено через 3 минуты
а то для меня это сейчас просто набор буков((
пойду доки читать, по каждому слову

@Mr_Sergo · 02.03.2019, 15:27

Сообщение от m0nte-cr1st0

спасибо,

Не за что, рад что труды были не напрасны

Сообщение от m0nte-cr1st0

как вы к этому пришли

В данном случае методом тыка

ибо с Джанго и питоном я абсолютно не знаком и понятия не имею что там и как происходит.
Отдельное спасибо скажите Jabbson- только после его слов я понял как нужно действовать в данной ситуации

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

Как добавить ещё одну аналогичную форму по нажатии на текущую, используя JS

Решение

Решение

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	01.03.2019, 12:55 [ТС]
	Mr_Sergo, klopp, спасибо за ответы, но не работает. возможно, потому что у меня форма представлена, ка {{form...}}, а у вас через инпуты? 0

Jabbson 5906 / 3358 / 1036 Регистрация: 03.11.2009 Сообщений: 10,008
	01.03.2019, 19:13
	Сообщение было отмечено m0nte-cr1st0 как решение Решение Это не имеет никакого отношения к Джанго. Почему это в Джанго? Вопрос про дублирование поля ввода при начале ввода текста в существующем при помощи JS. Топикстартер, покажите полученный html код страницы, после рендера в джанге, JS пиплы, расскажите как для этого кода и этой конкретной формы дублировать поля ввода. 2

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	01.03.2019, 20:41 [ТС]
	0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	01.03.2019, 20:47
	m0nte-cr1st0, только не скрин а код со скрина 1

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	01.03.2019, 20:55
	m0nte-cr1st0, Под формой вы подразумеваете все дочерние элементы <div id="specially">? 0

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	02.03.2019, 14:50 [ТС]
	Mr_Sergo, спасибо, заработало. осталось только понять, как вы к этому пришли) Добавлено через 3 минуты а то для меня это сейчас просто набор буков(( пойду доки читать, по каждому слову 0