CODEWITHSUNDEEP
javascript
Radhika soni
Radhika soni

Reputation: 143

Password visibility using JavaScript

I'm trying to check whether the checkbox is checked or not, If yes then it'll display the password.

here is my code

login.html

     
    <div class="form-check">
          {{form.show_pass(class="form-check-input")}}
          {{form.show_pass.label(class="form-check-label")}}
                  <script>
                        
                        var x = document.getElementById('{{form.password.id}}');
                        var checkbox  = document.getElementById('{{form.show_pass.id}}');
                        if (checkbox.checked=='true')
                        {   
                            x.type = 'text'; 
                        }
                    </script>                                   
                </div>

forms.py

      class LoginForm(FlaskForm):

            email = StringField('Email',
            validators=[DataRequired(), Email()])
            password = PasswordField('Password',validators=[DataRequired()],id='pass') 
            remember = BooleanField('Remember Me')
            show_pass = BooleanField('Show Password',id='show')
    
            submit = SubmitField('Login')

Upvotes: 1

Views: 171

Answers (1)

svyat1s
svyat1s

Reputation: 943

Just add an event listener for show password element after page loads:

window.addEventListener("load", function(){
        var checkbox  = document.getElementById('passwordCheckbox');
        var x = document.getElementById('password');
        checkbox.addEventListener('change', function() {
            if(this.checked) {
                x.type = 'text'; 
            } else {
                x.type = 'password'; 
            }
        });
    });
<input type="checkbox" id="passwordCheckbox" /> Show Password
<br /><br />
<input type="password" id="password" />

Upvotes: 2

Related Questions