Foros del Web » Programando para Internet » Javascript »

pasar el valor de un div a un imput

 Estas en el tema de pasar el valor de un div a un imput en el foro de Javascript en Foros del Web. hola muy buenas tengo un editor de texto que por lo visto funciona de fabula pero necesito pasar el valor que se crea en un ...
  #1 (permalink)  
Antiguo 29/02/2012, 11:27
 
Fecha de Ingreso: agosto-2011
Ubicación: barcelona
Mensajes: 237
Antigüedad: 13 años, 4 meses
Puntos: 1
pasar el valor de un div a un imput
hola muy buenas

tengo un editor de texto que por lo visto funciona de fabula pero necesito pasar el valor que se crea en un div en este caso

<div id="txt"></div>

que esta dentro de una etiqueta iframe que teóricamente recoge el valor de lo que se escribe en el editor y pasarlo a este imput del formulario

<input type="text" name="titulo" id="titulo" />

pero vamos que no hay manera, la base de datos me manda que no se han introducido los datos y es por que no se pasa el valor de div al imput pues he probado directamente escribiendo en el imput y la base de datos si recoge los datos supongo que el error viene dado por alguna de las funciones de javascript supongo que la function
setHidden()

que esta arriba de todo que es la encargada de pasar el valor pero no se donde esta el error alguien ve por donde esta el fallo.

agradecería alguna pista este es el código, supongo que puede servir si se arregla el fallo para mucha gente gracias.

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function setHidden()
  5. {
  6. document.getElementById('titulo').value = 
  7. textEditor.document.getElementById('txt').document.body.innerHTML;
  8. }
  9. </script>
  10. </head>
  11. <body onLoad="def()"><center>
  12. <div style="width:500px; text-align:left; margin-bottom:10px ">
  13.  
  14.  
  15. <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
  16. <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
  17. <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | 
  18. <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
  19. <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
  20. <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | 
  21. <select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
  22.    <option value="Arial">Arial</option>
  23.    <option value="Comic Sans MS">Comic Sans MS</option>
  24.    <option value="Courier New">Courier New</option>
  25.    <option value="Monotype Corsiva">Monotype</option>
  26.    <option value="Tahoma">Tahoma</option>
  27.    <option value="Times">Times</option>
  28. </select>
  29. <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
  30.    <option value="1">1</option>
  31.    <option value="2">2</option>
  32.    <option value="3">3</option>
  33.    <option value="4">4</option>
  34.    <option value="5">5</option>
  35. </select>
  36. <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
  37.    <option value="black">-</option>
  38.    <option style="color:red;" value="red">-</option>
  39.    <option style="color:blue;" value="blue">-</option>
  40.    <option style="color:green;" value="green">-</option>
  41.    <option style="color:pink;" value="pink">-</option>
  42. </select> | 
  43. <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
  44. <input type="button" style="height:21px; width:21px;"value="●" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
  45. <input type="button" style="height:21px; width:21px;"value="←" onClick="fontEdit('outdent')" title="Outdent" />
  46. <input type="button" style="height:21px; width:21px;"value="→" onClick="fontEdit('indent')" title="Indent" />
  47. </div>
  48. <iframe id="textEditor" style="width:500px; height:170px;">
  49. <div id="txt"></div>
  50. </iframe>
  51. </center>
  52. <script type="text/javascript">
  53. <!--
  54. textEditor.document.designMode="on";
  55. textEditor.document.open();
  56. textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
  57.  
  58. textEditor.document.close();
  59. function def()
  60. {
  61.    document.getElementById("fonts").selectedIndex=0;
  62.    document.getElementById("size").selectedIndex=1;
  63.    document.getElementById("color").selectedIndex=0;
  64. }
  65. function fontEdit(x,y)
  66. {
  67.    textEditor.document.execCommand(x,"",y);
  68.   
  69.    textEditor.focus();
  70. }
  71. -->
  72. </script>
  73. <form action="acceso3.php" method="post" onSubmit="setHidden()">
  74. <input type="text" name="titulo" id="titulo" />
  75. <input type="text" name="pagina" id="pagina" />
  76. <input type="submit" value="submit" />
  77. </form>
  78.  
  79. </body>
  80. </html>
  #2 (permalink)  
Antiguo 29/02/2012, 12:10
Colaborador
  
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 16 años, 7 meses
Puntos: 528
Respuesta: pasar el valor de un div a un imput
El problema es de javascript, no de php.

En principio, quizá me equivoque, es que tu metes dentro del iframe un div, sin embargo, al hacer el iframe editable y escribirle dentro con textEditor.document.write, estás borrando dicho div. No sé de donde sacaste el ejemplo, pero no creo que debas indicar el div dentro del iframe y tampoco que para pasar su valor al input debas copiar el innerhtml del div, ya que para cuando lo haces ya no existe por que se ha sobreescrito.

Tal vez en vez de
textEditor.document.getElementById('txt').document .body.innerHTML;

debería ser

textEditor.document.body.innerHTML;

Aunque no estoy seguro ya que no estoy probando el código.
  #3 (permalink)  
Antiguo 29/02/2012, 13:06
 
Fecha de Ingreso: agosto-2011
Ubicación: barcelona
Mensajes: 237
Antigüedad: 13 años, 4 meses
Puntos: 1
Respuesta: pasar el valor de un div a un imput
ocp001a ya esta solucionado pero no se si funciona en todos los navegadores en google crome si aqui el codigo completo funcionando, gracias ahora abria que mejorar las funciones que pueda realizar mas cositas.




Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <script language="javascript">
  4.  
  5. function setHidden()
  6. {
  7. var frameContent=textEditor.document.body.innerHTML;
  8. document.getElementById('titulo').value=frameContent;
  9. }
  10.  
  11. </script>
  12. </head>
  13. <body onLoad="def()"><center>
  14. <div style="width:500px; text-align:left; margin-bottom:10px ">
  15. <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
  16. <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
  17. <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | 
  18. <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
  19. <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
  20. <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | 
  21. <select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
  22. <option value="Arial">Arial</option>
  23. <option value="Comic Sans MS">Comic Sans MS</option>
  24. <option value="Courier New">Courier New</option>
  25. <option value="Monotype Corsiva">Monotype</option>
  26. <option value="Tahoma">Tahoma</option>
  27. <option value="Times">Times</option>
  28. </select>
  29. <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
  30. <option value="1">1</option>
  31. <option value="2">2</option>
  32. <option value="3">3</option>
  33. <option value="4">4</option>
  34. <option value="5">5</option>
  35. </select>
  36. <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
  37. <option value="black">-</option>
  38. <option style="color:red;" value="red">-</option>
  39. <option style="color:blue;" value="blue">-</option>
  40. <option style="color:green;" value="green">-</option>
  41. <option style="color:pink;" value="pink">-</option>
  42. </select> | 
  43. <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
  44. <input type="button" style="height:21px; width:21px;"value="â—" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
  45. <input type="button" style="height:21px; width:21px;"value="â†" onClick="fontEdit('outdent')" title="Outdent" />
  46. <input type="button" style="height:21px; width:21px;"value="→" onClick="fontEdit('indent')" title="Indent" />
  47. </div>
  48. <form action="acceso3.php" method="post" onsubmit="setHidden()">
  49.   <input type="hidden" name="titulo" id="titulo" />
  50. <input type="submit" value="submit" />
  51. </form>
  52. </center>
  53. <script type="text/javascript">
  54. <!--
  55. function def()
  56. {
  57. var testframe = document.createElement("iframe");
  58. testframe.name = testframe.id = "textEditor";
  59.  
  60.  
  61. if (testframe.addEventListener){
  62. testframe.addEventListener("load",function(e){this.contentWindow.document.designMode = "on";}, false);
  63. } else if (testframe.attachEvent){
  64. testframe.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});
  65. }
  66.  
  67. document.body.appendChild(testframe);
  68.  
  69. textEditor.document.designMode="on";
  70. textEditor.document.open();
  71. textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
  72. textEditor.document.close();
  73. textEditor.focus();
  74.  
  75.  
  76.  
  77. }
  78. function fontEdit(x,y)
  79. {
  80. textEditor.document.execCommand(x,"",y);
  81. textEditor.focus();
  82. }
  83. -->
  84. </script>
  85. </body>
  86. </html>

gracias

Etiquetas: formulario, html, imput
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:45.