I am using Fluent Forms and have find this snippet:
passField.wrap("<div class='ff_input-group'></div>");
passField.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </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 class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password_1"> </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?
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
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 class="ff_input-group-append"><span class="ff_input-group-text"><i id=¨confirmPass¨ style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </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 :)
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 class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password_1"> </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");
}
});