Как вывести данные из формы без кнопки submit и перезагрузки странницы?

Question

[Виталий Ананьев]

html

{% extends 'base.html' %}

{% block script %}

{% endblock script %}
{% block content %}
<form action="{% url 'base' %}" method="post">
    {% csrf_token %}
    {{ game_sorted_form }}
</form>
<div id="result">
    {% for game in games %}
    {% if game.game_currency == False %}
    <p><a href="{{ game.accounts_absolute_url }}">{{ game.name }}</a></p>
    {% else %}
    <p><a href="{{ game.currency_absolute_url }}">{{ game.name }}</a></p>
    {% endif %}
    <br>
    {% endfor %}
</div>
{% endblock content %}

forms.py

class GamesSortedForm(forms.Form):
    s = list()
    q = Games.objects.all().order_by('name')

    for a in q:
        if (f'{a.name}'[0], f'{a.name}'[0]) in s:
            pass
        else:
            s.append((f'{a.name}'[0], f'{a.name}'[0]))

    name = forms.ChoiceField(choices=s,
                             widget=forms.Select(
                                 attrs={'class': 'form-select', 'name': 'form-select', 'id': 'form-select'}),
                             label=False,
                             required=False)

views.py

class BaseView(ContextBase, ContextList):
    model = Games
    context_object_name = 'games'
    template_name = 'Pay/games_list.html'
    queryset = Games.objects.all().order_by('name')

utils.py

class ContextBase(ListView):

    def post(self, request):
        if request.method == 'POST':
            form = GamesSortedForm(request.POST)
            if form.is_valid():
                name = form.cleaned_data['name']
                queryset = self.queryset
                list_game_id_num = []
                for i in queryset:
                    if f'{i}'[0] == name:
                        list_game_id_num.append(i.id_num)
                        context = {
                            'games': Games.objects.filter(id_num__in=list_game_id_num).order_by('name'),
                            'game_sorted_form': GamesSortedForm(),
                            'user_name': Customer.objects.get(user=self.request.user)
                        }
                        return render(request, 'Pay/games_list.html', context)

Answer 1

[Александр Нестеров]

В общем случае:

• Вешаете на нужный элемент формы обработчик событий.
  
• По срабатыванию создаете html-запрос на нужный url (с помощью xmlhttprequest или fetch)
  
• Получаете ответ
  
• Выводите данные на страницу
  

Comments

[Виталий Ананьев]

если у меня класс select формы прописан в forms.py

widget=forms.Select(
                                 attrs={'class': 'form-select', 'name': 'form-select', 'id': 'form-select'}),

И я буду пытаться делать что то подобное:

<script type="text/javascript">
        function send() {
            var chooseСlass = $('.form-select').val();
            var url = 'index.BaseView()'; // здесь указываем адрес PHP файла
            var formData = new FormData();
            formData.append('class', chooseСlass);

            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                contentType: false,
                processData: false,
                data: formData
            });
        }

    </script>

это будет работать?
даже если он находит class form-select в forms.py
в моем случаи как правильно прописать
var url = ''?

[Александр Нестеров]

Виталий Ананьев,

в моем случаи как правильно прописать

Использовать django`вый тег URL

даже если он находит class form-select в forms.py

Классы - не уникальные элементы. В общем случае, для получения значения лучше обращаться по ID.

это будет работать?

Тут не подскажу - с JQuery знаком очень слабо. Но даже если ошибок нет, запрос не будет отправляться - нет никакого триггера, по срабатыванию которого send()будет выполнена

[Виталий Ананьев]

Александр Нестеров, в моем случаи
var url = "{% url 'base' %}" ?

[Александр Нестеров]

Виталий Ананьев, да, по идее.