Está en: » Artículos »

Previsualización de datos de un formulario “en vivo”

Previsualización de datos de un formulario “en vivo”

previsualización de comentario en "vivo"

previsualización de comentario en "vivo"

He recibido alguna que otra pregunta sobre qué plugin utilizo para la previsualización de los comentarios antes de enviarlos. La respuesta es bien sencilla, ninguno.

Para realizar esta hazaña, utilizamos javascript, mediante el cual, le indicamos que cada vez que se presione una tecla, coja el contenido de lo que estemos escribiendo y lo inserte en el área de previsualización. Algo que parece complejo, pero que no lo es.

Bueno, comencemos:

Necesitamos un formulario (voy a imitar un típico formulario de contacto) y un área de previsualización (la voy a poner justo a la derecha del formulario).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Previsualización de formulario en "vivo"</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body { margin: 10px; text-align: center; width: 100%; }
			#contenedor { margin: 0 auto; width: 900px; text-align: left; }
			.flotando { float: left; width: 445px;	}
			p{ margin: 2px 0 10px 0; }
			.margen-derecho { margin-right: 10px; }
			input, textarea { width: 99%; margin-bottom: 10px; float: none; clear: both; }
			textarea { height: 300px; }
			label { float: none; clear: both; display: inline; }
			.titulo { font-size: 14pt; }
			.negrita { font-weight: bold; }
		</style>
	</head>
	<body>
		<div id="contenedor">
			<div id="formulario" class="flotando margen-derecho">
				<form action="#" enctype="multipart/form-data">
					<label for="nombre">Su nombre</label>
					<input type="text" name="nombre" id="nombre" />
 
					<label for="email">Su correo electrónico</label>
					<input type="text" name="email" id="email" />
 
					<label for="mensaje">Su mensaje</label>
					<textarea id="mensaje"></textarea>
				</form>
			</div>
			<div id="previsualizacion" class="flotando">
				<fieldset>
					<legend>Previsualización de mensaje:</legend>
					<p class="titulo">Mensaje de <span id="preview_name" class="negrita">Anónimo</span> (<span id="preview_email"></span>)</p>
					<span id="preview_text"></span>
				</fieldset>
			</div>
		</div>
	</body>
</html>

Ahora necesitamos crear un script en javascript que coja el contenido de cada campo y lo inserte en la previsualización. Para ello vamos a usar algunas funciones de javascript:

  • document.getElementById

Esta “función” nos permite serializar como objeto una etiqueta html a la cual le hemos puesto un identificador (id).
Podemos aplicar varias acciones a este objeto como obtener su valor (document.getElementById(‘id’).value). En nuestro caso vamos a utilizar innerhtml que básicamente sirve para establecer el contenido de dicho objeto (osease, el contenido de esta etiqueta)

  • replace

Esta función nos permite reemplazar un contenido. Es parecida a la función str_replace() de php salvo que sólo reemplaza la primera coincidencia (salvo que se lo indiquemos).

Así pues, procedamos a realizar el script para la previsualización del texto:

function liveComment_text(texto)
{
	texto = texto.replace(/n/gi,'<br />');
	document.getElementById('preview_text').innerHTML = texto;
}

Recibimos el texto y lo primero que hacemos es reemplazar todos los saltos de línea (n) por saltos de línea en html. Al indicarle gi estamos diciéndole que reemplace todos los caracteres encontrados (no sólo el primero que encuentre).
Posteriormente, creamos un objeto con el id de etiqueta ‘preview_text’, de forma que insertamos en su interior el texto (ya reemplazado).

Y básicamente eso. No hay más. Esa es toda la ciencia.
Lógicamente ya jugaremos con las funciones que necesitemos, así como con los campos necesarios.

Aquí el código de cómo quedaría el código final

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Previsualización de formulario en "vivo"</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body { margin: 10px; text-align: center; width: 100%; }
			#contenedor { margin: 0 auto; width: 900px; text-align: left; }
			.flotando { float: left; width: 445px;	}
			p{ margin: 2px 0 10px 0; }
			.margen-derecho { margin-right: 10px; }
			input, textarea { width: 99%; margin-bottom: 10px; float: none; clear: both; }
			textarea { height: 300px; }
			label { float: none; clear: both; display: inline; }
			.titulo { font-size: 14pt; }
			.negrita { font-weight: bold; }
		</style>
 
		<script type="text/javascript">
			function liveComment_name(texto)
			{
				if( texto == '' ) texto = 'Anónimo';
				document.getElementById('preview_name').innerHTML = texto;
			}
 
			function liveComment_email(texto)
			{
				document.getElementById('preview_email').innerHTML = texto;
			}
 
			function liveComment_text(texto)
			{
				texto = texto.replace(/n/gi,'<br />');
				document.getElementById('preview_text').innerHTML = texto;
			}
		</script>
	</head>
	<body>
		<div id="contenedor">
			<div id="formulario" class="flotando margen-derecho">
				<form action="#" enctype="multipart/form-data">
					<label for="nombre">Su nombre</label>
					<input type="text" name="nombre" id="nombre" onkeyup="liveComment_name(this.value)" />
 
					<label for="email">Su correo electrónico</label>
					<input type="text" name="email" id="email" onkeyup="liveComment_email(this.value)" />
 
					<label for="mensaje">Su mensaje</label>
					<textarea id="mensaje" onkeyup="liveComment_text(this.value)"></textarea>
				</form>
			</div>
			<div id="previsualizacion" class="flotando">
				<fieldset>
					<legend>Previsualización de mensaje:</legend>
					<p class="titulo">Mensaje de <span id="preview_name" class="negrita">Anónimo</span> (<span id="preview_email"></span>)</p>
					<span id="preview_text"></span>
				</fieldset>
			</div>
		</div>
	</body>
</html>

Os dejo la vista previa del ejemplo: https://miguelcarmona.com/scripts_propios/previsualizacion-de-formulario-en-vivo/

Comentarios

  1. Josema dice:

    Con ajax incluso se podría validar los campos como el correo electrónico o la longitud antes de que el usuario envíe el forumlario de contacto.

    Saludos.

    • Correcto, pero no haría falta sobrecargar el servidor para esto ya que no requiere de una alta seguridad.
      Simplemente se podría comprobar mediante javascript (y si se cumplen las condiciones, enviar el formulario).

      En verdad, si intentas saltarte las protecciones mediante alteración del javascript, cuando llegue al servidor la petición, no validaría las condiciones y de vuelta para atrás. Por esta razón digo que no haría falta tanta seguridad, ya que básicamente si te intentas saltar las protecciones el único perjudicado eres tú mismo.

      Aparte, imagina un sitio que tuviese un flujo constante de comentarios. Estaría contínuamente realizando peticiones al servidor, enviando cookies, validando seguridad, etc…

  2. luiyi dice:

    q chinva de codigos los q aqui he encontrado, definitivamente lo q estoy estudiando es para locos y me gusta,suerte a mis colegas dios los bendiga

  3. Mariano dice:

    Hola, esto me ha servido de maravillas, mi unica consulta es, en mi formulario hay varias opciones que van modificando el precio del servicio (es un formulario de contrato), hay manera de que tambien se muestre el precio final “en vivo” dependiendo de los botones seleccionados???

    Gracias!

    • Claro que puedes, sólo tienes que ir evaluando cada opción cuando cambie.
      Este ejemplo es para algo básico; para algo más complejo, recomiendo trabajar con un framework como JQuery y no trabajar con el evento onclick, sino crear eventos sobre el formulario.

      Saludos…

      • Mariano dice:

        Gracias por tu pronta respuesta, tenes algun tutorial o guia de como hacer eso? he estado buscando y con lo único que he dado es con este tuto, que es una maravilla, pero aun me falta eso otro…si de casualidad tienes alguno a mano te agradeceria muchisimo.

        Saludos!!!

  4. Mariano dice:

    Hola que tal como estas quisiera saber si tambien se pueden meter imagenes en este form live, muchas gracias

  5. Juanjo dice:

    Gracias, me sirvió para lo que necesitaba. Un saludo

Deje su comentario

Previsualización de comentario
  1. Anónimo dice:





Pings para esta entrada

  1. […] Previsualización de datos de un formulario “en vivo” […]