No me funciona pasar valores entre ventanas

jcouoh · #1 (**permalink**) 22/09/2008, 07:31

HOla nuevamente,

Tengo dos paginas una padre y una popup, como es natural quiero pasar los valores del popup a la ventana principal y quise hacer a traves del javascript pero no me dio resultado, regreso aqui pues he visto lo persistentes que son y su conocimiento en esta area del javascript la cual todavia me da mucho trabajo.

voy a ponerles los codigos de ambas ventanas con la esperanza de que aqui puedan encontrar el error que tengo:

Ventana principal:

Código HTML:

<html><head></head><body>


<form name="frm" id="frm">

<input type=text id="GtoFecha"><br>
<input type=text id="GtoLocalidad"><br>
<input type=text id="GtoFacturaNo"><br>
<input type=text id="GtoCantidad"><br>
<input type=text id="GtoConcepto"><br>
<input type=text id="GtoPrecioUnit"><br>
<input type=text id="GtoImporte"><br>
<input type=text id="GtoPrecioTotal"><br>
<input type=text id="GtoResponsable"><br>
<input type=text id="GtoAuthor"><br>

</form>



<a href="#" title="" onClick="window.open('003.html')" 

width="400" height="200">Gastos</a>



</body></html>

ventana popup: Nota no quiero usar el boton enviar por el asunto que lo que necesito es pasar los valores a la ventana principal. solo esta puesto por referencia o prueba. Además en la ventana popup se craan dinamicamente nuevas columans de campos los cuales estan bien. yo despues agrego los campos faltantes en la ventana principal.

Código HTML:

<html>
<head>
<title></title>
<style type="text/css">

.input1
{

width:80;

}

.input2
{
BORDER-RIGHT: #336699 1px solid;
BORDER-TOP: #336699 1px solid;
FONT-SIZE: 12px;
BORDER-LEFT: #336699 1px solid;
WIDTH: 120;
COLOR: #000000;
BORDER-BOTTOM: #336699 1px solid;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #ffffff
}


.input3
{
BORDER-RIGHT: #336699 1px solid;
BORDER-TOP: #336699 1px solid;
FONT-SIZE: 12px;
BORDER-LEFT: #336699 1px solid;
display:block;
width:100%;
COLOR: #000000;
BORDER-BOTTOM: #336699 1px solid;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #679BD0
}
.input4
{
BORDER-RIGHT: #336699 1px solid;
BORDER-TOP: #336699 1px solid;
FONT-SIZE: 12px;
BORDER-LEFT: #336699 1px solid;
display:block;
width:100%;
COLOR: #000000;
BORDER-BOTTOM: #336699 1px solid;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #679BD0
}
.input5
{
BORDER-RIGHT: #336699 1px solid;
BORDER-TOP: #336699 1px solid;
FONT-SIZE: 12px;
BORDER-LEFT: #336699 1px solid;
display:block;
width:40;
COLOR: #000000;
BORDER-BOTTOM: #336699 1px solid;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #679BD0
}

.td
{

FONT-SIZE: 12px;
font-family:verdana;
height:22;

}
#iframe
    {
    overflow:auto;
    width:300px;
    height:100px;
    }
</style>
</head>
<body>


<table width=2000> <tr><td width=110 height=50>

<table>
<tr><td class="td" align=right>Fecha:</td></tr>
<tr><td class="td" align=right>Localidad:</td></tr>
<tr><td class="td" align=right>Factura No.:</td></tr>
<tr><td class="td" align=right>Cantidad:</td></tr>
<tr><td class="td" align=right>Concepto:</td></tr>
<tr><td class="td" align=right>Precio Unitario:</td></tr>
<tr><td class="td" align=right>Importe:</td></tr>
<tr><td class="td" align=right>Precio Total:</td></tr>
<tr><td class="td" align=right>Responsable:</td></tr>
<tr><td class="td" align=right>Atorizó:</td></tr>


</table></td><td>
<form id="myform" name="myform" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">

<div id="bloque" style="float:left; width:80px; ">
<table width="80"><tr><td>

<input type=text class=input1
name="GtoFecha[]"
value="">

<input type=text class=input1
name="GtoLocalidad[]"
value="">


<input type=text class=input1
name="GtoFacturaNo[]"
value="">

<input type=text class=input1
name="GtoCantidad[]"
value="">

<input type=text class=input1
name="GtoConcepto[]"
value="">

<input type=text class=input1
name="GtoPrecioUnit[]"
value="">

<input type=text class=input1
name="GtoImporte[]"
value="">

<input type=text class=input1
name="GtoPrecioTotal[]"
value="">

<input type=text class=input1
name="GtoResponsable[]"
value="">

<input type=text class=input1
name="GtoAuthor[]"
value="">

</td></tr>

</table>
</div>


</form>

</td></tr></table>
<form><div style="clear:both; padding-top:15px"><button type="button" onClick="doIt()">Gasto Nuevo</button>
    <br>
    <br>
<input name="e" type="button" id="e" value="Enviar" onclick="document.getElementById('myform').submit()">
</div></form>
<script>
function doIt()
{
var f = document.getElementById('myform');

var b = document.getElementById('bloque');
var b2=b.cloneNode(true)
f.appendChild(b2);
}

</script>

<?php
if(isset($_POST) && !empty($_POST)){
echo '<pre>';
print_r($_POST);
echo '<pre>';
}
?>


<a href="JavaScript:close();" title="pasar valor" onClick="
window.opener.document.frm.GtoFecha.value = window.document.myform.GtoFecha[0].value;
window.opener.document.frm.GtoLocalidad.value = window.document.myform.GtoLocalidad.value;
window.opener.document.frm.GtoFacturaNo.value = window.document.myform.GtoFacturaNo.value;
window.opener.document.frm.GtoCantidad.value = window.document.myform.GtoCantidad.value;
window.opener.document.frm.GtoConcepto.value = window.document.myform.GtoConcepto.value;
window.opener.document.frm.GtoPrecioUnit.value = window.document.myform.GtoPrecioUnit.value;
window.opener.document.frm.GtoImporte.value = window.document.myform.GtoImporte.value;
window.opener.document.frm.GtoPrecioTotal.value = window.document.myform.GtoPrecioTotal.value;
window.opener.document.frm.GtoREsponsable.value = window.document.myform.GtoREsponsable.value;
window.opener.document.frm.GtoAuthor.value = window.document.myform.GtoAuthor.value;
">Regresar a la Ventana Principal</a>

</body>
</html>

EPROM · #2 (**permalink**) 22/09/2008, 10:50

La verdad no entendí mucho lo que estas tratando de hacer, pero para pasar datos del pop-up al padre es algo así:

Ventana principal:

Código:

<html>
<head></head>
<body>
<form name="frm" id="frm">
<input type=text id="GtoFecha" name="GtoFecha"><br>
</form>
<a href="#" title="" onClick="window.open('003.html')" width="400" height="200">Gastos</a>
</body>
</html>

003.html:

Código:

<html>
<head>
<title></title>
</head>
<body>


<form id="myform" name="myform" action="" method="post">
<div id="bloque" style="float:left; width:80px; ">
<input type=text class=input1 name="GtoFecha" value="">
</div>
</form>

<a href="javascript:volver();" title="pasar valor">Regresar a la Ventana Principal</a>

</body>

<script>
function volver() {
opener.document.frm.GtoFecha.value = document.myform.GtoFecha.value;
window.close();
}
</script>

</html>

Espero te sirva!

David · #3 (**permalink**) 22/09/2008, 10:53

¿Para qué colocas los corchetes en el atributo name?. Si es para que sea un array hay que tener en cuenta que elementos con el mismo name ya son un array en sí, y no puedes hacer referencia a ellos directamente (como estás tratando de hacer en el código), debes especificar los índices.

jcouoh · #4 (**permalink**) 23/09/2008, 04:32

Gracias por tus comentarios, voy a checar creo que ahi estan los problemas

jcouoh · #5 (**permalink**) 23/09/2008, 13:17

Lo que hace el codigo es lo siguiente: (Archivo 003.html):

Teniendo los campos

Código HTML:

<input type=text class=input1
name="GtoFecha[]"
value="">

<input type=text class=input1
name="GtoLocalidad[]"
value="">


<input type=text class=input1
name="GtoFacturaNo[]"
value="">

<input type=text class=input1
name="GtoCantidad[]"
value="">

<input type=text class=input1
name="GtoConcepto[]"
value="">

<input type=text class=input1
name="GtoPrecioUnit[]"
value="">

<input type=text class=input1
name="GtoImporte[]"
value="">

<input type=text class=input1
name="GtoPrecioTotal[]"
value="">

<input type=text class=input1
name="GtoResponsable[]"
value="">

<input type=text class=input1
name="GtoAuthor[]"
value="">

al hacer clic en el boton "Gasto Nuevo" el cual se encuentra mas abajo me crea un nuevo grupo de inputs a la derecha de los existentes.

Los valores que yo ponga en los inputs los quiero pasar a la ventana principal, quizá mi problema es que cuando los quiero enviar no se con que nombre pasarlos.

Cualquier comentario se los agradeceré

David · #6 (**permalink**) 23/09/2008, 13:23

Quita los corchetes en el name, luego hay que tener en cuenta que al clonar el nodo se convertirá en un array de objetos, por lo que para pasar los valores deberíamos recorrer el array con un bucle for para pasarlos a la ventana principal.

jcouoh · #7 (**permalink**) 23/09/2008, 13:26

Gracias

Ahora lo intento

jcouoh · #8 (**permalink**) 23/09/2008, 14:38

Ya le quité los corchetes, pregunto:

Intenté lo siguiente pero estoy casi seguro que no es correcta la sintaxis:

Código HTML:

<script>
for (indice = 0, indice<3, indice++)

{

<a href="javascript:close();" title="pasar valor" onClick="
window.opener.document.frm.GtoFecha[indice].value = 

window.document.myform.GtoFecha[indice].value;

">Regresar a la Ventana Principal</a>
}

Me podrían dar mas orientacion??

David · #9 (**permalink**) 23/09/2008, 14:42

El bucle for lo deberías poner dentro del onclick, y el total de elementos obtenerlo usando document.myform.GtoFecha.length.

jcouoh · #10 (**permalink**) 24/09/2008, 20:31

Gracias David, sigo con ello

Jorge

jcouoh · #11 (**permalink**) 25/09/2008, 20:51

Esto es lo que hice, pero no me da resultado:

Código HTML:

<a href="JavaScript:close();" title="pasar valor" onClick="regreso()">Regresar a la Ventana Principal</a>


<script>

function regreso()

{
var indice;
var ind;
indice=document.myform.GtoFecha.length;


for (ind = 0, ind<indice, ind++)

{
window.opener.document.frm.GtoFecha[0].value = 

window.document.myform.GtoFecha[ind].value;


}



}
</script>

Cualquier ayuda se los agradecré

jcouoh · #12 (**permalink**) 26/09/2008, 07:59

Creo que mi problema es este:

1.- No se como nombrar los inputs de la pagina padre (principal), ya que aun no se cuantos nodes se implementaran en la ventana hijo.

2.- No se hacer tomar los valores en el bucle para pasarlos.

Ayudas las agradeceré

David · #13 (**permalink**) 26/09/2008, 08:11

El bucle está más o menos bien, el problema es que en la ventana principal también tienes que crear dinámicamente los campos de las demás columnas.

jcouoh · #14 (**permalink**) 26/09/2008, 08:54

y para crear dinamicamente los campos en el formulario padre, como le haría si el numero de inpus se define en formulario hijo??

David · #15 (**permalink**) 26/09/2008, 08:56

En el formulario hijo estás creando los campos clonando el nodo, pues al momento de clonarlo, haz lo mismo también en el padre.

jcouoh · #16 (**permalink**) 26/09/2008, 08:59

Graacias no lo habia pensado, voy a intentarlo

jcouoh · #17 (**permalink**) 26/09/2008, 09:24

Intenté lo siguiente:

La funcion doit (funcion que clona los campos) la modifique de la siguiente manera:

Código HTML:

<script>
function doIt()
{
var f = document.getElementById('myform');
var b = document.getElementById('bloque');
var b2=b.cloneNode(true)
f.appendChild(b2);

var g = opener.document.getElementById('frm');
var h = opener.document.getElementById('bloque');

var g2=g.cloneNode(true)

h.appendChild(g2);




}

</script>

con las variables g y h traté de clonar los campos del formulario padre, pero no dio resultado

David · #18 (**permalink**) 26/09/2008, 09:34

¿Cómo tienes el HTML de la ventana padre? Ya que debes tener un div "bloque" en ella.

jcouoh · #19 (**permalink**) 26/09/2008, 09:48

He puesto el div bloque y funciona bien puesto que se han duplicado los inputs en el formulario padre

Ahora faltaria que pasen los datos de formulario hijo a formulario padre,

David · #20 (**permalink**) 26/09/2008, 09:52

Ahora lo único que necesitas hacer es el bucle for que recorra todos los campos

, el que habías hecho estaba bien, solo hay que hacer referencia al índice también en la ventana padre y otra cosa, también comprobar cuando no sea un array sino sea un solo elemento.

jcouoh · #21 (**permalink**) 26/09/2008, 11:08

He puesto asi mis dos vetanas:

Ventana Padre:

Código HTML:

<html><head></head><body>


<form name="frm" id="frm">
<div id="bloque" style="float:left; width:80px; ">
<table width="80"><tr><td>

<input type=text 
name="GtoFecha" id="GtoFecha"
value="">



</td></tr>

</table>
</div>
</form>



<a href="#" title="" onClick="window.open('003.html')" width="400" height="200">Gastos</a>



</body></html>

Ventana Hijo:

Código HTML:

<html>
<head>
<title></title>

</head>
<body>


<table width=2000> <tr><td width=110 height=50>

<table>
<tr><td class="td" align=right>Fecha:</td></tr>


</table></td><td>
<form id="myform" name="myform" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">

<div id="bloque" style="float:left; width:80px; ">
<table width="80"><tr><td>

<input type=text class=input1
name="GtoFecha" id="GtoFecha"
value="">



</td></tr>

</table>
</div>


</form>

</td></tr></table>
<form><div style="clear:both; padding-top:15px"><button type="button" onClick="doIt()">Gasto Nuevo</button>
    <br>
    <br>
<input name="e" type="button" id="e" value="Enviar" onclick="document.getElementById('myform').submit()">
</div></form>
<script>
function doIt()
{
var f = document.getElementById('myform');
var b = document.getElementById('bloque');
var b2=b.cloneNode(true)
f.appendChild(b2);

var g = opener.document.getElementById('frm');
var h = opener.document.getElementById('bloque');

var g2=g.cloneNode(true)

h.appendChild(g2);




}

</script>

<?php

/*
if(isset($_POST) && !empty($_POST)){
echo '<pre>';
print_r($_POST);
echo '<pre>';
}

*/
?>


<a href="JavaScript:close();" title="pasar valor" onClick="regreso()">Regresar a la Ventana Principal</a>


<script>



function regreso()

{
var indice;
var ind;
indice=document.myform.GtoFecha.length;


for (ind = 0, ind<indice, ind++)

{
window.opener.document.frm.GtoFecha[ind].value = 

window.document.myform.GtoFecha[ind].value;


}



}



</script>

</body>
</html>

Cuando me clona la primera vez lo hace bien, pero al clonar la segunda ocasion me duplica dos inputs y despues cuatro y asi sucesivamente.

Valroes no pasan de un formulario a otro

estoy trabajando con el bucle todavía.

David · #22 (**permalink**) 26/09/2008, 11:28

Algunas cosas están mal, por ejemplo, en la ventana padre estás clonando del formulario al div, cuando debería ser al revés.

Y otra cosa, que en tu bucle for, las variable, la condición y el incremento deben ir separados por ; y no por ,

jcouoh · #23 (**permalink**) 26/09/2008, 11:54

Correcto, segui tus indicaciones y funciona adecuadamente el asunto de clonar dinamicamente, aunque todavía no envia los datos al formulario padre.

ahora, pregunto, ¿si el formulario padre contiene otros inputs, y no necesito clonarlos? como le haría????

Esto es lo que hice:

Formulario padre:

Código HTML:

<html><head></head><body>

<div id="bloque" style="float:left; width:80px; ">
<form name="frm" id="frm">

<table width="80"><tr><td>

<input type=text 
name="GtoFecha" id="GtoFecha"
value="">

</td></tr>

</table>

</form>

</div>

<a href="#" title="" onClick="window.open('003.html')" 

width="400" height="200">Gastos</a>



</body></html>

formulario hijo:

Código HTML:

<html>
<head>
<title></title>

</head>
<body>


<table width=2000> <tr><td width=110 height=50>

<table>
<tr><td class="td" align=right>Fecha:</td></tr>


</table></td><td>
<form id="myform" name="myform" action="<?php echo 

$_SERVER['PHP_SELF'] ?>" method="post">

<div id="bloque" style="float:left; width:80px; ">
<table width="80"><tr><td>

<input type=text class=input1
name="GtoFecha" id="GtoFecha"
value="">



</td></tr>

</table>
</div>


</form>

</td></tr></table>
<form><div style="clear:both; padding-top:15px"><button 

type="button" onClick="doIt()">Gasto Nuevo</button>
    <br>
    <br>
<input name="e" type="button" id="e" value="Enviar" 

onclick="document.getElementById('myform').submit()">
</div></form>
<script>
function doIt()
{
var f = document.getElementById('myform');
var b = document.getElementById('bloque');
var b2=b.cloneNode(true);
f.appendChild(b2);

var g = opener.document.getElementById('frm');
var h = opener.document.getElementById('bloque');

var g2=g.cloneNode(true);

h.appendChild(g2);




}

</script>

<?php

/*
if(isset($_POST) && !empty($_POST)){
echo '<pre>';
print_r($_POST);
echo '<pre>';
}

*/
?>


<a href="JavaScript:close();" title="pasar valor" 

onClick="regreso()">Regresar a la Ventana Principal</a>


<script>



function regreso()

{
var indice;
var ind;
indice=document.myform.GtoFecha.length;


for (ind = 0; ind<indice; ind++)

{
window.opener.document.frm.GtoFecha[ind].value = 

window.document.myform.GtoFecha[ind].value;


}



}



</script>

</body>
</html>

David · #24 (**permalink**) 26/09/2008, 12:01

No, no me refería a que invirtieras el form y el div en el código HTML, me refería a que lo hicieras en el código Javascript. Prueba y verás que te va a funcionar.

jcouoh · #25 (**permalink**) 26/09/2008, 12:13

Si lo hice, y ya me pasan los datos de una ventana padre a hijo pero vuelvo al mismo problema: De hecho regrese el div a su lugar anterior pues solo quiero clonar el input.

En la ventana hijo clona bien uno a uno los inputs, pero en la ventana padre me clona la primera vez uno, despues en lugar de clonar uno mas me clona dos inputs y luego clona 4 inputs y asi sucesivamente.

Esto lo hice pues debo poner otros inputs los cuales no quiero que se clonen.

David · #26 (**permalink**) 26/09/2008, 12:16

Pues como te dije, en el código Javascript debes invertir la forma como estás clonando, en vez de clonar del form al div, debe ser del div al form. Los que no quieres clonar coloca fuera del div.

jcouoh · #27 (**permalink**) 26/09/2008, 15:12

Ya está, solo una consulta mas, ya tengo los datos en la ventana principal (padre) el input lo llamo GtoFecha, con que nombre se generan los inputs si el original se llama GtoFecha los clonados serían del tipo GtoFecha[0]??

David · #28 (**permalink**) 26/09/2008, 15:14

El original se convertirá en GtoFecha[0], el que se ha clonado GtoFecha[1] y el resto con los índices sucesivos.

jcouoh · #29 (**permalink**) 26/09/2008, 15:30

Muchas Gracias

Espero poder mandarlos a mysql a traves de php

Muchas gracias nuevamente!!!!!!!!!!!!

jcouoh · #30 (**permalink**) 01/10/2008, 10:25

Una pregunta mas,

Si los inputs clonados se llaman GtoFecha[1], y asi sucesivamente, ¿como lo puedo llamar cuando lo envio en un formulario post, suponía que lo puedo llamar como $_POST[GtoFecha][1], pero parece que no es el array correcto, ya que me da solo la segunda letra del arrar, evidenttemente estoy mal,

como le puedo hacer??