Django Cannot auto focus on this form but can on forms

I have a login, register and password reset pages both login and register pages auto focus on the username field however on my password reset page auto focus is not working. I have tried widget_tweaks within my template but to no avail like so:

{{ fieldValues.email|attr:"autofocus" }} and {{ form.email|attr:"autofocus" }}

I just cannot get my head around why auto focus works on my other forms but not on password reset. My code is as follows:

View

class RequestPasswordResetEmail(View):
    @method_decorator(check_recaptcha_form)
    def get(self, request):
        return render(request, 'password/reset-password.html')

    @method_decorator(check_recaptcha_form)
    def post(self, request):

        email = request.POST['email']

        context = {
            'values': request.POST
        }



        current_site = get_current_site(request)

        user = User.objects.filter(email=email)
        user_by_email = User.objects.filter(email=email).first()

        if not user.exists():
            messages.error(request, 'Please supply a valid email')
            return render(request, 'password/reset-password.html', context)

        if user.exists() and request.recaptcha_is_valid:
            uid = urlsafe_base64_encode(force_bytes(user_by_email.pk))
            token = PasswordResetTokenGenerator().make_token(user_by_email)

            email_subject = 'WFI Workflow System - Password Reset'
            email_body = 'password/password_reset_email.html'
            to_email = [user_by_email.email]

            send_email(user, request, email_subject, email_body, uid, token, to_email)

            messages.success(
                request, mark_safe(
                    'We’ve emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly.'
                    '<br class="brmedium"> If you don’t receive an email, please make sure you’ve entered the address you registered with, and check your spam folder.</br>'))

        return render(request, 'password/reset-password.html')

Template

{% extends 'base.html' %}

{% block title %}Password Reset{% endblock %}

{% block content %}
    <div class="d-flex justify-content-center">
        <h3 id="form-title">Password Reset</h3>
    </div>
    <span class="forgot_pass">Forgotten your password? Enter your email address below, and we’ll email instructions for setting a new one.</span>
    <div class="d-flex justify-content-center form_container">

        <form action="{% url 'request-password' %}" method="POST">
            {% csrf_token %}
<div align="center">
            <div class="input-group mb-3">

                <div class="input-group-append">
                    <span class="input-group-text"><i class="fas fa-envelope-square"></i></span>
                    <input type="email" name="email" placeholder="Email" class="form-control"
                           value="{{ fieldValues.email }}"/>
                </div>

            </div>

</div>

                {% include 'recaptcha.html' %}


            <div class="d-flex justify-content-center mt-3 login_container">
                <input class="btn login_btn" type="submit" value="Submit">
            </div>
        </form>
    </div>
    {% include 'messages.html' %}
    <div class="input-group mb-1">
    </div>
    <div class="mt-1">
        <div class="d-flex justify-content-center links">
            Already have an account? <a href="{% url 'login' %}" class="ml-2">Login</a>
        </div>
        <div class="d-flex justify-content-center links">
            Don't have an account? <a href="{% url 'register' %}" class="ml-2">Sign Up</a>
        </div>
    </div>

{% endblock content %}

I even tried the following javascript but again did nothing:

 <script type="text/javascript">
        $(function () {
            // When the page has finished loading,
            // autofocus on the username field
            $('input#id_email').focus();
        });
    </script>

Answer

Just add autofocus attribute to your input field:

<input type="email" name="email" placeholder="Email" class="form-control" value="{{ fieldValues.email }}" autofocus>

Advertisement

Answer