CODEWITHSUNDEEP
javascriptjqueryhtmlwoocommerce
haveman
haveman

Reputation: 383

jquery change more than one input type at once

i have created some other threads but without any working answers so far.

I have this code:

jQuery(function ($) {
$('.nm-myaccount-login-inner .form-row .lawrence_password span.required').append(
"<div class='hide-show'><span toggle='#password' class='fa fa-fw field-icon toggle-password fa-eye'></span></div>");

$('.nm-myaccount-login-inner .form-row .lawrence_register_password span.required').append(
"<div class='hide-show'><span toggle='#password' class='fa fa-fw field-icon toggle-password fa-eye'></span></div>");
});

jQuery(function($){
  $(".toggle-password").click(function() {

  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});


});

What this does is add an clickable icon to ".lawrence_password span" and "lawrence_register_password span". Then when a person clicks the icon the input password will change its type from: <input type="password"> to <input type="text"> so the password becomes visible.

However this only affect my first input field, and not all my <input type="password">

I want this jquery function to apply to all <input type="password">

My html:

<p class="form-row form-row-wide">
                    <label for="password" class="lawrence_password">Password <span class="required">*<div class="hide-show"><span toggle="#password" class="fa fa-fw field-icon toggle-password fa-eye-slash"></span></div></span></label>
                    <input class="input-text" type="text" name="password" id="password">
                </p>

The register password input is indentical to this, it just have the class "lawrence_password_register".

Is this possible? Thank you!

Upvotes: 1

Views: 152

Answers (1)

Mosia Thabo
Mosia Thabo

Reputation: 4267

I think all you need to do is to use class instead of id. if you change toggle="someClass" attribute of <span> within <div> where each <input type="password"/> has class class="someClass".

Below is an example where I set class="password" on inputs and then on your <span toggle=".password">... and that's all you need to change.

jQuery(function ($) {
  $('.lawrence_password span.required').append(
  "<div class='hide-show'><span toggle='.password' class='fa fa-fw field-icon toggle-password fa-eye'>Toggle Button</span></div>");

  $('.lawrence_register_password span.required').append(
  "<div class='hide-show'><span toggle='.password' class='fa fa-fw field-icon toggle-password fa-eye'>Toggle Button</span></div>");

  $(".toggle-password").click(function() {
    var input = $($(this).attr("toggle"));

    if (input.attr("type") === "password") {
      input.attr("type", "text");
    } else {
      input.attr("type", "password");
    }
  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-row form-row-wide">
    <label for="password" class="lawrence_password">Password <span class="required">*     </span></label>
    <input class="input-text password" type="password" name="password" id="password">
</p>
<p class="form-row form-row-wide">
    <label for="password" class="lawrence_register_password">Password Register<span class="required">*</span></label>
    <input class="input-text password" type="password" name="password" id="password">
</p>

Upvotes: 1

Related Questions