Jquery Change input attribute password to text

I am a jQuery beginner and I need your help to solve my one week lasting problem. I have a table of (login, password, button) as in the picture below. I want to show the hidden password for only 5 seconds and then hide it again, and this for only the row that the button is clicked. Problem : - when one button is clicked, everything is ok. - when another button is clicked, the first password also is shown.Can somebody help me fix that ?

	$(document).ready(function() {
	//--------------------------------------
	$("table input[type='button']").on("click",function() {
	var element_td = $(this).parent('td');
	var element_tr = element_td.parent('tr');	
	var element_input = element_tr.find("input[type='password']");
	$("#form-inner").show();
	//--------------------------------------
	function truePswd(password) {
		var password = $('#password').val();
		if (password == '') {
		alert ("Empty password");
		return false;
		}
		else
		{
		return true;
		}
	}
	$("#ok").on("click",function() {

	//----------------------------------------
	var result =truePswd (password);
    if (result == true) {
		var password = $('#password').val();
		$.ajax ({
		type : 'POST',
		cache : 'false',
		url : 'process.php',
		data : 'password ='+password,
		success : function(data) {
		$("#form-inner").hide();

		if(data = 'ok') {

		element_input.addClass('evidence');
		element_input.attr('type', 'text');	
		
	//-----------------------------------------
		setTimeout(function() {
		element_input.removeClass('evidence');
		element_input.attr('type', 'password');	
			
		}, 
		10000
		);
	//-----------------------------------------
		}
		},
		error : function() {
		alert("Error Ajax request");
		}
		});
		}
	});
	});

	//------------------------------------------
	});
		<table>
			<thead>
			<tr>
				<td>login</td>
				<td>password</td>
				<td>action</td>
			</tr>
			</thead>
			<tbody>
			<tr id="1">
				<td>admin</td>
				<td>
					<input type="password" value="[email protected]_!21&$"/>
				</td>
				<td>
					<input type="button" value="show password"/>
				</td>
			</tr>
			<tr id="2">
				<td>lynxus</td>
				<td>
					<input type="password" value="l1ncSU$"/>
				</td>
				<td>
					<input type="button" value="show password"/>
				</td>
			</tr>
			<tr id="3">
				<td>zeus76</td>
				<td>
					<input type="password" value="d1L&[email protected]_714"/>
				</td>
				<td>
					<input type="button" value="show password"/>
				</td>
			</tr>
			</tbody>
		</table>

enter image description here

Answers 1

  • Here try this.. I hope this is what you are looking for...

    here's a fiddle for you to check:https://jsfiddle.net/sgvwume3/1/

    here's the Jquery Code:

    $('.btn').click(function(){
      var $this = $(this);
      $parent = $this.parent().parent();
      $td = $parent.find('td:eq(1)');
      sample($this, $td);
    
    })
    
    function sample($this, $input){
        var input = $input;
        $this.promise(
        input.find('.inputClass').attr('type', 'text')
      ).done(function(){
        setTimeout(function(){
        input.find('.inputClass').attr('type', 'password');
        }, 3000);
      });
    }
    

Related Articles