Crear columnas con campos input dynamicamente

jcouoh · #1 (**permalink**) 01/09/2008, 13:17

Hola, tengo dos campos input en una columna, la cual deseo que con un input button puede llamar una funcion javascript que cree en una segunda columna otros input (¿hijos?).

De antemano gracias

David · #2 (**permalink**) 01/09/2008, 13:48

Puedes usar una tabla para eso, o si solo se trata de que aparezca al lado del otro input puedes usar display: inline.

jcouoh · #3 (**permalink**) 01/09/2008, 13:53

Gracias creo que tomé la idea

jcouoh · #4 (**permalink**) 01/09/2008, 19:47

Con la ayuda de Google logré hacer esto que consigue que el primer campo (gasto) se duplique tantas veces como se necesite, pero el campo dos (factura) no consigo hacerlo.

Código:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones2.js" 

type="text/javascript"></script>
</head>
<body>
<form name="myform" action=#>
<input type=text 
name="gasto" 
value="">

<input type=text 
name="factura" 
value="">
</form>

<button onclick="doIt()">do it</button>

<script>
function doIt()
{
var doc = document;
var f = doc.getElementById('myForm');

// show hidden
var el = f.elements.gasto;
el.style.display = "";

// create/insert new
el = doc.createElement("input");
el = f.appendChild(el);
el.name = "newinput";
el.type = "text";
el.value = "";
}

</script>


</body>
</html>

y este es el javascript externo:

Código:

function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);
  
  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;
  
  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);

  // select cell
  var cellRightSel = row.insertCell(2);
  var sel = document.createElement('select');
  sel.name = 'selRow' + iteration;
  sel.options[0] = new Option('text zero', 'value0');
  sel.options[1] = new Option('text one', 'value1');
  cellRightSel.appendChild(sel);
}

si en algo me pueden qyudar que no lo consigo

jcouoh · #5 (**permalink**) 02/09/2008, 09:06

Ya lo conseguí,

Solo me gustaría saber si esta esta correcta la sintaxis y si hay declaraciones no indispensables que puedan resumir el codigo.

Este es el codigo:

Código:

<html>
<head>
<title>Problema</title>

</head>
<body>
<form name="myform" action=#>
<input type=text 
name="gasto" 
value="">

<input type=text 
name="factura" 
value="">
</form>

<button onclick="doIt()">do it</button>

<script>
function doIt()
{
var doc = document;
var f = doc.getElementById('myForm');

// show hidden
var el = f.elements.gasto;
el.style.display = "";
var es = f.elements.factura;
es.style.display = "";

// create/insert new
el = doc.createElement("input");
el = f.appendChild(el);
el.name = "newinput";
el.type = "text";
el.value = "";

es = doc.createElement("input");
es = f.appendChild(es);
es.name = "newinput";
es.type = "text";
es.value = "";


}

</script>


</body>
</html>

David · #6 (**permalink**) 02/09/2008, 09:14

Bueno, un poco más resumido sería:

Código PHP:

  function doIt()
{
var f = document.getElementById('myForm');

// show hidden
f.elements.gasto.style.display = "";
f.elements.factura.style.display = "";

// create/insert new
el = newinput(f);
es = newinput(f);

}
function newinput(f) {
newobj = document.createElement("input");
newobj = f.appendChild(newobj);
newobj.name = "newinput";
newobj.type = "text";
newobj.value = "";
return newobj;
}

jcouoh · #7 (**permalink**) 02/09/2008, 09:19

Perfecto, muchas gracias, una pregunta mas estuve checando en los temas que he puesto, y en el "estado" de ellas siempre aparece abierto, pues nunca los he cerrado, como se cierran? ¿yo los tengo que cerrar?

David · #8 (**permalink**) 02/09/2008, 09:22

No, no necesitas cerrarlos, de hecho solo los Moderadores pueden cerrar temas.

Lo que he visto que algunos suelen hacer cuando solucionan su problema es Editar el Título del Tema, colocando como [SOLUCIONADO] + Título del Tema.

Aunque todo eso es opcional, si quieres puedes dejarlo como está.

jcouoh · #9 (**permalink**) 02/09/2008, 09:29

Muchas gracias, voy a continuar

jcouoh · #10 (**permalink**) 02/09/2008, 09:38

Solo tengo un problema ahora, tengo los dos campos y cuando hago clic en el boton doit, este me muestra dos campos mas, entiendo que uno es gasto y el otro factura, pero me los muestra horizontalmente, yo los quiero en columna,

He puesto un <br> en el form (html)

Código:

<form name="myform" action=#>
<input type=text 
name="gasto" 
value="">
<br>

<input type=text 
name="factura" 
value="">
</form>

pero no se que hacer en el javascript puesto que necesito que aun lado del input gasto1 se muestre el input (child) gasto2 y asi sucesivamente; al igual que a un lado del input factura1 se muestre el input(child) factura2 correspondiente y asi sucesivamente.

Ideas?

David · #11 (**permalink**) 03/09/2008, 09:30

Primero, no uses <br>

.

Para que los elementos creados aparezcan en columna solo agrega esto:

Código PHP:

  newobj.style.display = "block";

jcouoh · #12 (**permalink**) 03/09/2008, 09:40

Gracias por tu respuesta,

El br lo puse en el codigo html que lo uso para poner los dos inputs en columna,

Ahora, cuando puse

Código:

newobj.style.display = "block";

en el javascript, estuvo bien, pues lo que hace es ponerme abajo los campos que se han creado,
pero yo quisiera que cuando se creen se coloquen al lado derecho de cada uno de los inputs ya creados, y si agrego otros, estos se creen tambien al lado derecho y asi sucesivamente

no he podido hacerlo