Captura de Datos desde Ventana Flotante

Murallitz · #1 (**permalink**) 15/05/2009, 11:31

Hola buenas Tardes.
Mi problema es este, tengo una pagina en php. Alli hay un formulario, en donde se hace click a un boton y mediante Javascript abre una ventana flotante.
Esta ventana debe tener un formulario en el cual uno escoge una opcion tipo radio button y luego al poner aceptar, la ventana se cierre y la pagina principal capture el dato escogido en la ventana.

Espero me puedan ayudar.
Gracias

buzu · #2 (**permalink**) 15/05/2009, 13:35

puede usar una función la cual se llama al cerrar la ventana flotante. Tu función puede tenr algo paresido a:

Código javascript:

Ver originalfunction enviarDato(){
     dato = document.getElementById('iddeTuRadiobutton');
     window['dato'] = dato.value;
}

Luego simplemente puedes acceder a ese dato desde window['dato']

Saludos.

Murallitz · #3 (**permalink**) 15/05/2009, 14:15

Hola, mira mi ventana se abre con este codigo
<script type="text/javaScript">
var fondo = false;
var mensaje = false;
function creaVentana(){
fondo = document.createElement('div');
mensaje = document.createElement('div');
fondo.setAttribute('id','fondo');
mensaje.setAttribute('id','msg');
document.getElementsByTagName('body')[0].appendChild(fondo);
document.getElementsByTagName('body')[0].appendChild(mensaje);
mensaje.innerHTML="<div class='superior'><span class='cerrar' title='Cerrar' onclick='cerrar();'>X</span></div><p></p>";
}
function cerrar(){
document.getElementsByTagName('body')[0].removeChild(fondo);
document.getElementsByTagName('body')[0].removeChild(mensaje);
fondo=false;
mensaje=false;
}
</script>

Mi problema es que no se cmo hacer que dentro de esa ventana hayan opciopnes de rdio button y que el escoger uno haga click en le boton y lo escogido pase a la pagina padre.
Gracias!!

buzu · #4 (**permalink**) 15/05/2009, 14:34

No entiendo, no sabes ni como poner los radio button? o simplemente no sabes como pasar el valor de esos radio button a la ventana principal? Si es el segundo caso, solo llama a la función que te pasé hace un rato cuando haces la llamada a cerar(). Si es el primer caso, pues te recomiendo que primero leas un manualito de HTML, no te hará daño.

Saludos

Murallitz · #5 (**permalink**) 15/05/2009, 14:47

Hola,
he tratado de poner los radio button pero no aparecen y sale error.
Los puse entre los <p></p> con la etiqueta de form.
Pero no funciona.

Es decir se me abre la ventana....puedo poner texto...pero no puedo hacer nada mas a parte del texto.
Saludos

stock · #6 (**permalink**) 15/05/2009, 14:54

<input type="radio" value="xyz" name="radio1" id="radio1" /><label for="radio1">Opción 1</label>

buzu · #7 (**permalink**) 15/05/2009, 14:55

Como los estás poniendo? Mira lo que yo tengo y funciona perfecto:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>\</title>
    <script type="text/javascript">
var fondo = false;
var mensaje = false;
function creaVentana(){
fondo = document.createElement('div');
mensaje = document.createElement('div');
fondo.setAttribute('id','fondo');
mensaje.setAttribute('id','msg');
document.getElementsByTagName('body')[0].appendChild(fondo);
document.getElementsByTagName('body')[0].appendChild(mensaje);
mensaje.innerHTML="<form action='' method='get'><input type='radio' name='radio' value='radio' \/>Radio<\/form><div class='superior'><span class='cerrar' title='Cerrar' onclick='cerrar();'>X<\/span><\/div><p><\/p>";
}
function cerrar(){
document.getElementsByTagName('body')[0].removeChild(fondo);
document.getElementsByTagName('body')[0].removeChild(mensaje);
fondo=false;
mensaje=false;
}
window.onload = creaVentana;
    </script>
</head>
<body>
    
</body>
</html>

Murallitz · #8 (**permalink**) 15/05/2009, 16:52

Mira lo que pongo y no funciona

<script type="text/javascript">
var fondo = false;
var mensaje = false;
function creaVentana()
{
fondo = document.createElement('div');
mensaje = document.createElement('div');
fondo.setAttribute('id','fondo');
mensaje.setAttribute('id','msg');
document.getElementsByTagName('body')[0].appendChild(fondo);
document.getElementsByTagName('body')[0].appendChild(mensaje);
mensaje.innerHTML="<form name="form1" method="post" action="">
<table width="200">
<tr>
<td><label>
<input type="radio" name="KFC Opciones" value="KFC1">
KFC1</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="KFC Opciones" value="KFC2">
KFC2</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="KFC Opciones" value="KFC3">
KFC3</label></td>
</tr>
</table>
</form>

<div class='superior'>
<span class='cerrar' title='Cerrar' onclick='cerrar();'>X<\/span><\/div><p> <\/p>";

}

function cerrar()
{
document.getElementsByTagName('body')[0].removeChild(fondo);
document.getElementsByTagName('body')[0].removeChild(mensaje);
fondo=false;
mensaje=false;
}
window.onload = creaVentana;
</script>

buzu · #9 (**permalink**) 15/05/2009, 17:07

"escapa" las diagonales "/" usando una diagonal invertida "\" de modo que te quede así: "\/"

Saludos

Murallitz · #10 (**permalink**) 15/05/2009, 17:15

Te refieres asi?
Soryy...pero esto es nuevo para mi :S

<script type="text/javascript">
var fondo = false;
var mensaje = false;
function creaVentana()
{
fondo = document.createElement('div');
mensaje = document.createElement('div');
fondo.setAttribute('id','fondo');
mensaje.setAttribute('id','msg');
document.getElementsByTagName('body')[0].appendChild(fondo);
document.getElementsByTagName('body')[0].appendChild(mensaje);
mensaje.innerHTML="<form name="form1" method="post" action="">
<table width="200">
<tr>
<td><label>
<input type="radio" name="KFC Opciones" value="KFC1">
KFC1<\ /label><\ /td>
<\ /tr>
<tr>
<td><label>
<input type="radio" name="KFC Opciones" value="KFC2">
KFC2<\/label><\ /td>
<\ /tr>
<tr>
<td><label>
<input type="radio" name="KFC Opciones" value="KFC3">
KFC3<\ / label><\ /td>
<\ /tr>
<\ /table>
<\ /form>

<div class='superior'>
<span class='cerrar' title='Cerrar' onclick='cerrar();'>X<\/span><\/div><p> <\/p>";

}

function cerrar()
{
document.getElementsByTagName('body')[0].removeChild(fondo);
document.getElementsByTagName('body')[0].removeChild(mensaje);
fondo=false;
mensaje=false;
}
window.onload = creaVentana;
</script>

buzu · #11 (**permalink**) 15/05/2009, 19:13

si, además, usa comillas simples dentro de las comillas dobles. Si te fijas después de mensaje.innerHTML = hay unas comillas dobles (") es marca el inicio de un string. El final se marca con otras comillas diobles, que en tu caso se encuentran en

<form name="f

Por lo que en realidad le estás pasando al innerHTML es <form name=
Cambia las comillas dobes por simples (') de modo que no interrumpas la cadena, y al final, donde termina todo lo que le quieres meter al div, vuelve a poner comillas dobles para que el programa sepa que ahi termina la cadena.

Murallitz · #12 (**permalink**) 18/05/2009, 10:35

Hola, ya hice lo que dijiste, pero el insertar el codigo de los radio buttons falla.
te doy el codigo que uso.

Código HTML:

 <script type="text/javascript">
var fondo = false;
var mensaje = false;
function creaVentana(){
fondo = document.createElement('div');
mensaje = document.createElement('div');
fondo.setAttribute('id','fondo');
mensaje.setAttribute('id','msg');
document.getElementsByTagName('body')[0].appendChild(fondo);
document.getElementsByTagName('body')[0].appendChild(mensaje);
mensaje.innerHTML="<div class='superior'><span class='cerrar' title='Cerrar' onclick='cerrar();'>X<\/span><\/div><table width='200'>
    <tr>
      <td><label>
        <input type='radio' name='KFC Opciones' value='KFC1'>
        KFC1<\/label><\/td>
    <\/tr>
    <tr>
      <td><label>
        <input type='radio' name='KFC Opciones' value='KFC2'>
        KFC2<\/label><\/td>
    <\/tr>
    <tr>
      <td><label>
        <input type='radio' name='KFC Opciones' value='KFC3'>
        KFC3<\/ label><\/td>
    <\/tr>
  <\/table><p><\/p>";
}
function cerrar(){
document.getElementsByTagName('body')[0].removeChild(fondo);
document.getElementsByTagName('body')[0].removeChild(mensaje);
fondo=false;
mensaje=false;
}
window.onload = creaVentana;
    </script>

buzu · #13 (**permalink**) 18/05/2009, 13:53

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
     <script type="text/javascript">
var fondo = false;
var mensaje = false;
function creaVentana(){
fondo = document.createElement('div');
mensaje = document.createElement('div');
fondo.setAttribute('id','fondo');
mensaje.setAttribute('id','msg');
document.getElementsByTagName('body')[0].appendChild(fondo);
document.getElementsByTagName('body')[0].appendChild(mensaje);
mensaje.innerHTML="<div class='superior'><span class='cerrar' title='Cerrar' onclick='cerrar();'>X<\/span><\/div><table width='200'><tr><td><label><input type='radio' name='KFC Opciones' value='KFC1'>KFC1<\/label><\/td><\/tr><tr><td><label><input type='radio' name='KFC Opciones' value='KFC2'>KFC2<\/label><\/td><\/tr><tr><td><label><input type='radio' name='KFC Opciones' value='KFC3'>KFC3<\/ label><\/td><\/tr><\/table><p><\/p>";
}
function cerrar(){
document.getElementsByTagName('body')[0].removeChild(fondo);
document.getElementsByTagName('body')[0].removeChild(mensaje);
fondo=false;
mensaje=false;
}
window.onload = creaVentana;
    </script>
</head>
<body>
 
</body>
</html>

El problema es que estabas poniendo enters entre la cadena. No puedes hacer eso. Las cadenas deben ir en la misma linea.

Saludos.

Murallitz · #14 (**permalink**) 18/05/2009, 14:06

Hola, cuando pongo todo en una linea, ya no hay error, pero ahora la ventana que salia antes no sale, mas bien le doy click al boton y se agrega a la pagina en la parte inferior los radio buttons

Por que pasa esto?!!!

De verdad muchas gracias por tu ayuda!!!!! Te lo agradezco un montototototototnononon

buzu · #15 (**permalink**) 18/05/2009, 14:21

Es por que lo estás agregando al body. Para poder decirte como hacer necesitaría ver más de tu código, pero no se por que me da la impresión de que me vas a tirar un montón de lineas, muchas de ellas copiadas y pegadas de algún lado.

cambia estas dos lineas:
document.getElementsByTagName('body')[0].appendChild(fondo);
document.getElementsByTagName('body')[0].appendChild(mensaje);

por:

fondo.appendChild('mensaje');
document.getElementsByTagName('body')[0].appendChild(fondo);

Y fíjate si soluciona el problema.

Saludos!

Murallitz · #16 (**permalink**) 18/05/2009, 14:34

Hola, el script lo tengo en el head y al cambier las lineas de codigo que me indicas igual no funciona,

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Portal</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="en-us" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	<script language="javascript" ></script>
	<script type="text/javascript">
	var fondo = false;
	var mensaje = false;
	function creaVentana(){
	fondo = document.createElement('div');
	mensaje = document.createElement('div');
	fondo.setAttribute('id','fondo');
	mensaje.setAttribute('id','msg');
	fondo.appendChild('mensaje');
	document.getElementsByTagName('body')[0].appendChild(fondo);
	mensaje.innerHTML="<div class='superior'><span class='cerrar' title='Cerrar' onclick='cerrar();'>X<\/span><\/div><p><\/p>";
	}
	function cerrar(){
	fondo.appendChild('mensaje');
	document.getElementsByTagName('body')[0].appendChild(fondo);
	fondo=false;
	mensaje=false;
	}
	window.onload = creaVentana;
    </script>
	<style type="text/css" media="all">@import "images/style.css";</style>
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" /><style type="text/css">
<!--
body {
	background-image: url(images/bg.gif);
}
-->
</style>

</head>

<body>
<div class="content">

	<div class="rside">
		<div class="topmenu"></div>
		<div class="loginbox">
			<div class="padding">
				<form action="#">
				Usuario <br />
				<input type="text" value="" class="text" /><br />
				Clave <br />
				<input type="password" value="" class="text" /><br /><br />
				<input type="submit" value="Ingresar" class="searchbutton" />
				<br />
				</form>
			</div>
		</div>
		<div class="topmain">Men&uacute; Principal </div>
		<div class="menu">
			<h2>&nbsp;</h2>
			<div class="nav">
				<ul>
					<li><a href="#">Inicio</a></li>
					<li><a href="#"></a><a href="#">Nosotros</a></li>
					<li><a href="#"></a><a href="#">Videos</a></li>
					<li><a href="#">Ingreso Horas Extra</a></li>
					<li><a href="#">Ingreso de Ordenes</a></li>
					<li><a href="#">Noticias</a></li>
					<li><a href="#">Contactenos</a></li>
				</ul>
		  </div>
			
			<h2><br />
			</h2>
	  </div>
	
	</div>
	
	<div class="lside">
		<div class="topmenu"></div>
		<div class="header">
		  <div class="padding">
				<div class="citation"></div>
				<h1>INGRESO </h1>
		  </div>
		</div>
		<div class="main">
			<h2><a href="#">Bienvenidos al Portal</a></h2>
            <table width="542" border="1">
              <tr>
                <td width="180">Personal</td>
                <td width="346">&nbsp;</td>
              </tr>
              <tr>
                <td>Fecha</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>Tienda</td>
                <td><form id="form1" name="form1" method="post" action="">
                  <label>
                  <input type="submit" name="Submit" value="KFC" onclick="creaVentana()" />
                  </label>
                </form>
                </td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p align="center">&nbsp;</p>
            <p align="center"><img src="images/deosi.JPG" alt="" width="415" height="48" /> </p>
            <p class="date">&nbsp;</p>
			<br />
		</div>
		<div class="infobox">
		  <div class="l_sd"><br />
			</div>
	  </div>
	</div>
	
	<div class="footer"></div>



</div> 
</body>
</html>

Murallitz · #17 (**permalink**) 18/05/2009, 14:41

Hola, hice el codigo desde los mas simple...pagina con un solo boton que llame a los radio button y funciona.
Pero al pegar ese codigo ami pagina que tiene ya CSS parece que se raya, por que alli si no quiere abrirlo.

buzu · #18 (**permalink**) 18/05/2009, 14:44

El código que me pones no dice nada, es básicamente lo mismo que tienes al principio. Lo que necesito saber es concretamenete que es lo que quieres lograr y hasta ahora como estás haciendo para lograrlo. Cuales son las ventanas de la que me hablas? Como las creas? etc.

Murallitz · #19 (**permalink**) 18/05/2009, 14:55

Ok , lo que quieor hacer es esto.
Quiero un formulario para llenar, en el cual se presiones un boton y este abra una ventana.
En esta ventana es esoge una opcion por medio deun radio buton, y luego al cerra la ventana, el valor de la opcion pase a la ventana principal, donde esta el formulario.

Ya en una pagina super simple hice el codigo javascript que respondia al evento onclick de un solo boton y fuciona.
Pero al hacer el mismo codigo en la pagina que adjunte arriba, (pagina con CSS) no sale error pero la pagina como que se carga otra vez, sin que se visualize la ventana.

Saludos