0
\$\begingroup\$

I have managed to achieve this action through this:

function togglePasswordVisibility($pw, on, id) {
		$pw.attr('type', on ? 'password' : 'text');
		$('[data-id=' + id + '] > i').toggleClass('fa-eye-slash fa-eye');
	}

	// $("#pass-on").after('<div class="input-group-append"><span class="password-button password-button-main"><i class="fas fa-eye-slash"></i></span></div>');

	$('[data-id]').on('click', function() {
		var id = $(this).data('id'),
			$pw = $('#' + id);

		togglePasswordVisibility($pw, false, id);

		setTimeout(function() {
			togglePasswordVisibility($pw, true, id);
		}, 800);
	});
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-group">
				  	<input type="password" id="pass-on" title="<?php echo $user->valid_password_error; ?>" class="form-control" name="txt_upass" placeholder="Enter Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
					<label>Password</label>
					<div class="input-group-append">
				    	<span class="password-button password-button-main" data-id="pass-on"><i class="fas fa-eye-slash"></i></span>
				  	</div>
				</div>
				<div class="form-group progress jquery-result-1" style="height: 10px;">


					<div class="form-group input-group">
						<input type="password" id="pass-verify-on" title="<?php echo $user->valid_password_error; ?>" class="form-control" name="txt_upass_ok" placeholder="Retype Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
						<label>Retype Password</label>
						<div class="input-group-append">
					    	<span class="password-button password-button-verify" data-id="pass-verify-on"><i class="fas fa-eye-slash"></i></span>
					  	</div>
					</div>

But I would like to place the password button from within the function using the commented line with the after callback and making it apply the same effect. Right now the button correlates with the input through the association of data-id and id. If I would to place it inside the function I would have to get rid of the data-id and still make it act individually on each input, I just can't figure how. Thank you for your time.

\$\endgroup\$
1
\$\begingroup\$

You can first create the i element and add a click event handler to it dynamically while you wrap it inside the div and span and add it to the document.

As you use jQuery, I would suggest using it for creating each individual element, providing it with attributes using jQuery methods.

Here is how you could do it:

function togglePasswordVisibility($pw, on, $eye) {
    $pw.attr('type', on ? 'password' : 'text');
    $eye.toggleClass('fa-eye-slash fa-eye');
}

$("[type=password]").each(function () {
    var $pw = $(this);
    var $eye = $("<i>").addClass("fas fa-eye-slash").click(function () {
        togglePasswordVisibility($pw, false, $eye);
        setTimeout(function() {
            togglePasswordVisibility($pw, true, $eye);
        }, 800);
    });
    $pw.parent().append(
        $("<div>").addClass("input-group-append").append(
            $("<span>").addClass("password-button password-button-main").append($eye)
        )
    );
});
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>

<div class="input-group">
    <input type="password" id="pass-on" title="<?php echo $user->valid_password_error; ?>" class="form-control" name="txt_upass" placeholder="Enter Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
    <label for="pass-on">Password</label>
</div>
                
<div class="form-group input-group">
    <input type="password" id="pass-verify-on" title="<?php echo $user->valid_password_error; ?>" class="form-control" name="txt_upass_ok" placeholder="Retype Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
    <label for="pass-verify-on">Retype Password</label>
</div>

\$\endgroup\$
  • \$\begingroup\$ You are freaking genius. Thanks a lot, you are awesome! :) \$\endgroup\$ – user1286956 Dec 28 '18 at 18:55
  • 1
    \$\begingroup\$ You're welcome ;-) \$\endgroup\$ – trincot Dec 28 '18 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.