jQuery change input type dynamically

Question

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>

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');
    });
});

Nawed Khan · Accepted Answer · 2020-07-10 08:49:00Z

1

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');
    });
});

answered Jul 10, 2020 at 8:49

Nawed Khan

4,3911 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wimanicesir · Accepted Answer · 2020-07-10 08:47:02Z

You can solve this with two steps:

Get parent of current click object with $(this).parent()
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>

Collectives™ on Stack Overflow

jQuery change input type dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related