How to get data from a form using jquery, ajax?

Question

There is a jung form

<div class="field inline" id='lot'> <label for="{{ form.lot_cost.id_for_label }}" class="subhead">Цена единицы:</label> {{ form.lot_cost }} {{ form.lot_currency }} </div>

You need to pull out {{ form.lot_currency }} from it and transfer it to the second span instead of usd

 <div class="field inline" id="specially"> <label for="specially" class="subhead">Специальная цена от</label> <span>кг</span> <span>usd</span> </div>

On the Django page renders such a template. PS {{ form.lot_currency }} is a drop-down select, so you need to select values by click and automatically , using ajax, substitute them in the second span.

forms.py

 'lot_currency': forms.Select( attrs={ 'class': 'select2', 'style': 'width: 100px' } ),

It seems to be easy. But I am not familiar with jquery (

Accepted Answer · 2019-03-02T05:27:22

 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="field inline" id='lot'> <label for="{{ form.lot_cost.id_for_label }}" class="subhead">Цена единицы:</label> <select id="id_lot_currency" name="lot_currency"> <option selected>---</option> <option value="1">USD</option> <option value="2">EUR</option> <option value="3">RUR</option> </select> </div> <div class="field inline" id="specially"> <label for="specially" class="subhead">Специальная цена от</label> <span>кг</span> <span>usd</span> </div>

does not work ... can you create a chat so as not to clutter up comments?
Do you click the "Run Code" button and my example does not work?

How to get data from a form using jquery, ajax?

1 answer 1

More articles: