Как получить данные из формы Django средствами jquery и вывести их на экран без перезагрузки страницы?

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

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

Есть форма Джанго

HTML5
1
2
3
4
5
6
7
8
<div class="field inline" id='lot'>
          <label for="{{ form.lot_cost.id_for_label }}"
                 class="subhead">Цена единицы:</label>
          .....
          {{ form.lot_cost }}
          .....
          {{ form.lot_currency }}
</div>

на странице она рендерит такой шаблон

Как получить данные из формы Django средствами jquery и вывести их на экран без перезагрузки страницы?

Нужно вытаскивать выбранный пункт из селектора lot_currency и передать данные во второй span следующей формы (вместо грн) без перезагрузки страницы.

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

Вот, что имеется. Но этот код не работает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function(){
        var firstOption = $('#id_lot_currency option').first();
var lastSpan = $('.specially span').last();
$('#id_lot_currency').change(function(event) {
    var value = $(this).val();
    var label = $(this).find('option:selected').text();
    if (value !== firstOption.val())
        lastSpan.text(label);
});
})();
</script>

Если непонятно что-то, могу снять видео.

@Mr_Sergo · 03.03.2019, 15:04

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

на странице она рендерит такой шаблон

и снова скрин

полный код выложите после рендера

@m0nte-cr1st0 · 03.03.2019, 15:26 **[ТС]**

Mr_Sergo,

HTML5
1
2
3
4
5
6
7
8
        <div class="field inline" id='lot'>
          <label for="id_lot_cost" class="subhead">Цена единицы:</label>
          <input id="id_lot_cost" type="number" name="lot_cost" required="">
          <select id="id_lot_currency" class="select2-hidden-accessible" name="lot_currency" aria-hidden="true">
            <option value="1">грн</option>
            <option value="2">франки</option>
          </select>
        </div>

Видео

@Mr_Sergo · 03.03.2019, 16:10

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

Видео

это лишнее- на будущее

достаточно кода после рендера, только не в виде скрина

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

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

во второй span следующей формы

Вот это не совсем понятно... в какую следующую форму? В вашем коде я вижу только одну форму.

@m0nte-cr1st0 · 03.03.2019, 16:12 **[ТС]**

Mr_Sergo, вот она

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

@Mr_Sergo · 03.03.2019, 16:15

m0nte-cr1st0,

То есть изначально две формы, вы хотите из select id="id_lot_currency" передать выбранное значение во 2-ой span формы которая ниже?

@Mr_Sergo · 03.03.2019, 16:23

Так?

@m0nte-cr1st0 · 03.03.2019, 16:31 **[ТС]**

Mr_Sergo, верно

@Mr_Sergo · 03.03.2019, 16:48

m0nte-cr1st0,

Так -> 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
20
21
22
<div class="field inline" id='lot'>
    
    <label for="id_lot_cost" class="subhead">Цена единицы:</label>
    <input id="id_lot_cost" type="number" name="lot_cost" required="">
    
    <select id="id_lot_currency" class="select2-hidden-accessible" name="lot_currency" aria-hidden="true">
        <option value="1">грн</option>
        <option value="2">франки</option>
    </select>
</div>
 
<div class="field inline specially">
    <label for="specially" class="subhead">Специальная цена от</label>
    <span>кг</span>
    <span>грн</span>
</div>
 
<script>
$('#id_lot_currency').on('change',function(){
    $('.field.inline.specially span').eq(1).text($('option:selected',this).text())
});
</script>

Jquery не забудьте подключить

@m0nte-cr1st0 · 03.03.2019, 16:55 **[ТС]**

Mr_Sergo, спасибо

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук 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 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	03.03.2019, 16:15
	m0nte-cr1st0, То есть изначально две формы, вы хотите из select id="id_lot_currency" передать выбранное значение во 2-ой span формы которая ниже? 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	03.03.2019, 16:23
	Так? 0

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

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

Опции темы

Как получить данные из формы Django средствами jquery и вывести их на экран без перезагрузки страницы?

Решение