CODEWITHSUNDEEP
jqueryinput
stepbystep
stepbystep

Reputation: 391

jQuery change input type dynamically

I want create change password page. In that page i have two inputs and i should show password onclick to icon. How i can do it for two inputs ? for one inputs works fine.

HTML:

<div class="password-type">
    <input 
        id="password" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="New Password"
        >
        <span class="far fa-eye show-password-eyes show-password"></span>
</div>

<div class="password-type">
    <input 
        id="password2" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="Confirm Password"
        >
        <span class="far fa-eye show-password-eyes show-password"></span>
</div>

IMG

jQuery:

$( document ).ready(function() {
    $( ".show-password" ).on( "click", function(e) {
        e.preventDefault();
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $("#password");
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password');
    });
});

Upvotes: 0

Views: 1778

Answers (2)

Nawed Khan
Nawed Khan

Reputation: 4401

Your var input is always equal to '#password' no matter which icon was clicked. Your input should be #password or #password2 depending of which icon was clicked. We can do this by using prev() selector.

$( document ).ready(function() {
    $( ".show-password" ).on( "click", function(e) {
        e.preventDefault();
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $(this).prev('input');
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password');
    });
});

Upvotes: 1

Wimanicesir
Wimanicesir

Reputation: 5121

You can solve this with two steps:

  1. Get parent of current click object with $(this).parent()
  2. Search in this parent for a inputfield with .find()

$(document ).ready(function() {
    $( ".show-password" ).on( "click", function(e) {
        e.preventDefault();
        $(this).toggleClass("fa-eye fa-eye-slash");
        // First get parent, then find the correct input within that parent.
        var input = $(this).parent().find('input');
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="password-type">
    <input 
        id="password" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="New Password"
        >
        <span class="far fa-eye show-password-eyes show-password">EYE</span>
</div>

<div class="password-type">
    <input 
        id="password2" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="Confirm Password"
        >
        <span class="far fa-eye show-password-eyes show-password">EYE</span>
</div>

Upvotes: 0

Related Questions