crear un form de forma dinámica con javascript

[evoarte]

buenas noches,

con este código se genera un form pero el cierre del formulario no se traslada bien al código html de la página

Código Javascript:

document.getElementById(nuesre).innerHTML += "<form id=\'" + nufobo + "\' name=\'" + nufobo + "\' class='esfobo' >";
            document.getElementById(nuesre).innerHTML += "<input type='hidden' name='noarbo' value=\'" + event.target.responseText + "\' />";
            document.getElementById(nuesre).innerHTML += "<input type='button' value='borrar' onclick='javascript:borrara(this.form,nua)'/>";
            document.getElementById(nuesre).innerHTML += "</form>";
 

Código HTML:

<form id="nuarbo1" name="nuarbo1" class="esfobo"></form>
<input type="hidden" name="noarbo" value="bano-minimalista-sanitarios-pared.jpg">
<input type="button" value="borrar" onclick="javascript:borrara(this.form,nua)">
 

[jvier]

Que te parece si lo haces con JQuery?

Solo incluye en tu pagina la libreria de jquery y escribe algo como esto:

Código Javascript:

var form = $("<form>");
var input = $("<input>").attr("type","hidden").attr("name","noarbo").attr("value",event.target.responseText);
$(form).append(input);
$("#nuesre").append(form);
//ETC ETC
 

[evoarte]

buenas noches,

también he probado de esta otra forma, pero en este caso en el html generado falta el evento onclick

Código Javascript:

var form    = document.createElement("form");
            var diva    = document.getElementById(nuesre);
            diva.appendChild(form);
            form.id     = nufobo;
            form.name   = nufobo;
            var eun     = document.createElement("input");
            eun.type    = "hidden";
            eun.name    = "noarbo";
            eun.value   = event.target.responseText;
            form.appendChild(eun);
            var edo     = document.createElement("input");
            edo.type    = 'button';
            edo.name    = 'enviar';
            edo.value   = 'borrar';
            edo.onclick = 'javascript:borrara(this.form,nua)';
            form.appendChild(edo);
 

Código HTML:

<form id="nuarbo1" name="nuarbo1">
<input type="hidden" name="noarbo" value="bano-minimalista-sanitarios-pared.jpg">
<input type="button" name="enviar" value="borrar">
</form>
 

[evoarte]

hola jvier,

intento hacerlo con javascript
(no suelo usar jquery)

salu2.

[jvier]

Entonces cambia tu codigo original:

Código Javascript:

document.getElementById(nuesre).innerHTML += "<form id=\'" + nufobo + "\' name=\'" + nufobo + "\' class='esfobo' >";
            document.getElementById(nuesre).innerHTML += "<input type='hidden' name='noarbo' value=\'" + event.target.responseText + "\' />";
            document.getElementById(nuesre).innerHTML += "<input type='button' value='borrar' onclick='javascript:borrara(this.form,nua)'/>";
            document.getElementById(nuesre).innerHTML += "</form>";
 

por este:

Código Javascript:

document.getElementById(nuesre).innerHTML += "<form id=\'" + nufobo + "\' name=\'" + nufobo + "\' class='esfobo' >";
            document.getElementById( nufobo).innerHTML += "<input type='hidden' name='noarbo' value=\'" + event.target.responseText + "\' />";
            document.getElementById( nufobo).innerHTML += "<input type='button' value='borrar' onclick='javascript:borrara(this.form,nua)'/>";
 

[evoarte]

buenos días,

ninguna de las 2 opciones funcionan:

1. Insertando HTML, al dar click se genera un error: nua no está definido

Código Javascript:

document.getElementById(nuesre).innerHTML += "<form id=\'" + nufobo + "\' name=\'" + nufobo + "\' class='esfobo' ></form>";
document.getElementById(nufobo).innerHTML += "<input type='hidden' name='noarbo' value=\'" + event.target.responseText + "\' />";
document.getElementById(nufobo).innerHTML += "<input type='button' name='enviar' value='borrar' onclick='javascript:borrara(this.form,nua)'/>";
 
function borrara(form,nua)
{
    alert(nua);
}
 

2. Manipulando el DOM para generar los elementos, en este caso el evento onclick no se añade al botón

Código Javascript:

var form    = document.createElement("form");
var diva    = document.getElementById(nuesre);
diva.appendChild(form);
form.id     = nufobo;
form.name   = nufobo;
var eun     = document.createElement("input");
eun.type    = "hidden";
eun.name    = "noarbo";
eun.value   = event.target.responseText;
form.appendChild(eun);
var edo     = document.createElement("input");
edo.type    = 'button';
edo.id      = 'eborra';
edo.name    = 'enviar';
edo.value   = 'borrar';
edo.onclick = function() { borrara(this.form,nua); };
form.appendChild(edo);
 

Código HTML:

<form id="nuarbo2" name="nuarbo2">
<input type="hidden" name="noarbo" value="reforma-baño-sanitarios-diseño-pavimento-continuo-blanco-negro.jpg">
<input type="button" id="eborra" name="enviar" value="borrar"></form>
 

[evoarte]

hola,

me he precipitado, la SEGUNDA opción si funciona, sin embargo el navegador (chrome) no incluye la función en el html generado. Y al hacer click se ejecuta la función y pasan los parámetros.

Por lo tanto, si a alguién le sirve, esta es la SOLUCIÓN:

Para aclarar un poco el código:
- nuesre (variable) id de un div definido con anterioridad donde se inserta el form. Se puede definir como una cadena.
- nufobo (variable) id y nombre que se asigna al form. Se puede definir como una cadena.
- event.target.responseText respuesta de la petición ajax con XMLhttpRequest

Código Javascript:

var form    = document.createElement("form");
var diva    = document.getElementById(nuesre);
diva.appendChild(form);
form.id     = nufobo;
form.name   = nufobo;
var eun     = document.createElement("input");
eun.type    = "hidden";
eun.name    = "noarbo";
eun.value   = event.target.responseText;
form.appendChild(eun);
var edo     = document.createElement("input");
edo.type    = 'button';
edo.id      = 'eborra';
edo.name    = 'enviar';
edo.value   = 'borrar';
edo.onclick = function() { borrara(this.form,nua); };
form.appendChild(edo);
 

un saludo.