Requerimiento: Dado un formulario con 4 campos, mientras se vaya ingresando los valores, se debe de mostrar una vista previa de los datos ingresados.
DEMO: http://demo.juliopari.com/jquery_preview/v2/
CÓDIGO:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>JQuery Preview</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(function(){
$("#formEntry input").keyup(function(){
var field_id = $(this).attr("id");
var word_preview = $(this).val();
$("#preview_"+field_id).empty().append(word_preview);
})
});
</script>
<body>
<h1>JQuery Preview : Varios Inputs</h1>
<div id="formEntry">
<div>
<b>Ingrese title:</b>
<input name="title" id="title">
<span id="preview_title"></span>
</div>
<div>
<b>Ingrese description:</b>
<input name="description" id="description">
<span id="preview_description"></span>
</div>
<div>
<b>Ingrese facebook:</b>
<input name="facebook" id="facebook">
<span id="preview_facebook"></span>
</div>
<div>
<b>Ingrese twitter:</b>
<input name="twitter" id="twitter">
<span id="preview_twitter"></span>
</div>
</div>
</body>
</html>
[/html]
juliopari
Si te ha interesado este artículo y deseas un apoyo o asesoría en algún requerimiento, envíame un mensaje a: (info@juliopari.com) o sino a través de Linkedin: https://www.linkedin.com/in/juliopari/