# Show / Hide Password

**URL:** <https://forums.knack.com/t/show-hide-password/12576>\
**Category:** Get Answers\
**Created:** [May 24, 2022, 4:55pm UTC](https://forums.knack.com/t/show-hide-password/12576 "2022-05-24T16:55:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simonm](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@Simonm](https://forums.knack.com/u/Simonm)\
**Post date:** [May 24, 2022, 4:55pm UTC](https://forums.knack.com/t/show-hide-password/12576/1 "2022-05-24T16:55:48Z")

</div>

I have been trying to find solution for a while now but with no success. I want to show password on click of an eye icon in my sign up or register page views. Is there a javascript to accomplish this?

Any help from Knack community members will be highly appreciated!

![tagged](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/a/add19f41750d3ccce6d7f77329e064582c399325.png)

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [May 24, 2022, 6:43pm UTC](https://forums.knack.com/t/show-hide-password/12576/2 "2022-05-24T18:43:29Z")

</div>

Hi,

Here’s how you could do this.

```auto
// Show password on click of eye icon on login and registration forms
// (Note: Uses view-render.any because view-render.form fails to fire on the login form)
$(document).on('knack-view-render.any', function(event, view, data) {
  
  const hasPasswordInput = $('input[name="password"]').length

  if (hasPasswordInput) {
    showHidePassword()
  }

  function showHidePassword() {
    const $pw = $('input[name="password"]')

    // add the icon
    const iconID = 'eye-password'
    const icon = `
      <a id="${iconID}" href="javascript:void(0)" style="position:absolute;right:10px;top:8px;">
        <i class="fa fa-eye"></i> 
      </a>
    `
    if ($('#' + iconID).length === 0) {
      $pw.after(icon)
    }

    // show/hide password on click of icon
    $('#' + iconID).on('click', function() {
      $pw.attr('type') === 'password' ? $pw[0].setAttribute('type', 'text') : $pw[0].setAttribute('type', 'password')
    })
  }

})

```

This is just a quick prototype. For professional assistance, feel free to reach out anytime.

Ian  
[Knack Pros](https://knackpros.com)

---

<div class="post-metadata">

**Author:** ![Simonm](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@Simonm](https://forums.knack.com/u/Simonm)\
**Post date:** [May 24, 2022, 7:04pm UTC](https://forums.knack.com/t/show-hide-password/12576/3 "2022-05-24T19:04:11Z")

</div>

Hi Knack Pros,

Your code works perfectly for me. I do not know how to thank you, please just drop me your email address so that I can engage you in the future!

Thanks  
Simon

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [May 24, 2022, 9:28pm UTC](https://forums.knack.com/t/show-hide-password/12576/4 "2022-05-24T21:28:44Z")

</div>

Nice one Ian, this is definitely one of those solutions I didn’t know I needed until I saw it 👍