Как получить данные из формы средствами jquery, ajax?

156

01 ноября 2019, 04:40

Есть джанговская форма

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

Нужно вытащить из неё значение {{ form.lot_currency }} и передать его во второй span вместо usd

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

На странице Джанго рендерит такой шаблон P.S. {{ form.lot_currency }} является выпадающим селектом, так что нужно выбирать значения по клику и автоматически, используя ajax, их подставлять во второй span.

forms.py

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

Это, вроде, несложно. Но с jquery я не знаком(

Answer 1

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>