d
Amit DhamuSoftware Engineer
 

Toggle Password Characters

2 minute read 00000 views

HTML

<form id="resetPasswordForm" method="post" action="">
    <input type="password" name="pass" class="toggleable"/>
</form>
<a href="javascript:void(0);" id="togglePW" rel="resetPasswordForm>Toggle Password Characters</a>

JavaScript Function

function TogglePassChars(form) {
  $(form + ' input').each(function () {
    if ($(this).hasClass('toggleable')) {
      $name = $(this).attr('name')
      $class = $(this).attr('class')
      $value = $(this).attr('value')
      $type = $(this).attr('type') === 'text' ? 'password' : 'text'
      $(this).replaceWith(
        "<input type='" +
          $type +
          "' name='" +
          $name +
          "' value='" +
          $value +
          "' class='" +
          $class +
          "'/>"
      )
    }
  })
}

jQuery Execution

$('#togglePW').on('click', function () {
  $form = '#' + $(this).attr('rel')
  TogglePassChars($form)
})