Autoincrementar campos input

[Abite]

Hola,
estoy buscando un codigo que me permita autoincrementar los campos input de un formulario según quiera el visitante, para poder añadir tantas opciones como desee.

¿Alguna idea?

[JavierB]

Hola Abite

¿Te refieres a crear campos en un formulario?

Saludos,

[Abite]

Muschisimas gracias, era justo lo que buscaba!!!

[Abite]

Bueno, se me plantea un pequeño problema con tu codigo, a ver si puedes ayudarme.

Lo he modificado un poco para adaptarlo a mi web:

Código HTML:

	num = 0;
	function crear(obj, contenedor) {
	  num++;
	  fi = document.getElementById(contenedor); 
	  contenedor = document.createElement('div');
	  contenedor.id = 'div' + num;
	  fi.appendChild(contenedor);
	
	  ele = document.createElement('input');
	  ele.type = 'text';
	  ele.size = '50';
	  ele.value = 'http://';
	  contenedor.appendChild(ele);
	  
	  ele = document.createElement('input');
	  ele.type = 'button';
	  ele.value = 'Borrar';
	  ele.name = 'div' + num;
	  ele.onclick = function () {borrar(this.name, contenedor)}
	  contenedor.appendChild(ele);
	}
	function borrar(obj, contenedor) {
	  fi = document.getElementById(contenedor);
	  fi.removeChild(document.getElementById(obj));
	}

Me funciona bien lo de crear campos nuevos, pero al borrar me dice que el objeto fi es nulo.

¿Donde he metido la pata?

Y una segunda cuestion.

A la hora de recoger las variables enviadas desde estos campos, se supone que son $div1, $div2,...

Un saludo

[JavierB]

Hola de nuevo.

Código:

function crear(obj, contenedor) {
	  num++;
	  fi = document.getElementById(contenedor); 
	  contenedor = document.createElement('div');

Utilizas la variable contenedor y por eso pierde el valor que tenía al llamar a la función. He modificado un poco tu código:

Código:

num = 0;
	function crear(contenedor) {
	  num++;
	  fi = document.getElementById(contenedor); 
	  cont = document.createElement('div');
	  cont.id = 'div' + num;
	  fi.appendChild(cont);
	
	  ele = document.createElement('input');
	  ele.type = 'text';
	  ele.size = '50';
    ele.name = 'algo'+num; // esto te servirá para recoger los valores en tu PHP
	  ele.value = 'http://';
	  cont.appendChild(ele);
	  
	  ele = document.createElement('input');
	  ele.type = 'button';
	  ele.value = 'Borrar';
	  ele.name = 'div' + num;
	  ele.onclick = function () {borrar(this.name, contenedor)}
	  cont.appendChild(ele);
	}

Espero que te funcione. Saludos,

[Abite]

Muchas gracias, funciona perfectamente!

[Abite]

Se me olvidaba comentar que el ejemplo funciona perfectamente, pero si alguien va a utilizar el codigo y necesita después usar los datos que se envian desde el input, hay que enviarlos como array:

Código:

num = 0;
	function crear(contenedor) {
	  num++;
	  fi = document.getElementById(contenedor); 
	  cont = document.createElement('div');
	  cont.id = 'div' + num;
	  fi.appendChild(cont);
	
	  ele = document.createElement('input');
	  ele.type = 'text';
	  ele.size = '50';
          ele.name = contenedor+'[]'; // <-Asi generamos el array
	  ele.value = 'http://';
	  cont.appendChild(ele);
	  
	  ele = document.createElement('input');
	  ele.type = 'button';
	  ele.value = 'Borrar';
	  ele.name = 'div' + num;
	  ele.onclick = function () {borrar(this.name, contenedor)}
	  cont.appendChild(ele);
	}

Y luego para recuperar los datos:

Código PHP:

  foreach ($contenedor as $valor) {
    print $valor."<br />";
} 
   

[jbastus]

Abite no entiendo esta linia, a ver si puedes ayudarme.

Se supone que entre [] debe haver algo? quizá la variable num?

ele.name = contenedor+'[]'; // <-Asi generamos el array

[JoelG]

ya se que el tema es algo viejo, pero es el problema que tengo y no lo he podido solucionar.

estoy generando unos input type text, estos se generan al momento de dar clic en un select que contiene numeros entre 1 y 20, dependiendo el numero que se escoja esa es la cantidad de inputs que se generan.

codigo html del select

Código HTML:

<select name="nrocuotas" id="nrocuotas" onChange="cambiaselect ();">
<option value="{$getnrocuotas}" selected></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                          </select> 

Codigo js para generar los input

Código HTML:

function cambiaselect (){
	var numeco = document.getElementById("nrocuotas").value;
	document.getElementById("divnrocuotas").innerHTML = '';
	for(var i = 1; i <= numeco ; i++){
    	p = document.createElement("input");
		elmBR = document.createElement('br');
    	p.type = "text";
		p.size = "10";
    	p.name = "fnrocuo"+'[]';
		p.id = "fnrocuo"+'[]';
		p.maxlength = "10";
		elmText = document.createTextNode("Cuota Nro. "+i+": ");
		elmBlank = document.createTextNode(" ");
		document.getElementById("divnrocuotas").appendChild(elmText);
		document.getElementById("divnrocuotas").appendChild(elmBlank);
		document.getElementById("divnrocuotas").appendChild(p);
		document.getElementById("divnrocuotas").appendChild(elmBR);
		Calendar.setup({
            	inputField     :    "fnrocuo"+'[]',
            	ifFormat       :    "%Y-%m-%d",
            	button         :    "fnrocuo"+'[]',
            	singleClick    :    true
            });
		}//fin for
	}

El problema que tengo es que los input no me pasan.

[JoelG]

Al pareser mi problema esta relacionado con el hecho que utilizo smarty, no he podido saber por que no funciona bien

[PhPedro]

Hola a todos:

Estoy utilizando el código que hizo JavierB, solo modifique el tipo de input por text en lugar de file y le añadi un elemento select según otro ejemplo que encontré en otro lugar del foro:

sel=document.createElement('select'); //crear select
for(i=0;i<3;i++) {
op=document.createElement('option'); //crear varios option para el select
op.innerHTML=i;
sel.appendChild(op);
}
document.body.appendChild(sel);

Todo funciona bien, pero lo que me gustaria es que el listbox que se crea muestre valores de texto que tengo que asignarle y no numeros, ¿existe alguna forma de conseguir eso? Gracias

[JavierB]

Hola PhPedro

A ver si te sirve esto:

Código:

txt = ['texto 1','texto 2','texto 3']
sel=document.createElement('select'); //crear select
for(i=0;i<3;i++) {
op=document.createElement('option'); //crear varios option para el select
op.innerHTML=txt[i];
sel.appendChild(op);
}
document.body.appendChild(sel);

Saludos,

[PhPedro]

Hola JavierB:

Si, funciono perfectamente...¡gracias totales!

:)