<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main">
	<h2>ИНФОРМАЦИЯ О ПОЛЬЗОВАТЕЛЯХ</h2>
	<p id="input_text">Введите имя и возраст пользователя и щелкните по кнопке "Найти"</p>
	<div id="output_data"></div>
	<form action="add_new_user.php" method="post" id="input_data">
		<label for="user_name">Имя:</label>
		<input type="text" name="user_name" value="" size="30"><br/>
		<label for="user_age">Возраст:</label>
		<input type="text" name="user_age" value="" size="30"><br/>
		<input type="button" id="find" value="Найти">
	</form>
</div>
<script>
	$(function(){
		$('#find').click(function(){
			var $cont=$('#output_data').empty();
			$('<div></div>').attr({
				'data-type':'text',
				'data-name':'name',
				'data-placeholder':'Новое имя'
			}).text('Имя').appendTo($cont).clone().attr({
				'data-type':'number',
				'data-name':'age',
				'data-placeholder':'Возраст'
			}).text('Возраст').appendTo($cont);
			$cont.find('>div').click(function(){
				var $t=$(this);
				if($t.find('*').length>0)
					return;
					
				$('<input/>').attr({
					type:$t.data('type'),
					name:$t.data('name'),
					placeholder:$t.data('placeholder'),
					'data-original-value':$t.text()
				}).val($t.text()).appendTo($t.empty()).on('keydown',function(e){
					var ENTER_KEYCODE=13;
					if(!!e.keyCode && e.keyCode==ENTER_KEYCODE || !!e.charCode && e.charCode==ENTER_KEYCODE){
						e.stopPropagation();
						$(this).trigger('blur');
					}
				}).blur(function(){
					var $t=$(this);
					if($t.val().trim().length<=0 || $t.val().trim()==$t.data('original-value'))
						return;
					
					send_request($t.attr('name'),$t.val());
					$t.parent().html($t.data('original-value'));
				});
			});
		});
	});
	
	function send_request(field,new_value){
		//Ajax request
		alert(field+': '+new_value);
	}
</script>