Boton crear nuevo input en formulario

[Suarsan]

Hola foreros. Tengo un botón en un formulario que me añade un nuevo elemento input. Cada vez que lo pulso añade un nuevo input pero siempre con el mismo id.

Que puedo hacer para que al pulsar el botón me asigne un id dinámico (añadiendo un numero que se incrementa) dependiendo de los inputs que ya haya creados? ¿Debo usar una cookie para ello?

Agradezco cualquier opinion.

[moscrates]

Dolo usar legth para contar los input

[matt_1985]

Esto te podria servir:

Código Javascript:

<script type="text/javascript">
var nextinput = 0;
function AgregarCampos(){
nextinput++;
campo = '<li id="rut'+nextinput+'">Campo:<input type="text" size="20" id="campo' + nextinput + '" name="campo' + nextinput + '"&nbsp; /></li>';
$("#campos").append(campo);
}
</script>
 

Código HTML:

<form id="form" name="form" method="post">
<a href="#" onclick="AgregarCampos();">Agregar Campos</a>
<div id="campos">
 

Saludos.

[NueveReinas]

Iniciado por matt_1985

Esto te podria servir:

Código Javascript:

<script type="text/javascript">
var nextinput = 0;
function AgregarCampos(){
nextinput++;
campo = '<li id="rut'+nextinput+'">Campo:<input type="text" size="20" id="campo' + nextinput + '" name="campo' + nextinput + '"&nbsp; /></li>';
$("#campos").append(campo);
}
</script>
 

Código HTML:

<form id="form" name="form" method="post">
<a href="#" onclick="AgregarCampos();">Agregar Campos</a>
<div id="campos">
 

Saludos.

Lo estoy probando en JSFIDDLE y no funciona.

[NueveReinas]

Bueno, basado en la versión de matt_1985, he creado este JSFIDDLE: http://jsfiddle.net/ndo1yz31/
El problema es que le faltaba declarar la variable campo, y de paso le he añadido estilos.

Código HTML:

<form id="form" name="form" method="post">
    <div id="nuevo_campo" align="center"><p>Agregar Campos</p></div>
    <div id="campos"></div>
</form>
 

Código Javascript:

var nextinput = 0;
 
$("#nuevo_campo").click(function(e) {
    nextinput++;
    var campo = '<li id="rut'+nextinput+'">Campo: <input type="text" size="20" id="campo' + nextinput + '" name="campo' + nextinput + '"&nbsp; /></li>';
    $("#campos").append(campo);
});
 

Código CSS:

li {
    position:relative;
    margin-top:10px;
    margin-bottom:10px;
    list-style:none;
}
 
#nuevo_campo {
    background:#F1F1F1;
    border:1px solid #CCC;
    max-width:150px;
    cursor:pointer;
}
 
#nuevo_campo p {
    padding:10px;
    margin:0;
}
 
#campos {
    margin-top:40px;
    background:#F1F1F1;
    border:1px solid #CCC;
    max-width:500px;
    min-height:40px;
    padding:10px;
}
 

[matt_1985]

exacto nueve reinas fue un error de copy paste del local a fw .