Transfomar un div en un formulario

RoNiK #1 Feb '13

Me explico, yo tengo un div con una descripción y un botón para editar. Entonces me gustaría que al dar a editar se transforme ese div de información en un formulario con toda la información que ya había para editarlo. Algo parecido a Wikipedia pero sin ir a otra página.

Lo que he pensando es sencillo, tenemos el div y al dar a editar lo ocultamos y mostramos el formulario que estaba oculto. Pero esto no me convence porque aunque este oculto (display:none) sigue 'estando ahí' en el código fuente se verá y eso no mola, no?

No sé que forma habría de hacer todo esto que digo. A ver si alguien me ilumina.

Gracias, saludos.

elkaoD #2 Feb '13

"Pero esto no me convence porque aunque este oculto (display:none) sigue 'estando ahí' en el código fuente se verá y eso no mola, no?"

¿Qué más da?

1 respuesta

S

Sarwaz #3 Feb '13

Edit: no entendí bien. Lo que tienes oculto es el formulario, bueno siempre puedes crearlo dinamicamente.

RoNiK #4 Feb '13

#2 Mas que nada por no tener contenido duplicado, y encima oculto :/ eso a Google no le mola.

He seguido investigando y no sé como he dado con esto http://stackoverflow.com/questions/2441565/how-do-i-make-a-div-element-editable-like-a-textarea-when-i-click-it

que es más lo que estaba buscando. Sólo que a esto le falta que lo haga dándole a un botón que ahora tendré que mirar cómo

1 respuesta

S

Sarwaz #5 Feb '13

A lo mejor te interesa esto:
http://www.appelsiini.net/projects/jeditable

1 respuesta

RoNiK #6 Feb '13

#5 Sí eso también lo he visto, aunque no se que diferencia hay en cuanto a optimización o lo que sea, porque hacer hace lo mismo que lo que he puesto yo

Y en éste me pasa lo mismo, lo hace cuando clickeas en el propio contenido, yo quería en un botón y sigo mirando cómo hacerlo, pero gracias

elkaoD #7 Feb '13

#4 no le gusta el contenido textual, pero un formulario es un formulario Por eso no te preocupes, ve a lo más sencillo (navaja de Ockham).

La solución como tú la quieres es hacerte tú los elementos DOM, en jQuery es:

var $form = $('<form>');  // Esto crea un nuevo elemento <form> (fuera de la página)
$form.on('submit', function(e) {
  // blablabla
});
var $input1 = $('<input>').attr('name', 'input1');
var $input2 = $('<input>').attr('name', 'input2');
var $submit = $('<input>').attr('type', 'submit');

$form
  .append($input1)
  .append($input2)
  .append($submit)
  .hide();

$('#divcontenedor').append($form);  // Añadimos al DOM de la página

Pero vamos eso atufa a mal código. ¡El DOM estático hazlo con HTML, que para eso está!

Transfomar un div en un formulario

Usuarios habituales

Tags