creacion de nuevo formulario con un boton

luigieder · #1 (**permalink**) 12/08/2011, 19:00

hola necesito que un boton cree un nuevo formulario en la misma pagina cada vez que le de click...lo que necesito es que antes que aparezca el formulario tenga un campo de texto y en el formulari nuevo pueda colocarle todo lo que se puede colocar en un formulario normal tengo el sigiente codigo...

<html>
<head>
<title>Agregar formulario</title
<script type="text/javascript" language="javascript">
function agregarFormulario(){
var nuevoForm = document.createElement('form','method=get','action =form.php');//Crear el formulario
var nuevoInputText = nuevoForm.appendChild(document.createElement('inpu t'));//Dentro del formulario creas la caja
var otroInputText = nuevoForm.appendChild(document.createElement('inpu t'));
var nuevoInputBoton = nuevoForm.appendChild(document.createElement('inpu t'));//Dentro del formulario crear el boton

nuevoInputText.type = 'text'; //defines el tipo de la caja
nuevoInputText.value = 'text';
otroInputText.type='text';
nuevoInputBoton.type = 'submit'; //defines el tipo del boton
nuevoInputBoton.value = 'Guardar';

var division = document.getElementsByTagName('division')[0];// guardas en una variable la etiqueta donde quieras mostrar el formulario.

document.getElementById('division').insertBefore(n uevoForm,division);//muestras el formulario
document.getElementById('division').insertBefore(o troInputText,division);
document.getElementById('division').insertBefore(n uevoInputText,division); //muestras la caja
document.getElementById('division').insertBefore(n uevoInputBoton,division); // muestras el boton
}
</script>
</head>
<body>
<div id="division">
</div>
<br />
<input type="submit" onclick="agregarFormulario()" value="Agregar Formulario"/>

</body>
</html>

el problema es que nose como hacerle los arreglos al formulario emergente si alguien sabe como hacerlo porfa decirme como hacerlo

Batan · #2 (**permalink**) 13/08/2011, 10:45

Hola muy buenas

Este post te puede ayudar. Leelo
http://www.forosdelweb.com/f13/crear...script-499076/

Saludos

luigieder · #3 (**permalink**) 14/08/2011, 16:48

hola batan estube mirando el enlace que me diste intente hacerlo pero no supe como hacer el llamado al archivo.js ps javascript no lo he manejado...tambien nose como hacer loque uno hacia en un formulario normal algo asi como esto:

Nombre:<input type='text'....>

gracias por tus respuestas...Saludos

Batan · #4 (**permalink**) 14/08/2011, 17:01

Muy buenas.

Para llamar a un fichero JS, es más o menos como llamar a un fichero CSS. Entre el head

Código HTML:

Ver original<script type="text/javascript" src="fichero.js"></script>

Lo del formulario, te referias a lo que publicaste en el foro de HTML?
http://www.forosdelweb.com/f4/boton-...ulario-935600/

Saludos

luigieder · #5 (**permalink**) 14/08/2011, 22:46

hola mas o menos me refiero a que como le coloco el titulo en frente de la caja de texto...gracias

Batan · #6 (**permalink**) 15/08/2011, 07:23

Hola buenas

Código Javascript:

Ver original<script type="text/javascript">
  function crearFormulario(){
    var nuevoForm = document.createElement('form');//Crear el formulario
    var nuevoInputText = nuevoForm.appendChild(document.createElement('input'));//Dentro del formulario creas la caja
    var nuevoInputBoton = nuevoForm.appendChild(document.createElement('input'));//Dentro del formulario crear el boton
     
    nuevoInputText.type = 'text'; //defines el tipo de la caja
    nuevoInputBoton.type = 'button'; //defines el tipo del boton
    texto = "Nombre: ";
    var division = document.getElementsByTagName('division')[0];// guardas en una variable la etiqueta donde quieras mostrar el formulario.
    
 
    document.getElementById('division').insertBefore(nuevoForm,division);//muestras el formulario;
    document.getElementById('division').innerHTML = "Nombre: ";//Muestras el texto de caja caja.
    document.getElementById('division').insertBefore(nuevoInputText,division); //muestras la caja
    document.getElementById('division').insertBefore(nuevoInputBoton,division); // muestras el boton
    }
    </script>

Este era el script que teniamos, pues le agregas el texto mediante un innerHTML.

Saludos

luigieder · #7 (**permalink**) 15/08/2011, 18:14

hola batan vuelvo a molestarte...tecuento que le puse el inner como me dijiste pero al ponerselo a mas de una caja no aparece y l otro es que cuando hago click en el boton de nuevo form solo me aparece un solo form y no genera mas forms

gracias por todo

Batan · #8 (**permalink**) 16/08/2011, 01:23

Ok pues se me ocurre que en vez de poner un innerHTML directamente...
Agregarle directamente un label de esta forma.

Cita:

var nuevoLabel = nuevoForm.appendChild(document.createElement('labe l'));

Ya sabes verdad? crear un nuevo elemento, en este caso label.

Luego a ese elemento asignarle el innerHTML, para que se cree conforme a las veces que das click (no se si me explico).

Cita:

nuevoLabel.innerHTML = 'Nombre: '

y por ultimo llamarlo como has hecho con los demás elementos. Siempre despues de haber llamado al Form, para que quede dentro de esta.

Cita:

document.getElementById('division').insertBefore(n uevoLabel,division);

Saludos y ya te repito que no me molestas, de echo encantado de ayudarte, hacia tiempo que no retomaba este tema en javascript.

Nota: en las citas al label lo deja como labe l; no olvides corregirlo en tu script.

Batan · #9 (**permalink**) 16/08/2011, 02:28

Bueno @luigieder

Decirte que probando el código, vi que no era la forma correcta. Ya que si te fijas, tus campos y tu boton no estan dentro del formulario tal y como esta.

Bueno no hay fallos casi.
Tan solo que cuando imprimes por pantallas los elemento, los imprimes por separado. Esos input no estan dentro de tu formulario, por lo cual al enviar los datos por el formulario no llevan a ningun lado.

La forma correcta no esta en imprimir cada elemeto, solo tienes que imprimir el formulario una sola vez.

Este seria el modo correcto

Código Javascript:

Ver original<script type="text/javascript" language="javascript">
function agregarFormulario(){
var nuevoForm = document.createElement('form');//Crear el formulario; , quitalo de aquí 'method=post','action=form.php'
var nuevoLabel = nuevoForm.appendChild(document.createElement('label'));//Creamos un label con un texto de referencia
var nuevoInputText = nuevoForm.appendChild(document.createElement('input'));//Dentro del formulario creas la caja
var otroInputText = nuevoForm.appendChild(document.createElement('input'));//Una segunda caja
var nuevoInputBoton = nuevoForm.appendChild(document.createElement('input'));//Dentro del formulario crear el boton
var division = document.getElementsByTagName('division')[0];// guardas en una variable la etiqueta donde quieras mostrar el formulario.
 
nuevoForm.method = 'get';//tipo de methodo
nuevoForm.action = 'form.php';//tipo de action
nuevoInputText.type = 'text'; //defines el tipo de la caja
nuevoInputText.value = 'text';//El valor de la caja
otroInputText.type='text';//Segunda caja
nuevoInputBoton.type = 'submit'; //defines el tipo del boton
nuevoInputBoton.value = 'Guardar';//su valor
nuevoLabel.innerHTML = 'Nombre: ';//texto de referencia
 
document.getElementById('division').insertBefore(nuevoForm,division);//muestras el formulario y sus campos
}
</script>

Con estoya tendrias el formulario funcionando correctamente.

Saludos

luigieder · #10 (**permalink**) 16/08/2011, 17:40

Gracias batan ahora si ya le vi forma a lo que estaba buscando