@Vitalii181190
Начинающий вэб-разработчик

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

Мой вариант 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 я попробую разобраться
  • Вопрос задан
  • 111 просмотров
Решения вопроса 2
AlexNest
@AlexNest
Работаю с Python/Django
Вынесите форму на отдельную страницу а на старой оставьте только "вывод" данных.
Скиньте просто script я попробую разобраться

Не думаю, что здесь будет кто-то, кто будет именно писать за вас.
Ответ написан
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Пробовал таким образом работает но выводит помимо данных сверху еще один шаблон страницы и этот вариант с кнопкой для отправки
Смысл аякс запроса подгружать не всю страницу (что у вас и происходит), а только тот кусок который должен меняться, соответственно на сервере либо пишете условие что при методе пост отдавать только нужный кусок (а не рендерить весь шаблон), либо делаете отдельный урл, который будет отдавать этот кусок. Первый вариант обычно предпочтительней, так как часть кода будет переиспользована.

а как мне сделать отправку из формы без кнопки submit?
Ну, пользователь должен как-то понять что делать когда закончился ввод и нужно отправить данные. Вообще, без кнопки субмит, ентер срабатывает как субмит, но тут у вас не видно какая форма и как вы хотите чтобы форма отправлялась "без кнопки", так как
Мой вариант html
нихрена не хтмл, а шаблон вывода, к хтмл имеющий весьма опосредованное отношение, и самой формы в нем как бы нету...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы