Ver datos ingresados en formulario en otra ventana windows

dguerrah · #1 (**permalink**) 07/10/2010, 11:43

Hola masters! quisiera que me ayuden con un tema:
quiero que al llenar un formulario y dar clic en un boton se abra una ventana nueva diciendo:
Bienvenida + mi nombre ingresdo en el formulario + mi apellido+ el dia y hora actual.

Tengo este codigo pero no me sale: AYUDENME POR FA

<html> <head>
<title>Efectos de carga y descarga de una página</title>
<script language="Javascript">
function carga()
{
var opciones="left=100,top=100,width=250,height=150";
miventana = window.open("","opcional",opciones);
miventana.document.write("Bienvenido: "+forma.nombres.value)+(forma.apel.value)+"ust ed ha ingresado a la pagina el dia:"+mueveReloj();
}
function descarga() { var opciones="left=100,top=100,width=250,height=150";
miventana =window.open("","opcional",opciones); miventana.document.write("Gracias por visitar nuestra página");
}

function mueveReloj(){
var LaFecha=new Date();
var Mes=new Array("Enero","Febrero","Marzo","Abril","Mayo","Ju nio","Julio","Agosto","Septiembre","Octubre","Nov i embre","Diciembre");
var diasem=new Array('domingo','lunes','martes','miercoles','juev es','viernes','sabado');
var diasemana=LaFecha.getDay();
var FechaCompleta="";
var NumeroDeMes="";
var hora = LaFecha.getHours();
var minuto = LaFecha.getMinutes();
var segundo = LaFecha.getSeconds();
NumeroDeMes=LaFecha.getMonth();
FechaCompleta=diasem[diasemana]+" "+LaFecha.getDate()+" de "+Mes[NumeroDeMes]+" de "+LaFecha.getFullYear()+" "+hora+":"+minuto+":"+segundo;
document.getElementById('pepe').innerHTML=FechaCom pleta;
setTimeout('mueveReloj()',1000)
}

function visitar()
{
var errtxt = "";
var errcnt = 0;
// validamos que ninguno de los campos sea en blanco
if (!forma.nombres.value) //si el campo nombre esta en blanco
{
errtxt = errtxt + "\nNo debe dejar el nombre en blanco!";
errcnt+= 1;
}
if (!forma.apel.value)
{
errtxt = errtxt + "\nNo debe dejar el apellido en blanco!";
errcnt+= 1;
}
}
</script>
</head>
<body onLoad="carga();" onUnload="descarga();">
<form name="forma" method="post" action="">
<table width="35%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><div align="center" class="Estilo1">Tema1: Formulario
</div></td>
</tr>
<tr>
<td><span class="Estilo4">Nombres: </span></td>
<td><input name="nombres" type="text" ></td>
</tr>
<tr>
<td><span class="Estilo4">Apellidos: </span></td>
<td><input name="apel" type="text" ></td>
</tr>
<tr>
<td> </td>
<td><input name="enviar" type="button" id="enviar3" value="Activar"
onClick="visitar();"></td>
</tr>
</table>
<p>  </p>
</form>
</body>
</html>

carmagedon · #2 (**permalink**) 07/10/2010, 19:31

Hola,

Bueno, ahí lo acomodé un poco. Igual hay que trabajar bastante para mejorarlo, pero creo que lo que necesitabas está funcionando.

Cualquier cosa nos avisas.

Código Javascript:

Ver original<html>
    <head>
        <title>Efectos de carga y descarga de una p&#225;gina</title>
        <script language="javascript" type="text/javascript">
            function visitar(){
                var errtxt = "";
                var errcnt = 0;
                // validamos que ninguno de los campos sea en blanco
                try{
                    if (forma.nombres.value.length == 0) //si el campo nombre esta en blanco
                    {
                        errtxt = errtxt + "\nNo debe dejar el nombre en blanco!";
                        errcnt+= 1;
                    }
                }catch(e){                    
                }
                try{
                    if (forma.apel.value.length == 0)
                    {
                        errtxt = errtxt + "\nNo debe dejar el apellido en blanco!";
                        errcnt+= 1;
                    }
                }catch(e){                    
                }
            }
 
            function carga()
            {
                var opciones="left=100,top=100,width=250,height=150";
                miventana = window.open("","opcional",opciones);
                miventana.document.write("Bienvenido: "+forma.nombres.value)+(forma.apel.value)+"usted ha ingresado a la pagina el dia: "+mueveReloj();
            }
            function descarga() {
                var opciones="left=100,top=100,width=250,height=150";
                miventana = window.open("","opcional",opciones); miventana.document.write("Gracias por visitar nuestra página");
                window.open("","opcional","left=100,top=100,width=250,height=150");
            }
 
            function mueveReloj(){
                var LaFecha=new Date();
                var Mes=new Array("Enero","Febrero","Marzo","Abril","Mayo","Ju nio","Julio","Agosto","Septiembre","Octubre","Nov i embre","Diciembre");
                var diasem=new Array('domingo','lunes','martes','miercoles','juev es','viernes','sabado');
                var diasemana=LaFecha.getDay();
                var FechaCompleta="";
                var NumeroDeMes="";
                var hora = LaFecha.getHours();
                var minuto = LaFecha.getMinutes();
                var segundo = LaFecha.getSeconds();
                NumeroDeMes=LaFecha.getMonth();
                FechaCompleta=diasem[diasemana]+" "+LaFecha.getDate()+" de "+Mes[NumeroDeMes]+" de "+LaFecha.getFullYear()+" "+hora+":"+minuto+":"+segundo;
                document.getElementById('pepe').innerHTML=FechaCompleta;
                setTimeout('mueveReloj()',1000)
            }
 
        </script>
    </head>
 
    <body onLoad="javascript:carga()" onUnload="javascript:descarga()">
        <form name="forma" method="post" action="">
            <table width="35%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="2"><div align="center" class="Estilo1">Tema1: Formulario
                        </div></td>
                </tr>
                <tr>
                    <td><span class="Estilo4">Nombres: </span></td>
                    <td><input name="nombres" type="text" ></td>
                </tr>
                <tr>
                    <td><span class="Estilo4">Apellidos: </span></td>
                    <td><input name="apel" type="text" ></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="button" name="enviar" id="enviar3" value="Activar" onclick="javascript:visitar()"></td>
                </tr>
            </table>
            <p>&nbsp; </p>
        </form>
    </body>

Saludos!

emprear · #3 (**permalink**) 09/10/2010, 12:18

dguerrah:

en realidad tu objetivo no es del todo claro, no se sabe si lo que querés es procesar un formulario o simplemente que este genere una nueva ventana con los datos del usuario y la fecha.

Si fuese lo primero, sería mucho más logico, y podrias cargar la página que procesa en una nueva ventana con el formato que vos desees. Pero el "action" de tu form no especifica valor alguno. En fin , no me suena muy lógico, pero te paso un código para generar lo que querés, validación incluida.

Código HTML:

Ver original<!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" xml:lang="es" lang="es" >
<head>
<title>Form con validación y submit en Popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="x" />
<meta name="keywords" content="x" />
<meta http-equiv="Content-Language" content="ES" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" lang="es" />
<meta name="author" content="http://emprear.com"  xml:lang="es" lang="es" />
<script type="text/javascript">
//<![CDATA[
 
var LaFecha=new Date();
var Mes=new Array("Enero","Febrero","Marzo","Abril","Mayo","Ju nio","Julio","Agosto","Septiembre","Octubre","Nov i embre","Diciembre");
var diasem=new Array('domingo','lunes','martes','miercoles','juev es','viernes','sabado');
var diasemana=LaFecha.getDay();
var FechaCompleta="";
var NumeroDeMes="";
var hora = LaFecha.getHours();
var minuto = LaFecha.getMinutes();
var segundo = LaFecha.getSeconds();
NumeroDeMes=LaFecha.getMonth();
FechaCompleta=diasem[diasemana]+" "+LaFecha.getDate()+" de "+Mes[NumeroDeMes]+" de "+LaFecha.getFullYear()+"<br>a las"+hora+":"+minuto+":"+segundo;
 
function validar_form ( )
{
    //var valido = true;
var vnombre = document.form_contacto.nombre.value;
var vapellido = document.form_contacto.apellido.value;
 
        if ( vnombre == "" )
        {
                alert ( "Debe ingresar su nombre" );
document.form_contacto.nombre.focus();
                return false;
                exit;
        }
 
        if ( vapellido == "" )
        {
                alert ( "Debe ingresar su apellido" );
document.form_contacto.apellido.focus();
                return false;
                exit;
        }
 
  var nuevaVentana=window.open('','name','height=400,width=500');
  
  nuevaVentana.document.write('<html><head><title>Popup<\/title>');
  nuevaVentana.document.write('<\/head><body>');
  nuevaVentana.document.write('<p>Gracias <b>' + vnombre + ' ' + vapellido + '<\/b><\/p>');
  nuevaVentana.document.write('<p>has ingresado a este sitio a las <span id="pepe">' + FechaCompleta + ' <\/span><\/p>');
  nuevaVentana.document.write('<p><a href="javascript:self.close()">Cerrar<\/a> esta ventana.<\/p>');
  nuevaVentana.document.write('<\/body><\/html>');
  nuevaVentana.document.close();
 
}
 
//]]>
</script>
</head>
<body>
<h1>Formulario</h1>
<form name="form_contacto" action="#" method="post" target="nuevaVentana">
<p>Nombre: <input type="text" name="nombre" /></p>
<p>Apellido: <input type="text" name="apellido" /></p>
<p><input type="button" name="procesar" value="enviar" onclick="validar_form();" /><input type="reset" value="borrar" /></p>
</form>
</body>
</html>

Una demo en
http://foros.emprear.com/html/form_blank2.html

Saludos