DOM y formulario para agregar más campos

jmagago84 · #1 (**permalink**) 25/07/2008, 21:28

Hola!
Estoy haciendo un formulario con 2 botones uno para enviar el formulario y otro para añadir más campos, en este caso se añade un input y un textarea. Todo esto mediante DOM.
El código es el siguiente:

<script type="text/javascript">
function masCampos(){
var labelFoto = document.createElement("label");
var textFoto = document.createTextNode("Nombre foto:");
labelFoto.appendChild(textFoto);
document.body.appendChild(labelFoto);

var input = document.createElement("input");
document.body.appendChild(input);

var p1 = document.createElement("p");
document.body.appendChild(p1);

var labelDescripcion = document.createElement("label");
var textLabel = document.createTextNode("Descripción");
labelDescripcion.appendChild(textLabel);
document.body.appendChild(labelDescripcion);

var textArea = document.createElement("textarea");
document.body.appendChild(textArea);

var p2 = document.createElement("p");
document.body.appendChild(p2);
}
</script>
</head>

<body>

<form id="form" action="prueba.asp" method="post">
<p>
<label id="foto" for="foto">Nombre foto:</label>
<input id="foto" name="foto" type="text" />
</p>
<p>
<label id="texto" for="texto">Descripción:</label>
<textarea name="texto" id="texto"></textarea>
</p>
<input id="mas" value="Más pasos" type="button" onclick="masCampos()"/>
<input id="enviar" value="Enviar" type="submit"/>
</form>

Vale, pues con este código lo que consigo es agregar lo que quiero, pero siempre lo agrega después de los botones Enviar y Más pasos, pues bien, lo que quiero es que lo agregue siempre antes de los botones.

¿Alguna idea de cómo sería el código?

Gracias!.

xbx · #2 (**permalink**) 25/07/2008, 21:38

Hola jmagago84,

Aquí está lo que buscas:

Código HTML:

<html>
<head>
<script type="text/javascript">
function masCampos()
{
    var div_campos = document.getElementById("div_campos");
    
    var labelFoto = document.createElement("label");
    var textFoto = document.createTextNode("Nombre foto:");
    labelFoto.appendChild(textFoto);
    div_campos.appendChild(labelFoto);

    var input = document.createElement("input");
    div_campos.appendChild(input);

    var p1 = document.createElement("p");
    div_campos.appendChild(p1);

    var labelDescripcion = document.createElement("label");
    var textLabel = document.createTextNode("Descripción");
    labelDescripcion.appendChild(textLabel);
    div_campos.appendChild(labelDescripcion);

    var textArea = document.createElement("textarea");
    div_campos.appendChild(textArea);

    var p2 = document.createElement("p");
    
    
    div_campos.appendChild(p2);
}
</script>
</head>

<body>

<form id="form" action="prueba.asp" method="post">
<div id="div_campos">
<p>
<label id="foto" for="foto">Nombre foto:</label>
<input id="foto" name="foto" type="text" />
</p>
<p>
<label id="texto" for="texto">Descripción:</label>
<textarea name="texto" id="texto"></textarea>
</p>
</div>
<input id="mas" value="Más pasos" type="button" onclick="masCampos()"/>
<input id="enviar" value="Enviar" type="submit"/>
</form>
</body>
</html>

El cambio es el siguiente:
En vez de hacer el appendChild al body, se lo haces a un div el cual no contiene el boton enviar y el otro.

Mucha suerte! Saludos

jmagago84 · #3 (**permalink**) 25/07/2008, 21:46

Muchas gracias por tu respuesta, pero ¿¿es posible hacerlo sin introducir ningún div, es decir, haciendo que en vez de colocarse los nuevos elementos al final del body, que se coloquen siempre antes de los botones???

He estado investigando y no sé si se podrá hacer con un insertBefore

De todas formas voy a probar la que me has dicho

Gracias!!

xbx · #4 (**permalink**) 25/07/2008, 22:05

Cita:

Iniciado por jmagago84

Muchas gracias por tu respuesta, pero ¿¿es posible hacerlo sin introducir ningún div, es decir, haciendo que en vez de colocarse los nuevos elementos al final del body, que se coloquen siempre antes de los botones???

De todas formas voy a probar la que me has dicho

Gracias!!

Si, si. Es posible.

Código HTML:

<html>
<head>
<script type="text/javascript">
function masCampos()
{
    var mas = document.getElementById("mas");
    var form = document.getElementById("form");

    var labelFoto = document.createElement("label");
    var textFoto = document.createTextNode("Nombre foto:");
    labelFoto.appendChild(textFoto);
    form.insertBefore(labelFoto,mas);

    var input = document.createElement("input");
    form.insertBefore(input,mas);

    var p1 = document.createElement("p");
    form.insertBefore(p1,mas);

    var labelDescripcion = document.createElement("label");
    var textLabel = document.createTextNode("Descripción");
    labelDescripcion.appendChild(textLabel);
    form.insertBefore(textLabel,mas);

    var textArea = document.createElement("textarea");
    form.insertBefore(textArea,mas);

    var p2 = document.createElement("p");
    form.insertBefore(p2,mas);
}
</script>
</head>

<body>

<form id="form" action="prueba.asp" method="post">
<p>
<label id="foto" for="foto">Nombre foto:</label>
<input id="foto" name="foto" type="text" />
</p>
<p>
<label id="texto" for="texto">Descripción:</label>
<textarea name="texto" id="texto"></textarea>
</p>

<input id="mas" value="Más pasos" type="button" onclick="masCampos()"/>
<input id="enviar" value="Enviar" type="submit"/>
</form>
</body>
</html>

jmagago84 · #5 (**permalink**) 25/07/2008, 22:08

Si señor!, muchas gracias!!!

Un 10!!

xbx · #6 (**permalink**) 25/07/2008, 22:10

jajaja bueno... gracias a ti.

ftpm · #7 (**permalink**) 26/08/2008, 18:21

Tengo una consulta para ti XBX, tengo entendido (dada mi poquita experiencia) que si dos formularios comparten el mismo nombre, solo uno es valido para ver los datos ingresados. Mire tu codigo y lo modifique a mi manera para poder separarlo en 3 divs diferentes. el asunto es que lo uni a un php de ejemplo para validar el formulario y enviarlo por mail, pero solo me envio los primeros datos

si sabes en que estoy fallando o que otra cosa hace falta me avisas. te dejo el link para que veas lo que probe (fue solo una prueba):

http://67.225.195.26/~advrcl/orden
(no pude poner el enlace porque es el 1er msn q posteo aki!!!! :=0

Gracias por supuesto por tu atencion. Un principiante de antemano te lo agradece...

derkenuke · #8 (**permalink**) 29/08/2008, 06:12

Hola ftpm:

Cita:

Iniciado por ftpm

tengo entendido (dada mi poquita experiencia) que si dos formularios comparten el mismo nombre, solo uno es valido para ver los datos ingresados.

No, si pruebas un ejemplo verás que si dos formularios tienen el mismo nombre se pueden enviar sin ningún problema al servidor. En javascript la variable document.fr (si fr es el name del formulario) no será una referencia al formulario, sino un Array de formularios.

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" xml:lang="es" lang="es">

<head>

<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />

<meta name="Author" content="derkeNuke" />

<title>Página nueva</title>

<style type="text/css">

 
</style>

</head>

 
<body>

 
 
<form name="fr" method="get" action="recibidorGET.php">

    <select name="color">

        <option value="rojo">rojo</option>

        <option value="verde">verde</option>

        <option value="azul">azul</option>

        <option value="amarillo">amarillo</option>

        <option value="naranja">naranja</option>

    </select>

    <label for="op">Escribe algo: </label>

    <input type="text" name="opinion" value="" id="op" />

    <button type="submit">Enviar</button>

</form>

 
<form name="fr" method="get" action="recibidorGET.php">

    <select name="lugar">

        <option value="playa">playa</option>

        <option value="montaña">montaña</option>

        <option value="pradera">pradera</option>

        <option value="campo">campo</option>

        <option value="ciudad">ciudad</option>

    </select>

    <label for="ope">Escribe algo: </label>

    <input type="text" name="opinion" value="" id="ope" />

    <button type="submit">Enviar</button>

</form>

 
<script type="text/javascript">

<!--

 
alert( document.fr.length );

alert( document.fr[1].lugar.options[1].value );

 
 
// -->

</script>

 
</body>

</html>

Por otra parte, en el documento que enlazas te recomiendo no maquetar con tablas: formularios+css.

Además he visto que el código en principio tiene muchisimos errores HTML, algunos muy graves. TD fuera de TR:

Código HTML:

<td><input name="Cantidad" type="text" id="Cantidad" size="15"></td>
  </tr>

   <td><input name="Codigo2" type="text" id="Codigo2" size="5"></td>

Y se cierran etiquetas que no se abren:

Código HTML:

</tr>
       <td><input name="Codigo6" type="text" id="Codigo6" size="5"></td>

        <td><input name="Producto6" type="text" id="Producto6" size="30"></td>
        <td><input name="Cantidad6" type="text" id="Cantidad6" size="15"></td>
      </tr>

TR dentro de TR (o TR sin cerrar..)

Código HTML:

 <tr>

    <td><input type="text" name="Nombre" id="Nombre"></td>
    <td><input type="text" name="Email" id="Email"></td>
    <td><table width="150" border="0" cellspacing="0" cellpadding="0">
      <tr>

Atributos width y height que deberían ir en CSS; etiquetas y atributos en mayúsculas...

En el final del documento hay un descontrol de etiquetas gravísimo:

Código HTML:

</table>
  </SPAN></TD>
</TR></tr></form>
</BODY>

</HTML>

Para obtener un javascript satisfactorio primero el documento (x)HTML tiene que estar bien formado y ser correcto. Si las etiquetas bailan, los atributos están mal definidos y no se sabe qué está dentro de qué todo es confuso. Un truco: identa (tabula) tus códigos para mantener una jerarquía lógica. Y elimina todas las etiquetas que se refieran a table, y luego maqueta mínimamente con CSS.

Saludos.

Mike_Wasawsky · #9 (**permalink**) 19/11/2008, 11:03

Cita:

Iniciado por xbx

Si, si. Es posible.

Código HTML:

<html>
<head>
<script type="text/javascript">
function masCampos()
{
    var mas = document.getElementById("mas");
    var form = document.getElementById("form");

    var labelFoto = document.createElement("label");
    var textFoto = document.createTextNode("Nombre foto:");
    labelFoto.appendChild(textFoto);
    form.insertBefore(labelFoto,mas);

    var input = document.createElement("input");
    form.insertBefore(input,mas);

    var p1 = document.createElement("p");
    form.insertBefore(p1,mas);

    var labelDescripcion = document.createElement("label");
    var textLabel = document.createTextNode("Descripción");
    labelDescripcion.appendChild(textLabel);
    form.insertBefore(textLabel,mas);

    var textArea = document.createElement("textarea");
    form.insertBefore(textArea,mas);

    var p2 = document.createElement("p");
    form.insertBefore(p2,mas);
}
</script>
</head>

<body>

<form id="form" action="prueba.asp" method="post">
<p>
<label id="foto" for="foto">Nombre foto:</label>
<input id="foto" name="foto" type="text" />
</p>
<p>
<label id="texto" for="texto">Descripción:</label>
<textarea name="texto" id="texto"></textarea>
</p>

<input id="mas" value="Más pasos" type="button" onclick="masCampos()"/>
<input id="enviar" value="Enviar" type="submit"/>
</form>
</body>
</html>

mmm.. puedes decirme con que nombres se esta enviando los campos ya que los quiero recibir con $_POST en php, pero no se cual es el nombre de cada uno de los campos...

de antemano muchas gracias por la respuesta