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:
JavaScript
x
2
1
{{ fieldValues.email|attr:"autofocus" }} and {{ form.email|attr:"autofocus" }}
2
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
JavaScript
1
42
42
1
class RequestPasswordResetEmail(View):
2
@method_decorator(check_recaptcha_form)
3
def get(self, request):
4
return render(request, 'password/reset-password.html')
5
6
@method_decorator(check_recaptcha_form)
7
def post(self, request):
8
9
email = request.POST['email']
10
11
context = {
12
'values': request.POST
13
}
14
15
16
17
current_site = get_current_site(request)
18
19
user = User.objects.filter(email=email)
20
user_by_email = User.objects.filter(email=email).first()
21
22
if not user.exists():
23
messages.error(request, 'Please supply a valid email')
24
return render(request, 'password/reset-password.html', context)
25
26
if user.exists() and request.recaptcha_is_valid:
27
uid = urlsafe_base64_encode(force_bytes(user_by_email.pk))
28
token = PasswordResetTokenGenerator().make_token(user_by_email)
29
30
email_subject = 'WFI Workflow System - Password Reset'
31
email_body = 'password/password_reset_email.html'
32
to_email = [user_by_email.email]
33
34
send_email(user, request, email_subject, email_body, uid, token, to_email)
35
36
messages.success(
37
request, mark_safe(
38
'We’ve emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly.'
39
'<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>'))
40
41
return render(request, 'password/reset-password.html')
42
Template
JavaScript
1
49
49
1
{% extends 'base.html' %}
2
3
{% block title %}Password Reset{% endblock %}
4
5
{% block content %}
6
<div class="d-flex justify-content-center">
7
<h3 id="form-title">Password Reset</h3>
8
</div>
9
<span class="forgot_pass">Forgotten your password? Enter your email address below, and we’ll email instructions for setting a new one.</span>
10
<div class="d-flex justify-content-center form_container">
11
12
<form action="{% url 'request-password' %}" method="POST">
13
{% csrf_token %}
14
<div align="center">
15
<div class="input-group mb-3">
16
17
<div class="input-group-append">
18
<span class="input-group-text"><i class="fas fa-envelope-square"></i></span>
19
<input type="email" name="email" placeholder="Email" class="form-control"
20
value="{{ fieldValues.email }}"/>
21
</div>
22
23
</div>
24
25
</div>
26
27
{% include 'recaptcha.html' %}
28
29
30
<div class="d-flex justify-content-center mt-3 login_container">
31
<input class="btn login_btn" type="submit" value="Submit">
32
</div>
33
</form>
34
</div>
35
{% include 'messages.html' %}
36
<div class="input-group mb-1">
37
</div>
38
<div class="mt-1">
39
<div class="d-flex justify-content-center links">
40
Already have an account? <a href="{% url 'login' %}" class="ml-2">Login</a>
41
</div>
42
<div class="d-flex justify-content-center links">
43
Don't have an account? <a href="{% url 'register' %}" class="ml-2">Sign Up</a>
44
</div>
45
</div>
46
47
{% endblock content %}
48
49
I even tried the following javascript but again did nothing:
JavaScript
1
8
1
<script type="text/javascript">
2
$(function () {
3
// When the page has finished loading,
4
// autofocus on the username field
5
$('input#id_email').focus();
6
});
7
</script>
8
Advertisement
Answer
Just add autofocus attribute to your input field:
JavaScript
1
2
1
<input type="email" name="email" placeholder="Email" class="form-control" value="{{ fieldValues.email }}" autofocus>
2