Jquery Change input attribute password to text

Question

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="n1mD@_!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&m@4_714"/>
				</td>
				<td>
					<input type="button" value="show password"/>
				</td>
			</tr>
			</tbody>
		</table>

enter image description here

Sam Teng Wong · Accepted Answer · 2016-04-11 02:26:44Z

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);
  });
}

edited Apr 11, 2016 at 2:26

answered Apr 11, 2016 at 2:17

Sam Teng Wong

2,4495 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Teng Wong Over a year ago

I have set 3seconds there which is 3000.. you can change it to five seconds by changing the 3000 to 5000.

Collectives™ on Stack Overflow

Jquery Change input attribute password to text

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related