Show/Hide password form JS-CodePudding

I am using Fluent Forms and have find this snippet:


passField.wrap("<div class='ff_input-group'></div>");
passField.after('<div ><span ><i style="cursor:pointer;" > </i></span></div>');

$form.find(".toggle-password").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField.attr("type") == "password") {
        passField.attr("type", "text");
    } else {
        passField.attr("type", "password");
    }
});

It works perfectly with the password field, but I have a confirm password field with att name: password_1

If I use this code repeatedly


passField_1.wrap("<div class='ff_input-group'></div>");
passField_1.after('<div ><span ><i style="cursor:pointer;" > </i></span></div>');

$form.find(".toggle-password_1").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField.attr("type") == "password") {
        passField.attr("type", "text");
    } else {
        passField.attr("type", "password");
    }
});

It shows the eye icon but changes the first password field on click, not in the confirmation one. Bot eyes icons change the first password field, but not the confirmation one.

What I am doing wrong?

CodePudding user response：

Perhaps it is because you are not using an existing class, that is, you are telling it to search for an element by the class ".toggle-password_1", perhaps the most correct thing is to add an ID to it and search for said label by its ID.

The correction would be such that:

passField_1.wrap("<div class='ff_input-group'></div>");
passField_1.after('<div ><span ><i id=¨confirmPass¨ style="cursor:pointer;" > </i></span></div>');

$form.find("#confirmPass").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField_1.attr("type") == "password") {
        passField_1.attr("type", "text");
    } else {
        passField_1.attr("type", "password");
    }
});

Pdt: The object was not called correctly in the function, the correct reference is "passField_1"

I'm new helping on stackoverflow, I hope my answer helped you :)

CodePudding user response：

From what I can see at the first glance is that when you are getting ".toggle-password_1" you are still changing attributes in passField and not in passField_1

CodePudding user response：

Your code is good but just put it behind the code you used to confirm the code behind the hide the password because it happens repeatedly and gets the error. Both the processes completely are opposing each other which makes nothing and you should have realized it is not conforming to the code and not getting the class correctly which also might be the reason.

here is the fixed version that I did which might help you: < the code you used for conformation > and

passField_1.wrap("<div class='ff_input-group'></div>");
passField_1.after('<div ><span ><i style="cursor:pointer;" > </i></span></div>');
$form.find(".toggle-password_1").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField.attr("type") == "password") {
        passField.attr("type", "text");
    } else {
        passField.attr("type", "password");
    }
});