Problemas con javascript
Hola! Mi nombre es Mª Jose y el problema es que tengo una página principal, la cual contiene 2 iframe. En un iframe se me cargan varios checkbox y en el otro me carga varios radio. Lo que quiero hacer es pasar la variable que tengo chequeada en los iframe a mi página principal y que me muestre el valor sin tener que recargar la página a ser posible ¿Cómo podría hacerlo?. Espero haberme explicado bien.
Muchas gracias
Muchas gracias
Respuesta de stoke
1
Bien, hice un pequeño ejemplo espero que te sirva de algo, si tienes dudas no dudes en preguntar... cya!
Archivo: principal.html
<script>
function GetVals(){
alert("Estado del primer checkbox: " + this.parent.frames(0).document.forms(0).item(0).checked);
alert("Estado del segundo checkbox: " + this.parent.frames(0).document.forms(0).item(1).checked);
alert("Estado del primer radio: " + this.parent.frames(1).document.forms(0).item(0).checked);
alert("Estado del segundo radio: " + this.parent.frames(1).document.forms(0).item(1).checked);
}
</script>
<iframe cols=50 rows=50 name=iframe1 src=frame1.html></iframe>
<iframe cols=50 rows=50 name=iframe2 src=frame2.html></iframe>
<input type=button value=Click onclick=GetVals();>
----------------------------
Archivo: frame1.html
<form>
<input type=checkbox name=check1>
<input type=checkbox name=check2>
</form>
----------------------------
Archivo: frame2.html
<form>
<input type=radio name=opciones>
<input type=radio name=opciones>
</form>
Archivo: principal.html
<script>
function GetVals(){
alert("Estado del primer checkbox: " + this.parent.frames(0).document.forms(0).item(0).checked);
alert("Estado del segundo checkbox: " + this.parent.frames(0).document.forms(0).item(1).checked);
alert("Estado del primer radio: " + this.parent.frames(1).document.forms(0).item(0).checked);
alert("Estado del segundo radio: " + this.parent.frames(1).document.forms(0).item(1).checked);
}
</script>
<iframe cols=50 rows=50 name=iframe1 src=frame1.html></iframe>
<iframe cols=50 rows=50 name=iframe2 src=frame2.html></iframe>
<input type=button value=Click onclick=GetVals();>
----------------------------
Archivo: frame1.html
<form>
<input type=checkbox name=check1>
<input type=checkbox name=check2>
</form>
----------------------------
Archivo: frame2.html
<form>
<input type=radio name=opciones>
<input type=radio name=opciones>
</form>
3 respuestas más de otros expertos
Respuesta de shuntya
1
Aquí te pego el código de los 3 html.
El primero es el que contiene a los otros dos.
Un saludo. :)
Prueba.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function ver_radio(){
var valor="";
if (window.ifr_dos.formulario2.radio1[0].checked) valor=window.ifr_dos.formulario2.radio1[0].value;
else if (window.ifr_dos.formulario2.radio1[1].checked) valor=window.ifr_dos.formulario2.radio1[1].value;
alert(valor);
}
</script>
</head>
<body>
<iframe name="ifr_uno" src="uno.html"></iframe>
<iframe name="ifr_dos" src="dos.html"></iframe>
<a href="javascript:alert(window.ifr_uno.formulario1.check1.checked);">ver primer checkbox iframe 1</a><br>
<a href="javascript:alert(window.ifr_uno.formulario1.check2.checked);">ver segundo checkbox iframe 1</a><br><br>
<a href="javascript:alert(window.ifr_dos.formulario2.radio1[0].checked);">ver primer radio iframe 2</a><br>
<a href="javascript:alert(window.ifr_dos.formulario2.radio1[0].checked);">ver segundo radio iframe 2</a><br><br>
<a href="javascript:ver_radio();">ver valor radio iframe 2</a><br><br>
</body>
</html>
uno.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
iframe 1<br>
<form name="formulario1">
<input type="Checkbox" name="check1"> checkbox 1<br>
<input type="Checkbox" name="check2"> checkbox 2
</form>
</body>
</html>
dos.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
iframe 2<br>
<form name="formulario2">
<input type="radio" name="radio1" value="primero" checked>opcion uno<br>
<input type="radio" name="radio1" value="segundo">opcion dos
</form>
</body>
</html>
El primero es el que contiene a los otros dos.
Un saludo. :)
Prueba.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function ver_radio(){
var valor="";
if (window.ifr_dos.formulario2.radio1[0].checked) valor=window.ifr_dos.formulario2.radio1[0].value;
else if (window.ifr_dos.formulario2.radio1[1].checked) valor=window.ifr_dos.formulario2.radio1[1].value;
alert(valor);
}
</script>
</head>
<body>
<iframe name="ifr_uno" src="uno.html"></iframe>
<iframe name="ifr_dos" src="dos.html"></iframe>
<a href="javascript:alert(window.ifr_uno.formulario1.check1.checked);">ver primer checkbox iframe 1</a><br>
<a href="javascript:alert(window.ifr_uno.formulario1.check2.checked);">ver segundo checkbox iframe 1</a><br><br>
<a href="javascript:alert(window.ifr_dos.formulario2.radio1[0].checked);">ver primer radio iframe 2</a><br>
<a href="javascript:alert(window.ifr_dos.formulario2.radio1[0].checked);">ver segundo radio iframe 2</a><br><br>
<a href="javascript:ver_radio();">ver valor radio iframe 2</a><br><br>
</body>
</html>
uno.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
iframe 1<br>
<form name="formulario1">
<input type="Checkbox" name="check1"> checkbox 1<br>
<input type="Checkbox" name="check2"> checkbox 2
</form>
</body>
</html>
dos.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
iframe 2<br>
<form name="formulario2">
<input type="radio" name="radio1" value="primero" checked>opcion uno<br>
<input type="radio" name="radio1" value="segundo">opcion dos
</form>
</body>
</html>
Respuesta de gandalf26
1
Respuesta de mangelgarcia
1
Si he entendido, tienes dos frames, ¿no? Y quieres pasar valores entre ellos, la forma más o menos seria, te mando ejemplos:
La pagina que contiene los frames seria
<HTML>
<HEAD>
<TITLE>Un documento simple con marcos</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME name="frame_prueba1" src="prueba1.html">
<FRAME name="frame_prueba2" src="prueba2.html">
</FRAMESET>
</HTML>
prueba1 que seria la que envia los datos de un formulario a otro seria:
<html>
<head>
<script>
function enviar() {
parent.frame_prueba2.document.form_prueba2.text_prueba2.value= parent.frame_prueba1.document.form_prueba1.text_prueba1.value;
}
</script>
</head>
<body>
Hola prueba1
<br>
<form name="form_prueba1">
<input type="text" name="text_prueba1" value="">
<input type="button" name="button_prueba1" value="enviar" onclick="enviar();">
</form>
</body>
</html>
Y prueba2 que es la que recibe los datos seria
<html>
<body>
Hola prueba2
<br>
<form name="form_prueba2">
<input type="text" name="text_prueba2" value="">
</form>
</body>
</html>
Espero que sea esto lo que me pides, para cualquier cosa no dudes en decirme.
La pagina que contiene los frames seria
<HTML>
<HEAD>
<TITLE>Un documento simple con marcos</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME name="frame_prueba1" src="prueba1.html">
<FRAME name="frame_prueba2" src="prueba2.html">
</FRAMESET>
</HTML>
prueba1 que seria la que envia los datos de un formulario a otro seria:
<html>
<head>
<script>
function enviar() {
parent.frame_prueba2.document.form_prueba2.text_prueba2.value= parent.frame_prueba1.document.form_prueba1.text_prueba1.value;
}
</script>
</head>
<body>
Hola prueba1
<br>
<form name="form_prueba1">
<input type="text" name="text_prueba1" value="">
<input type="button" name="button_prueba1" value="enviar" onclick="enviar();">
</form>
</body>
</html>
Y prueba2 que es la que recibe los datos seria
<html>
<body>
Hola prueba2
<br>
<form name="form_prueba2">
<input type="text" name="text_prueba2" value="">
</form>
</body>
</html>
Espero que sea esto lo que me pides, para cualquier cosa no dudes en decirme.