How to add html id to django's built in log in form

Question

I am working on a django application. I added a login page to the application. In the login page I want to add a show password checkbox which when checked shows the password. I have written some javascript code for that purpose. this is the code to show passowrd

js code to show passowrd

  function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
      x.type = "text";
    } else {
      x.type = "password";
    }
  }

Now my problem is this code only works if the password field has the id myinput. How do I add this to django's built in login form?

Maybe this is what you're looking for https://stackoverflow.com/questions/19489699/how-to-add-class-id-placeholder-attributes-to-a-field-in-django-model-forms — funnydman, Jan 24 '19 at 06:58
The id of the field generated by django is always the same. So you have to see the id of the password field and use it in the js code. It is usually `id_{field_name}`, so it might be `id_password` — Aswin Murugesh, Jan 24 '19 at 06:58

score 1 · Accepted Answer · edited Jan 24 '19 at 07:02

1

You can get id for any form field using

{{ form.field_name.auto_id }}

function myFunction() {
var x = document.getElementById("{{ form.password.auto_id }}");
if (x.type === "password") {
  x.type = "text";
} else {
  x.type = "password";
}

}

edited Jan 24 '19 at 07:02

Umair Mohammad

4,489
2
20
34

answered Jan 24 '19 at 06:59

Atley Varghese

576
4
10

How to add html id to django's built in log in form

1 Answers1