Problema al crear un form con JavaScript

[Seisler]

Hola.

Estoy un poco desesperado con este tema que no logro resolver, si alguien me puede echar una mano se lo agradeceré.

Voy a resumir el tema.

Yo quiero hacer un formulario de momento sin ningún campo, solo con tres botones. Uno sera "añadir puesto trabajo", otro sera "quitar puesto de trabajo" y el otro "enviar".

Mediante JavaScript, el botón "añadir campo trabajo" debería crearme ésto:


Puesto de Trabajo ____________________
Nombre Trabajador ____________________

__________________________________________________ __________

O sease crear dos campos tipo texto y una separación. Incluso me gustaría que me creara en el primero un campo tipo SELECT y que me dejara escoger el puesto de trabajo.

Después quiero recoger la información que me crea el JavaScript y enviarla a la Base de Datos.

Voy por partes:

primero os pongo el SCRIPT que he intentado hacer de manera chapuza y que en teoría funciona, pero alguien me ha dicho que esta mal hecho y por eso no puedo recoger los datos.

Código Javascript:

<script language="JavaScript" type="text/javascript">
 
function elemento_file(x){
var divele=document.getElementById("elementos");
   
if(x==1){
        
if(divele.lastChild){
divele.removeChild(divele.lastChild);
divele.removeChild(divele.lastChild);
divele.removeChild(divele.lastChild);
divele.removeChild(divele.lastChild);
divele.removeChild(divele.lastChild);
divele.removeChild(divele.lastChild);
 
 
    }
} 
                            
else {
 
salto=document.createElement("br");
puesto=document.createTextNode("Puesto");
nombre=document.createTextNode("Nombre");
ele=document.createElement("input");
ele2=document.createElement("input");
separacion=document.createElement("hr");
ele.type="text";
ele.name="mielemento[]";
ele2.type="text";
ele.name="mielemento2[]";
divele.appendChild(puesto);                                                     
divele.appendChild(ele);
divele.appendChild(salto);
divele.appendChild(nombre);
divele.appendChild(ele2);
divele.appendChild(separacion);
 
    }
}
</script>
 

Por otra parte alguien me ayudo a hacer uno en el que agregaras campos FILE y a subirlos a la Base de Datos. es este:

Código Javascript:

<script language="JavaScript" type="text/javascript">
 
function elemento_file(x){
var divele=document.getElementById("elementos");
   
if(x==1){
        
if(divele.lastChild){
divele.removeChild(divele.lastChild);
divele.removeChild(divele.lastChild);
    }
} 
                            
else {
salto=document.createElement("br");
ele=document.createElement("input");
ele.type="file";
ele.name="mielemento[]";                                                        
divele.appendChild(ele);
divele.appendChild(salto);
    }
}
</script>
 

Así los recogía:

Código PHP:

   
if($_FILES["mielemento"]){ 
             
            foreach ($_FILES["mielemento"]["error"] as $clave => $error) { 
                if ($error == UPLOAD_ERR_OK) { 
                    $nombre_tmp = $_FILES["mielemento"]["tmp_name"][$clave]; 
                    $nombre = $_FILES["mielemento"]["name"][$clave]; 
                    if(move_uploaded_file($nombre_tmp, "$nombre")) echo "subido: $nombre<br>"; 
                } 
                 
        }} 
   

Alguien me puede echar una mano con el JavaScript?

Gracias.

[alexg88]

Lo mejor para este tipo de cosas es utilizar un framework javascript
que te facilitará enormemente el trabajo.

Existen muchos, uno de los más conocidos es http://jquery.com/

En esta misma página hay mucha información sobre los métodos para crear
nuevos elementos html de forma muy rapida.

Por ejemplo, existe una función .html() que te permite introducir html al vuelo.
Aquí esta la página que lo explica: http://api.jquery.com/html/

Un ejemplo:

Código Javascript:

$(body).html("<form action='pagina.php' method="post"><label for="puesto">Puesto</label><input name="puesto" id="puesto" "type="text" />
</form>");
 

Con esto reemplazas el contenido del cuerpo por el html escrito.
Si quieres elegir el sitio donde lo introduces puedes utilizar el id de algún elemento.

Por ejemplo, para introducirlo en un elemento con id = "elemento":

Código Javascript:

$("#elemento").html("<form action='pagina.php' method='post'><label for='puesto'>Puesto</label><input name='puesto' id='puesto' type='text' />
</form>");
 

Con #elemento le indicas que te refieres a un id. Es como en los selectores css (en realidad, se basa en estos) e incluso puedes
utilizar selectores más avanzados. Es bastante potente.

El otro error que he visto es que no pones bien el atributo name en los input y por eso no te funciona.

Lo que no entiendo es para que necesitas crear esos formularios con javascript,
a no ser que hagas algo de forma dinámica.

[caricatos]

Hola:

Particularmente no estoy de acuerdo en usar librerías para cosas sencillas.

Con los formularios hay siempre problemas al querer usar el DOM, ya que no deben permitirse cosillas como cambios de algunos atributos, por eso tal vez una de las mejores soluciones es evitar crear elementos (de formularios) con createElement, porque las asignaciones de atributos name o type puede fallar en algunos navegadores... pero si usases innerHTML creo que no habría problemas...

Saludos