Выборочное представление формы django / jquery

Question

У меня есть поле поиска в верхней части моего шаблона django (без тегов окружающих форм):

<input name="q" id="id_q" /> 
<input type="submit" id="id_s" value="Search">

На данный момент ключ поиска передается нажатием кнопки или нажатием ввода:

$(function($) {
    $(":submit").click(function() {
        window.location = "{% url search %}?q=" + $("#id_q").val();
    });
});

Теперь я добавляю в django-registration . В результате у меня есть шаблон входа, похожий на следующий:

<form method="post" action=".">{% csrf_token %}
    {% if form.non_field_errors %}
        <div class="form_errors">
            {% for err in form.non_field_errors %}
                <div class="form_error_message">{{ err }}</div>
            {% endfor %}
        </div>  
    {% endif %}
    {% for hidden in form.hidden_fields %}
        {{ hidden }}
    {% endfor %}
    {% for field in form.visible_fields %}
        <div class="block">
            {{ field.label_tag }}
            {{ field }}
            {% for err in field.errors %}
                <span class="error_message">{{ err }}</span>
            {% endfor %}
        </div>
    {% endfor %}

    <div style="padding-left:11em; padding-bottom:1em;">
        <input type="submit" value="{% trans 'Log in' %}" />
        <input type="hidden" name="next" value="{{ next }}" />
    </div>
</form>

Мне потребовалось некоторое время, чтобы понять, почему попытка войти в систему привела меня на страницу поиска. Я понял, что нажатие Enter после ввода пароля активирует ключ поиска, а не ввод имени пользователя / пароля.

Как настроить шаблон таким образом, чтобы я мог вводить поисковый запрос, нажимать клавишу ввода и активировать вид поиска ИЛИ вводить данные своей учетной записи, нажимать клавишу ввода и входить в систему? В основном, как я могу указать, что нажатие клавиши ввода «принадлежит» его необходимой функции?

Answer 1

Вам не нужно это:

<form method="post" action="{% url search %}">
    <input name="q" id="id_q" /> 
    <input type="submit" id="id_s" value="Search">
</form>
<script type="text/javascript">
$(function($) {
    $(":submit").click(function() {
        window.location = "{% url search %}?q=" + $("#id_q").val();
    });
});
</script>

Вот способ сделать это:

<form method="get" action="{% url search %}">
    <input name="q" id="id_q" value="{{ request.GET.q }}" /> 
    <input type="submit" id="id_s" value="Search">
</form>

Обратите внимание, что JavaScript исчез, и теперь форма используетметод "получить".Итак, javascript больше не будет конфликтовать.

Также я добавил значение к входу q, как бесплатную вкусность B)

Джефф Сиккель:

Удаленный код - это отлаженный код.

Если вы действительно хотите исправить js, вы можете сделать так:

$("form[action={% url search %}]").submit(// ...

Или добавить идентификатор в форму поиска:

$("#search_form").submit(// ...