0

I am learning django and have built a very basic profile form, I am experiencing a strange issue during page load.

The profile page has a password change form which is at the page bottom and during the browser loading, it auto-navigates to this form and enters the first input field of the form?

Has anyone experienced this and if so how do i prevent this from occurring?

Form on load: 

<div class="col-lg-4">
<div class="block">
    <!-- Table Styles Title -->
    <div class="block-title">
        <h2><strong>Change Password</strong></h2>
    </div>

    <p>Change your password here!</p
    <form action="/profile/change_password/" method="post" class="form-horizontal">
        <input type="hidden" name="csrfmiddlewaretoken" value="Azuwo63bFBZyum9WJSwwp8gwNcdBKw0cvURhLHoZcVDTsq7ecAJArZTYFE0dHleB">

        <div class="col-xs-12">

            <div id="div_id_old_password" class="form-group">
                <label for="id_old_password" class=" requiredField">
                    Old password<span class="asteriskField">*</span> </label>
                <div class="">
                    <input type="password" name="old_password" autocomplete="current-password" autofocus class="textinput textInput form-control" required id="id_old_password"> </div>
            </div>
            <div id="div_id_new_password1" class="form-group">
                <label for="id_new_password1" class=" requiredField">
                    New password<span class="asteriskField">*</span> </label>
                <div class="">
                    <input type="password" name="new_password1" autocomplete="new-password" class="textinput textInput form-control" required id="id_new_password1"> <small id="hint_id_new_password1" class="form-text text-muted"><ul><li>Your password can’t be too similar to your other personal information.</li><li>Your password must contain at least 8 characters.</li><li>Your password can’t be a commonly used password.</li><li>Your password can’t be entirely numeric.</li></ul></small> </div>
            </div>
            <div id="div_id_new_password2" class="form-group">
                <label for="id_new_password2" class=" requiredField">
                    New password confirmation<span class="asteriskField">*</span> </label>
                <div class="">
                    <input type="password" name="new_password2" autocomplete="new-password" class="textinput textInput form-control" required id="id_new_password2"> </div>
            </div>

        </div>

        <!-- Form Buttons -->
        <div class="form-group form-actions">
            <div class="col-xs-12 text-right">
                <button type="submit" class="btn btn-sm btn-success"> Change Password</button>
            </div>
        </div>
        <!-- END Form Buttons -->
    </form>
</div>

Django Template:

<div class="col-lg-4">
<div class="block">
    <!-- Table Styles Title -->
    <div class="block-title">
        <h2><strong>Change Password</strong></h2>
    </div>

    <p>Change your password here!</p>
    <form action="{% url 'change_password'%}" method="post" class="form-horizontal">
        {% csrf_token %}

        <div class="col-xs-12">

            {{ passform|crispy }}
        </div>

        <!-- Form Buttons -->
        <div class="form-group form-actions">
            <div class="col-xs-12 text-right">
                <button type="submit" class="btn btn-sm btn-success"> Change Password</button>
            </div>
        </div>
        <!-- END Form Buttons -->
    </form>
</div>

I am not using javascript on this page it really is a basic setup for learning.

Many thanks

xKobalt
  • 1,498
  • 2
  • 13
  • 19
Psymon25
  • 336
  • 2
  • 18
  • What you are looking for is not to select, but to focus – xKobalt Mar 01 '20 at 13:09
  • yeah problem is as the form is further down the page it is navigating to the form and i dont want it too, i want the page to load and have it remain at the top? – Psymon25 Mar 01 '20 at 13:13
  • You simply need the page scrolls to the top just after the focus has been executed. Maybe what are you looking for is already written here: https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript – xKobalt Mar 01 '20 at 13:20
  • thanks @xKobalt seems this worked: document.body.scrollTop = document.documentElement.scrollTop = 0; not sure i am totally happy with it as the input to the password box is still active but i will look at ways to prevent that; i tried tabindex -1 and blur but no joy on those so far. – Psymon25 Mar 01 '20 at 13:53

0 Answers0