como capturo la variable en un iframe

estibaliz2006 · #1 (**permalink**) 30/03/2010, 01:12

hola. tengo un formulario. en este formulario hay un campo que es 'descripcion' al que lo he puesto como iframe para poder dar formato a lo que escriba en él. el problema es que no me captura esa variable para insertarla en la base de datos. esto es lo que tengo:

Código PHP:

  echo "<form action=\"".$_SERVER['PHP_SELF']."\" method=\"POST\" name=\"f1\">";

    echo "Título<br><input type=\"text\" name=\"tituloded\" class=\"caja\" size=\"20\"><br><br>";

    echo "Descripción<br>";

    echo "<iframe id=\"descripcioned\" width=\"70%\" height=\"200px\" class=\"caja\" name=\"descripcionid\"></iframe><br>";

    echo "<br><input type=\"submit\" name=\"submit\" class=\"caja\" value=\"Enviar\">"; 

</FORM>";

cómo lo hago?

abimaelrc · #2 (**permalink**) 30/03/2010, 01:17

Los únicos campos que se envian a través del form son textarea e input. Los iframe no son material de los formulario, por lo tanto no se envian. Tendrás que almacenar la información que tengas almacenada en los iframe en algún campo sea textarea o input text o input hidden.

estibaliz2006 · #3 (**permalink**) 30/03/2010, 01:33

he de reconocer que en este tema (bueno, en este y en muchos) estoy pegadísima....como hago eso?

abimaelrc · #4 (**permalink**) 30/03/2010, 02:09

Lo que no entiendo, es ¿por qué estás llamando el iframe dentro del formulario? ¿Qué información tiene el iframe?

estibaliz2006 · #5 (**permalink**) 30/03/2010, 03:17

pues porque necesitaba poner un editor wysiwyg para dar formato al texto que iba a meter en el textarea y el que he encontrado-diseñado en lugar de textarea utiliza iframe

zaqpz · #6 (**permalink**) 30/03/2010, 03:27

¿Cómo te llevas con JavaScript?

Si quieres obtener la información del iframe al momento del submit vas a tener que complementarte con JS. Una solución posible sería que en el evento onsubmit obtengas el HTML que se ingresó en tu iframe editable con htmlGenerado=tuIframe.document.body.innerHTML; (cross browser).

Luego podrías tener un input hidden y colocar en su value esta variable que obtuviste: tuInputHidden.value=htmlGenerado;

Así ya podrías recibir vía POST los que se ingresó en el iframe a través de tu input hidden.

Saludos.

estibaliz2006 · #7 (**permalink**) 30/03/2010, 05:26

en el ejemplo que os pongo como sería?

zaqpz · #8 (**permalink**) 30/03/2010, 06:20

Aunque esto es más bien un tema de JavaScript te he hecho un ejemplito para que lo adaptes a gusto.

Código PHP:

  <?php

if(!empty($_POST))
{
    echo 'Post generado: '.htmlentities($_POST['html']);
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">
function carga()
{
    vHtml=window.frames[0];
    vHtml.document.designMode="on";
}

function enviar()
{
    document.getElementById("html").value=vHtml.document.body.innerHTML;
    return true;
}

function formato(tipo, argumento)
{
    vHtml.document.execCommand(tipo, false, argumento);
    vHtml.focus();
}
</script>
</head>

<body onload="carga();">

<form method="post">
    <iframe width="700" height="300" id="editor"></iframe>
    <input type="hidden" name="html" id="html" />    
    <button type="button" onclick="formato('bold')"><b>B</b></button>
    <button type="submit" onclick="enviar();">Enviar</button>
</form>
</body>
</html>

Te agregué un botón para poner negritas así pruebas cómo se genera el código y cómo lo recibes.

Saludos.

PD: no uses PHP_SELF como action del form para que tu sitio no quede vulnerable a ataques XSS.

web_master7 · #9 (**permalink**) 30/03/2010, 07:05

los iframes son obsoletos

estibaliz2006 · #10 (**permalink**) 30/03/2010, 08:31

de acuerdo en que son obsoletos pero como hago para dar formato (negrita, cursiva, etc...) al textarea????

GatorV · #11 (**permalink**) 30/03/2010, 08:33

Tema movido desde PHP a Javascript

zaqpz · #12 (**permalink**) 30/03/2010, 15:06

Cita:

Iniciado por web_master7

los iframes son obsoletos

¿Obsoletos?... que yo sepa validan perfectamente con la W3C. Es cierto que en el 99% de las veces por cuestiones de accesibilidad y tal vez usabilidad no se debería usarlos. De hecho también el 99% de las veces hay una forma mejor de resolver el problema... pero este caso es definitivamente el 1% restante.

Volviendo al tema estibaliz2006 ¿has podido con el código?

Saludos.

abimaelrc · #13 (**permalink**) 30/03/2010, 15:45

Estoy de acuerdo con zaqpz, los iframe no están obsoletos. Simplemente, no son recomendables usar en situaciones que se pueda lograr de otra forma mejor. Por ejemplo, tomar información de la base de datos y pasarla a la página principal sin que se recargue la pantalla, para ello se sugiere usar AJAX, etc.

estibaliz2006 · #14 (**permalink**) 30/03/2010, 23:03

vale....perfecto el debate....pero y mi problema????

abimaelrc · #15 (**permalink**) 30/03/2010, 23:21

Bueno estamos esperando que nos digas como te ha ido con lo que te han indicado

zaqpz · #16 (**permalink**) 30/03/2010, 23:24

Cita:

Iniciado por estibaliz2006

vale....perfecto el debate....pero y mi problema????

Cita:

Iniciado por zaqpz

Aunque esto es más bien un tema de JavaScript te he hecho un ejemplito para que lo adaptes a gusto.

Código PHP:

  <?php

 
if(!empty($_POST))

{

    echo 'Post generado: '.htmlentities($_POST['html']);

}

 
?>

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

 
<script type="text/javascript">

function carga()

{

    vHtml=window.frames[0];

    vHtml.document.designMode="on";

}

 
function enviar()

{

    document.getElementById("html").value=vHtml.document.body.innerHTML;

    return true;

}

 
function formato(tipo, argumento)

{

    vHtml.document.execCommand(tipo, false, argumento);

    vHtml.focus();

}

</script>

</head>

 
<body onload="carga();">

 
<form method="post">

    <iframe width="700" height="300" id="editor"></iframe>

    <input type="hidden" name="html" id="html" />    

    <button type="button" onclick="formato('bold')"><b>B</b></button>

    <button type="submit" onclick="enviar();">Enviar</button>

</form>

</body>

</html>

Te agregué un botón para poner negritas así pruebas cómo se genera el código y cómo lo recibes.

Saludos.

PD: no uses PHP_SELF como action del form para que tu sitio no quede vulnerable a ataques XSS.

Panino5001 · #17 (**permalink**) 31/03/2010, 00:09

Cita:

Iniciado por estibaliz2006

de acuerdo en que son obsoletos pero como hago para dar formato (negrita, cursiva, etc...) al textarea????

Sin iframe? Así:

Código PHP:

  <!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>Documento sin t&#237;tulo</title> 
<script> 
function formatText(cmd){ 
    document.execCommand(cmd, null, null); 
} 
function insertarImagen(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
     document.getElementById('pp').focus(); 
     document.execCommand("InsertImage",false,u); 
}  
</script> 
</head> 

<body> 
<form action="" method="get"> 
  <input name="input" type="button" onclick="formatText('bold')" value="NEGRITA" /><input name="input" type="button" onclick="formatText('italic')" value="CURSIVA" /><input name="input" type="button" onclick="formatText('underline')" value="SUBRAYADO" /><input name="input" type="button" onclick="insertarImagen()" value="INSERTAR IMAGEN" /> 
</form> 
<div id="pp" contenteditable="true">Este es un texto editable</div> 
</body> 
</html>

estibaliz2006 · #18 (**permalink**) 05/04/2010, 00:28

nada...sigo igual....quiero un textarea al que le pueda dar formato a lo que escribo...jooooooooooooo

zaqpz · #19 (**permalink**) 05/04/2010, 00:46

Intenta pegarle una nueva leída al desarrollo del hilo. Yo te he hecho un ejemplo completo con iframe en el cual puedes capturar el valor de lo que se escribe y luego Panino5001 ha propuesto una mejor alternativa donde se reemplaza el iframe por un div. ¿Has intentado implementarlo? ¿tienes algún error o código para mostrar y que podamos ayudarte a partir de ahí?

Saludos.

abimaelrc · #20 (**permalink**) 05/04/2010, 09:40

En el de panino5001, que es tan simple como copiar y pegar, tienes que seleccionar la parte que deseas modificar y presionar los botones. Es como uno hace con gmail o algún documento, que tienes que seleccionar el texto y luego presionar los botones.