Vista preliminar de un formulario en un textarea

[Alexis88]

Solamente necesitas evitar el comportamiento natural del evento submit, el cual consiste en enviar los datos del formulario hacia otro archivo (o a veces hacia el mismo) para su procesamiento, para lo cual puedes echar mano del método preventDefault, luego debes recorrer los campos contenidos en el formulario y asignar sus valores al textarea.

Código HTML:

<form id = "formulario">
    Nombre: <input type = "text" id = "nombre" name = "nombre" /> <br />
    Edad: <input type = "text" id = "edad" name = "edad" /> <br />
    E-Mail: <input type = "email" id = "email" name = "email" /> <br />
    <input type = "submit" value = "Enviar" />
</form>
  
Datos: <br />
<textarea id = "datos" readOnly></textarea>
 

Código Javascript:

var formulario = document.getElementById("formulario"),
    textarea = document.getElementById("datos");
 
formulario.addEventListener("submit", function(e){
    e.preventDefault(); //Aquí evito el envío de los datos
    for (i = 0, limite = formulario.elements.length; i < limite; i++)
        if (formulario.elements[i].getAttribute("type") != "submit")
            textarea.value += (formulario.elements[i].name).charAt(0).toUpperCase() + (formulario.elements[i].name).slice(1) + ": " + formulario.elements[i].value + "\n";
}, false);
 

Así es como se ve: http://jsbin.com/nuko/1

Y si quieres que luego de unos segundos, se realice el envío de los datos, añade esto justo antes de cerrar la llave }:

Código Javascript:

setTimeout(function(){
    formulario.submit();
}, 5000);
 

Con el método setTimeout, ejecuto el envío de los datos del formulario luego de 5 segundos desde que el usuario pulse el botón "Enviar".

Con el método charAt, obtengo el caracter ubicado en la posición indicada en una cadena, con el método toUpperCase, convierto a mayúscula el caracter que le haya pasado, en este caso, el caracter que extraje de la cadena con el método anterior, mientras que con el método slice, obtengo una porción de una cadena desde la posición especificada. En este ejemplo, utilizo estos tres métodos para obtener la primera letra del valor del atributo name de cada caja de texto en el formulario, la convierto a mayúscula y le añado el resto de la cadena, de este modo, cuando se muestren los datos en el textarea, será de esta forma:

Código HTML:

Nombre: Juan
Edad: 34
Email: [email protected]
 

Saludos