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

Question

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

Мой вариант html
html

{% block content %}

<form id="form"  action="{% url 'base' %}" method="post">

    {% csrf_token %}
    {{ game_sorted_form }}
    <button type="submit">go</button>

</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 %}

Пробовал таким образом работает но выводит помимо данных сверху еще один шаблон страницы и этот вариант с кнопкой для отправки

{% extends 'base.html' %}

{% block script %}


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript">
    $(function(){

        $('#form').submit(function(e){
            e.preventDefault();
            var data = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "{% url 'base' %}",
                data: data,
                success: function(result){
                    $('#result').html(result);
                }
            });
        });
    });



</script>

{% endblock script %}
{% block content %}

<form id="form"  action="{% url 'base' %}" method="post">

    {% csrf_token %}
    {{ game_sorted_form }}
    <button type="submit">go</button>

</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 %}

Скиньте просто script я попробую разобраться

Answer 1

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

Вынесите форму на отдельную страницу а на старой оставьте только "вывод" данных.

Скиньте просто script я попробую разобраться

Не думаю, что здесь будет кто-то, кто будет именно писать за вас.

Comments

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

Я имею ввиду просто script с любым кодом но действующий

[Сергей Горностаев]

Виталий Ананьев, вы можете открыть консоль разработчика в браузере на любом сайте, который ведёт себя так, как хотелось бы вам, и разобраться.

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

Александр Нестеров в общем я в логике после ответа из формы перенаправил url на другой адрес HTML с нужной мне информацией для вывода и оно сработало, может это и не правильно но оно работает, а как мне сделать отправку из формы без кнопки submit? Код остаеться прежним

Answer 2

[ThunderCat]

Пробовал таким образом работает но выводит помимо данных сверху еще один шаблон страницы и этот вариант с кнопкой для отправки

Смысл аякс запроса подгружать не всю страницу (что у вас и происходит), а только тот кусок который должен меняться, соответственно на сервере либо пишете условие что при методе пост отдавать только нужный кусок (а не рендерить весь шаблон), либо делаете отдельный урл, который будет отдавать этот кусок. Первый вариант обычно предпочтительней, так как часть кода будет переиспользована.

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

Ну, пользователь должен как-то понять что делать когда закончился ввод и нужно отправить данные. Вообще, без кнопки субмит, ентер срабатывает как субмит, но тут у вас не видно какая форма и как вы хотите чтобы форма отправлялась "без кнопки", так как

Мой вариант html

нихрена не хтмл, а шаблон вывода, к хтмл имеющий весьма опосредованное отношение, и самой формы в нем как бы нету...

Comments

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

@ThunderCat
Да, да я понял как он работает, в форме у меня выпадающий список, тупанул что-то сразу написать, не знаю только какой скрипт прописать дла отправки submit без кнопки.

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

ThunderCat м да уж способов миллион главное правильно гуглить я прописал этот 'onchange': "$('#form').submit();" Работает)