[SOLUCIONADO] Vista preliminar de un formulario en un textarea

maracuyeaa · #1 (**permalink**) 05/02/2014, 08:22

Hola soy nueva en el foro, y principiante en programación (estoy dando un curso a distancia). Estoy haciendo un ejercicio de un formulario en Javascript. He estado buscando sobre lo que iba a preguntar en el foro pero no lo encontré.

Pues bien, me gustaría que al dar a enviar en mi formulario se escribiese todo lo que rellenó el usuario como vista preliminar, pero en un textarea en la misma pagina. Yo he conseguido que aparezca todo pero se me abre en otra pagina. Seguro que es una tontería pero estoy bloqueada, si me ayudaseis os lo agradecería.

Os paso el código para que veáis lo que estoy haciendo.

Muchas gracias de antemano!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FORMULARIO</title>
<script type="text/javascript">

function validateForm()
{
var x=document.forms["formulario"]["nombre"].value;
if (x==null || x=="")
{
alert("El nombre es obligatorio.");
return false;
}

var x=document.forms["formulario"]["archivo"].value;
if (x==null || x=="")
{
alert("El archivo es obligatorio.");
return false;}

var x=document.forms["formulario"]["opciones"].value;
if (x==null || x=="")
{
alert("El lugar es obligatorio.");
return false;}
}
function confirma(){
var na;
na = document.formulario.nombre.value;
ar = document.formulario.archivo.value;
op = document.formulario.opciones.value;
with (document){
open();

write("</br>");
write(" Nombre: ");

write(na);
write("</br>");
write(" Archivo: ");

write(ar);
write("</br>");
write(" Enviado desde: ");

write(op);
write("</br>");
write("</br>");
write("Gracias por el envio");

close();
}
}
</script>
</head>
<body>
Indica tus datos:
<br/><br/>
<form name="formulario" action="action.php" onsubmit="return validateForm()" method="post" id="formID">
<label for="nombre">Nombre</label><br/>
<input type="text" name="nombre" id="contenido" /><br/>

<label for="archivo">Archivo</label>
<input type="file" name="archivo" id="contenido" value="Examinar"> <br/>

<label for="enviado">Enviado desde</label>
<select id="contenido" name="opciones">

<option value="Barcelona"> Barcelona</option>
<option value="Sevilla"> Sevilla</option>
<option value="Madrid"> Madrid</option>
<option value="Valencia"> Valencia</option>
</select>
<input type="reset" onclick="borra()" value="Borrar"/>
<input type="button" onclick="confirma()" value="Enviar"/><br/>

<textarea rows="20" cols="40" id="areadetexto"></textarea>

</form>
</body>
</html>

Alexis88 · #2 (**permalink**) 05/02/2014, 10:24

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:

Ver original<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:

Ver originalvar 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:

Ver originalsetTimeout(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:

Ver originalNombre: Juan
Edad: 34
Email: [email protected]

Saludos

bathorz · #3 (**permalink**) 05/02/2014, 11:01

Código Javascript:

Ver originalfunction cambios(elem) {
    document.getElementById("areadetexto").innerHTML += elem.value + '\n';
}

Código HTML:

Ver original<input type="text" name="nombre" id="contenido" onchange="cambios(this);" />
<input type="file" name="archivo" id="contenido"  onchange="cambios(this);">
<select id="contenido" name="opciones" onchange="cambios(this);">

preventDefault(), bueno ese no lo tenía, gracias.

maracuyeaa · #4 (**permalink**) 05/02/2014, 14:39

Hola muchísimas gracias!!
He seguido lo que me has dicho Alexiss88, pero me sale como por duplicado los valores, solo quiero que me aparezca nombre, archivo y enviado desde y se me repiten dos veces y me aparece también borrar. No entiendo muy bien porque? Sabéis porqué?Alguna solución?

Me aparece esto duplicado:

Nombre: hola
Archivo:
Enviado desde: Barcelona
: Borrar
: Nombre: hola
Archivo:
Enviado desde: Barcelona
: Borrar

Alexis88 · #5 (**permalink**) 05/02/2014, 14:46

Coloca el código que haz implementado para ver en dónde está la falla, aunque me parece que le estás dando doble clic al botón "Enviar". Si es así, inserta la siguiente línea justo antes del bucle For.

Código Javascript:

Ver originaltextarea.value = "";

maracuyeaa · #6 (**permalink**) 05/02/2014, 15:03

Este es el código, pero no estoy dando doble clic!!

Código:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Formulario</title>

</head>

<body>

  <form method="post" onsubmit="return validateForm()" id="formulario">
    
    Nombre: <input type="text" name="Nombre" /><br/>
    
    Archivo: <input type="file" name="Archivo" /> <br/>
    
    Enviado desde: <select name="Enviado desde">
    
    <option value="Barcelona"> Barcelona</option>
    <option value="Sevilla"> Sevilla</option>
    <option value="Madrid"> Madrid</option>
    <option value="Valencia"> Valencia</option>
    
    </select>
    
     <input type="reset" onclick="borra()" value="Borrar"/> 
      
	<input type="submit" value="Enviar"/><br/>
      
         
	<textarea rows="20" cols="40" id="datos" readonly></textarea>

     
</form>
  
  
<script>

function validateForm()
{
var x=document.forms["formulario"]["nombre"].value;
if (x==null || x=="")
  {
  alert("El nombre es obligatorio.");
  return false;
  }


var x=document.forms["formulario"]["archivo"].value;
if (x==null || x=="")
  {
  alert("El archivo es obligatorio.");
  return false;}
  

var x=document.forms["formulario"]["opciones"].value;
if (x==null || x=="")
  {
  alert("El lugar es obligatorio.");
  return false;}
}

var formulario = document.getElementById("formulario"),
    textarea = document.getElementById("datos");

formulario.addEventListener("submit", function(e){
  e.preventDefault();
  
  for (i = 0, limite = formulario.elements.length; i < limite; i++)
    if (formulario.elements[i].getAttribute("type") != "submit")
      textarea.value += (formulario.elements[i].name) + ": " + formulario.elements[i].value + "\n";
}, 
false);

</script>


</body>
</html>

Alexis88 · #7 (**permalink**) 05/02/2014, 15:37

El error está en que colocas el textarea dentro del formulario, entonces, como se imprimen los valores de todos los campos del formulario dentro del textarea, también se imprimen los datos del textarea en el propio textarea. Ponlo afuera del formulario, así como te lo indiqué en el ejemplo.

Saludos

maracuyeaa · #8 (**permalink**) 05/02/2014, 15:42

Correcto funciona!con el botón borrar ocurría lo mismo pero lo saco fuera y ya está!Muchisimas gracias :D

Alexis88 · #9 (**permalink**) 05/02/2014, 15:47

Para que sigas usando el botón "Borrar", cambia la condición que puse por esta:

Código Javascript:

Ver originalif (!(/submit|reset/).test(formulario.elements[i].getAttribute("type")))

De este modo, solamente se añadirán los valores de los elementos del formulario cuyo tipo sea diferente a submit y reset.

Saludos