¿cómo envío el contenido de un formulario? (method="post" action="file.php")

Anarko · #1 (**permalink**) 30/11/2014, 15:11

Hola.

De aquí:
http://www.forosdelweb.com/2462878-post270.html
Tomé el código y le elimine algunas líneas (solo necesito poder insertar imagenes).

Vá de maravilla, pero debido a que no entiendo ése código, no sé cómo pasar el contenido INSERTADO por medio del método POST al programa "file.php"

Álguien me ayuda por favor?

El código es éste:

Código HTML:

<!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=iso-8859-1" />
<title></title>
<style>
input{
border:1px solid #000;
background:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
margin-bottom:3px;
}
</style>
<script>
var editor;
function $(id){
    return document.getElementById(id);
}
function insertarImagen(){
    var u;
    if(!(u=prompt('ingresar url','http://')))return;
    editor.execCommand("InsertImage",false,u);
}
function inHTML(){
    var u,u2;
    if(!(u=prompt('ingresar html')))return;
        try{
            editor.execCommand("inserthtml",false,u);
        }catch(e){
            try{
                u2=editor.selection.createRange();
                u2.pasteHTML(u);
            }catch(E){
                alert('nop');
            }
        }
}
function htmlOEditor(e){
e=e || window.event;
ob=e.target || e.srcElement
$('edit').style.display=(ob.value=='html')?'none':'block';
$('ht').style.display=(ob.value!='html')?'none':'block';
$('ht').innerHTML=rev(editor.body.innerHTML);
ob.value=(ob.value=='html')?'editor':'html';
}
window.onload=function(){  
    editor=$('edit').contentDocument || $('edit').contentWindow.document;
    editor.designMode='on';
}
</script>
</head>

<body><form id="form1" name="form1" method="post" action="file.php" target="_blank"><input type="button" name="Submit6" value="imagen" onclick="insertarImagen()" /><iframe id="edit" width="100%" height="300" style=" border:1px solid #000;"></iframe><div id="ht" style="width:100%;height:300px; overflow:auto;border:1px solid #000;display:none;"></div>
<div style="margin-top:3px;"><input name="ver" type="button" id="ver" onclick="htmlOEditor(event);" value="html" /> <input type="submit" /></div></form></body></html>

...cómo envío la info de ése formulario?

Pues siempre que le doy "Enviar" llega vacío. :(

Gracias!

IsaBelM · #2 (**permalink**) 01/12/2014, 06:18

prueba ahora

Cita:

<!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=iso-8859-1" />
<title></title>
<style style="text/css">
input{
border:1px solid #000;
background:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
margin-bottom:3px;
}

#cm {
display:none;
}
</style>
<script type="text/javascript">
var editor;
function $(id){
return document.getElementById(id);
}

function formato(f){
editor.execCommand(f, false, null);
}

function rev(t) {
return t.split("<").join("<").split(">").join(">"). split("\"").join(""");
}

function insertarEnlace(){
var u;
if(!(u=prompt('ingresar url','http://')))return;
editor.execCommand("CreateLink",false,u);
}

function insertarImagen(){
var u;
if(!(u=prompt('ingresar url','http://')))return;
editor.execCommand("InsertImage",false,u);
}

function color(c){
editor.execCommand("forecolor",false,c);
}

function colorFondo(c){
var h=window.ActiveXObject?'backcolor':'hilitecolor';
editor.execCommand(h,false,c);
}

function inHTML(){
var u,u2;
if(!(u=prompt('ingresar html')))return;

try{
editor.execCommand("insertHtml",false,u);
}catch(e){
try{
u2=editor.selection.createRange();
u2.pasteHTML(u);
}catch(E){
alert('nop');
}
}
}

function emoticones(sm){
var url = 'smiles/'+sm+'.gif';
var navegador = navigator.appName;

if (navegador == "Microsoft Internet Explorer") {

if (url != null) {
editor.focus();
alert('tiene foco')
editor.execCommand("InsertImage", false, url);
};
editor.focus();
} else {

editor.execCommand("InsertImage",false,url);

}

}

function htmlOEditor(e){
e=e || window.event;
ob=e.target || e.srcElement
$('editor_frame').style.display=(ob.value=='html') ?'none':'block';
$('ht').style.display=(ob.value!='html')?'none':'b lock';
$('ht').innerHTML=rev(editor.body.innerHTML);
ob.value=(ob.value=='html')?'editor':'html';
}

function Validar(c,min,max){
var alertas = ['Alarga tu mensaje al menos hasta los ' + min + ' caracteres', 'Acorta tu mensaje al menos hasta los ' + max + ' caracteres'];
caracteres = editor.body.innerHTML.replace(/(<[^>]+>)/g, '');
error = (caracteres.length < min) ? alertas[0] : (caracteres.length > max) ? alertas[1] : '';
if (error) {
alert(error);
return false;
} else {
c.cm.innerHTML=rev(editor.body.innerHTML);
return true;
}
}

window.onload=function(){
editor=$('editor_frame').contentDocument || $('editor_frame').contentWindow.document;
editor.designMode='on';
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="insertar.php" onsubmit="return Validar(this,10,200);">
<input type="button" name="Submit" value="N" onclick="formato('bold')" />
<input type="button" name="Submit2" value="C" onclick="formato('italic')" />
<input type="button" name="Submit3" value="S" onclick="formato('underline')" />
<input type="button" name="Submit4" value="remover formato" onclick="formato('RemoveFormat')" />
<input type="button" name="Submit5" value="link" onclick="insertarEnlace()" />
<input type="button" name="Submit9" value="quitar link" onclick="formato('Unlink')" />
<input type="button" name="Submit6" value="imagen" onclick="insertarImagen()" />
<input type="button" name="Submit7" value="texto rojo" onclick="color('#FF0000')" />
<input type="button" name="Submit8" value="fondo rojo" onclick="colorFondo('#FF0000')" />
<input type="button" name="Submit10" value="deshacer" onclick="formato('undo')" />
<input type="button" name="Submit11" value="rehacer" onclick="formato('redo')" />
<input type="button" name="Submit12" value="insertar html" onclick="inHTML()" />
<input name="ver" type="button" id="ver" onclick="htmlOEditor(event)" value="html" />
<br />
<img src="smiles/adios.gif" onclick="emoticones('adios')" />
<img src="smiles/afirmar.gif" onclick="emoticones('afirmar')" />
<img src="smiles/borracho.gif" onclick="emoticones('borracho')" />
<img src="smiles/chillando.gif" onclick="emoticones('chillando')" />
<img src="smiles/cool.gif" onclick="emoticones('cool')" />
<br />
<div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none"></div>
<iframe name="editor_frame" id="editor_frame" width="100%" height="300" style=" border:1px solid #000;"></iframe>
<textarea id="cm" name="cuerpo"></textarea>
<input type="submit" value="Enviar" />
</form>
</body>
</html>

Anarko · #3 (**permalink**) 01/12/2014, 07:10

Eureka!!!

Ha sido excelente tu ayuda linda Isabel.

Yo te agradézco si me explicas por que mi

Código:

unsubmit="document.forms.formimg.cm.value=document.getElementById('editor').innerHTML;"

no funcionó nunca, pero al reemplazarlo por el tuyo:

Código:

unsubmit="document.forms.formimg.cm.value=editor.body.innerHTML;"

vá de maravilla...

Yo solo veo la diferencia en las lineas escritas, pero desconózco la diferncia "de fondo" entre la primer línea (la habitual, 'típica'), y la que tu estas utilizando (HTML5 créo).

Puedes enseñarme un póco + plis?

Salu2!

Al final mi código ha quedado 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=iso-8859-1" /><title>[img Form]</title><style> 
input{ 
border:1px solid #000; 
background:#CCCCCC; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:9px; 
margin-bottom:3px; 
} 
</style> 
<script> 
var editor; 
function $(id){ 
    return document.getElementById(id); 
} 
function rev(t)    { 
    return t.split("<").join("&lt;").split(">").join("&gt;").split("\"").join("&quot;"); 
} 
function insertarImagen(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
    editor.execCommand("InsertImage",false,u); 
} 
function htmlOEditor(e){ 
e=e || window.event; 
ob=e.target || e.srcElement 
$('edit').style.display=(ob.value=='html')?'none':'block'; 
$('ht').style.display=(ob.value!='html')?'none':'block'; 
$('ht').innerHTML=rev(editor.body.innerHTML); 
ob.value=(ob.value=='html')?'editor':'html'; 
} 
window.onload=function(){ 
    editor=$('edit').contentDocument || $('edit').contentWindow.document; 
    editor.designMode='on'; 
} 
</script></head><body><form id="formimg" method="post" action="http://127.0.0.1/file.php" target="_blank" onsubmit="document.forms.formimg.cm.value=editor.body.innerHTML;"><input type="button" value="imagen" onclick="insertarImagen();" /><iframe id="edit" width="100%" height="300" style="border:1px solid #000;">eee</iframe><div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none">hhh</div><div style="margin-top:3px;"><input type="button" onclick="htmlOEditor(event);" value="html" /> <input type="submit" /></div><textarea id="cm" name="cuerpo"></textarea></form></body></html>

IsaBelM · #4 (**permalink**) 01/12/2014, 08:36

por que editor es una variable global, no la id de un elemento. esta línea te lo aclara

Cita:

editor=$('editor_frame').contentDocument || $('editor_frame').contentWindow.document;

Anarko · #5 (**permalink**) 01/12/2014, 12:29

Gracias isabel.

Me disculpo por molestarte de nuevo.

Puedes por favor hacer que ése código no escriba (envíe) los saltos de línea como

Código HTML:

<br>

sino con la etiqueta correcta:

Código HTML:

<br />

... es que de verdad que no encuentro dónde/que línes modificar para que escriba la etiqueta de manera corecta.

(Trabajao con FireFox).

IsaBelM · #6 (**permalink**) 01/12/2014, 15:07

te refieres algo así??

Cita:

temp = rev(editor.body.innerHTML).replace(/(<(div)>)/g, '<br />');
temp = temp.replace(/(<(\/div)>)/g, '');
c.cm.innerHTML= temp;

Anarko · #7 (**permalink**) 02/12/2014, 06:28

Sí isabel muchas gracias por tu cooperación.

... debo hacer lo mismo para convertir los

Código:

<img>

en

Código:

<img />

???

IsaBelM · #8 (**permalink**) 02/12/2014, 15:15

sí, de nuevo has de reemplazar la subcadena. la expresión puede ser algo como esto

Cita:

temp = temp.replace(/(<(img(.*?))>)/g, '<$2 />');