Как добавить ещё одну аналогичную форму по нажатии на текущую, используя 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- только после его слов я понял как нужно действовать в данной ситуации

Новые блоги и статьи Все статьи Все блоги /
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .

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

Решение

Решение

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

Jabbson 5907 / 3359 / 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