Выбор элементов в выпадающем списке

124Borman

Новичок
Пользователь
Янв 26, 2021
32
1
8
Здравствуйте, мне необходимо при выборе значения в выпадающем списке подгружать связанную информацию в поля формы. Не понимаю как это всё должно работать и как это сделать
Использую python 3.7.3 и django 3.1.5
Модель:
class paidparking(models.Model):
adress = models.ForeignKey(Parking, on_delete=models.SET_NULL, null=True, verbose_name='Адрес парковки')
carnumber = models.CharField(max_length=150,verbose_name='Номер автомобиля')
amountoftime = models.IntegerField(verbose_name='Количество времени')
price = models.FloatField(verbose_name='Цена')
telephone = models.CharField(max_length=20,verbose_name='Номер телефона')
Форма:
class paidparkingForm(forms.ModelForm):
class Meta:
model = paidparking
fields = ['adress','carnumber','amountoftime', 'price', 'telephone']
widgets = {
'adress': forms.Select(attrs={"class": "form-control", "id": "exampleFormControlSelect1"}),
'carnumber': forms.TextInput(attrs={"class": "form-control form-control-lg", "placeholder": "Формат: x111xx177"}),
'amountoftime': forms.NumberInput(attrs={"class": "number form-control form-control-lg", "value": "0", "min":"0"}),
'price': forms.NumberInput(attrs={"class": "form-control form-control-lg"}),
'telephone': forms.TextInput(attrs={"class": "form-control form-control-lg", "placeholder": "89152021645"}),
}

В выпадающем списке у меня выводятся все значения из поля 'adress,' а в поле 'amountoftime' и 'price' должны подставляться значения, которые относятся к выбранному элементу
 

stud_55

Модератор
Команда форума
Модератор
Апр 3, 2020
1 522
672
113
Код вставляйте с помощью ... -> код -> python.
Здравствуйте, мне необходимо при выборе значения в выпадающем списке подгружать связанную информацию в поля формы. Не понимаю как это всё должно работать и как это сделать
Можно попробовать сделать с помощью ajax.
Сделать небольшой api (на чистом django или на drf), который будет возвращать значения amountoftime и price в зависимости от переданного значения поля adress.
В шаблоне отслеживать событие выбора в выпадающем списке и делать ajax-запрос к api, а потом ответ записывать в нужные поля формы.
 

124Borman

Новичок
Пользователь
Янв 26, 2021
32
1
8
А как сделать api? Я сделал JS функцию с отслеживанием выбранного элемента в выпадающем списке. Далее как я понял мне надо AJAX и передать полученное значение из выпадающего списка
 

stud_55

Модератор
Команда форума
Модератор
Апр 3, 2020
1 522
672
113
А как сделать api?
Самый просто вариант это сделать вьюху на django, которая будет принимать адрес, а возвращать amountoftime и price ввиде json.
Логика примерно такая: принимает post-запрос с параметром (адрес), получает из базы запись (paidparking), где адрес равен адресу из запроса, упаковывает значения amountoftime и price из этой записи в json и отправляет через JsonResponse на клиент.
А из шаблона отправлять на эту вьюху ajax-запрос при каждом выборе из списка, а ответ вставлять в нужные формы.
 

124Borman

Новичок
Пользователь
Янв 26, 2021
32
1
8
Самый просто вариант это сделать вьюху на django, которая будет принимать адрес, а возвращать amountoftime и price ввиде json.
Логика примерно такая: принимает post-запрос с параметром (адрес), получает из базы запись (paidparking), где адрес равен адресу из запроса, упаковывает значения amountoftime и price из этой записи в json и отправляет через JsonResponse на клиент.
А из шаблона отправлять на эту вьюху ajax-запрос при каждом выборе из списка, а ответ вставлять в нужные формы.
А как мне всё это передать обратно в AJAX и там обработать? Сделал так:
Ajax:
Python:
$.ajax({
    type: "GET",
    url: "valuesubstitution",
    data: {
      'adress': adress,
    },
    dataType: "text",
    cache: false,
    success:function (data){

    }
    });

Views:
Python:
def valuesubstitution(request):
    if request.method == 'GET':
        adress = request.GET["adress"]
        parking = Parking.objects.get(adress=adress)
        print(parking.price)
        print(parking.minimaltimeforpayment)
        return
    else:
        pass
 

stud_55

Модератор
Команда форума
Модератор
Апр 3, 2020
1 522
672
113
А как мне всё это передать обратно в AJAX и там обработать
Я же уже выше написал - JsonResponse:
Python:
def valuesubstitution(request):
    if request.method == 'GET':
        adress = request.GET["adress"]
        parking = Parking.objects.get(adress=adress)
        return JsonResponse({'price': parking.price,  'minimaltimeforpayment': parking.minimaltimeforpayment})
Потом на клиенте принимайте данные и вставляйте в форму.
ajax-запрос лучше делать через axios:
JavaScript:
function getData() {
      // делаем запрос
      axios.get('http://127.0.0.1:8000/тут_нужный_урл')
        .then(res => renderData(res))
        .catch(err => console.error(err));
    }

function renderData(res) {
    // выводим данные в шаблон
    price = res.data['price']
    min_time = res.data['minimaltimeforpayment']
    // дальше вставляйте в поля формы
    ...
}
 

stud_55

Модератор
Команда форума
Модератор
Апр 3, 2020
1 522
672
113
Не создавайте одинаковые темы.
 

124Borman

Новичок
Пользователь
Янв 26, 2021
32
1
8
Я же уже выше написал - JsonResponse:
Python:
def valuesubstitution(request):
    if request.method == 'GET':
        adress = request.GET["adress"]
        parking = Parking.objects.get(adress=adress)
        return JsonResponse({'price': parking.price,  'minimaltimeforpayment': parking.minimaltimeforpayment})
Потом на клиенте принимайте данные и вставляйте в форму.
ajax-запрос лучше делать через axios:
JavaScript:
function getData() {
      // делаем запрос
      axios.get('http://127.0.0.1:8000/тут_нужный_урл')
        .then(res => renderData(res))
        .catch(err => console.error(err));
    }

function renderData(res) {
    // выводим данные в шаблон
    price = res.data['price']
    min_time = res.data['minimaltimeforpayment']
    // дальше вставляйте в поля формы
    ...
}

У меня сделано вот так:
JavaScript:
$.ajax({
    type: "GET",
    url: "valuesubstitution",
    data: {
      'adress': adress,
    },
    dataType: "text",
    cache: false,
    success:function (data){
       $("#id_price").val()
    }
    });

Что мне необходимо вставить в .val()? Как получить конкретную запись. data['price'] не работает
 

stud_55

Модератор
Команда форума
Модератор
Апр 3, 2020
1 522
672
113
Что мне необходимо вставить в .val()?
Попробуйте изменить dataType: 'text' на dataType: 'json'
Посмотрите что приходит в data (console.log(data))
Если там все верно, то
JavaScript:
$("#id_price").val(data['price'])
 

124Borman

Новичок
Пользователь
Янв 26, 2021
32
1
8
Попробуйте изменить dataType: 'text' на dataType: 'json'
Посмотрите что приходит в data (console.log(data))
Если там все верно, то
JavaScript:
$("#id_price").val(data['price'])

Спасибо вам большое за помощь)
 

Форум IT Специалистов