Guardar valor en campos dinamicos

[solovoy]

Hola de nuevo. Estoy aprendiendo a programar y quise empezar con una pagina de letras. Lo que estoy haciendo ahora es un formulario que permita ingresar un disco a la pagina. Como los discos no tienen siempre la misma cantidad de temas, lo que hice fue un campo en el que se puedan ingresarla cantidad de temas que tiene el disco y que la pagina muestre el numero de campos de texto correspondientes para ingresar los nombres de todos los temas.

El problema que me encontre es que si un usuario ingresa la cantidad de temas, despues todos los nombres de los temas y al final se da cuenta que en realidad el disco tiene un tema mas, entonces al cambiar el numero de temas, los valores de todos los demas campos se borran. O sea, tiene que ingresar todo de nuevo.

El codigo que tenia en mente y que pensaba que podia funcionar es el siguiente:

Código Javascript:

var temas = getXmlHttpRequestObject();
 
var cantidadanterior = 0;
 
function cantidadTemas() {
    if (temas.readyState == 4 || temas.readyState == 0) {
        var str = document.getElementById('cantidad').value;
        if (!isInteger(str) ) {
            return;
        }
        var ss = document.getElementById('temas')
        ss.innerHTML = '';
        var x = new Array();
        if (cantidadanterior != 0) {
            for (i=1;i<=cantidadanterior;i++) {
                eval("x[i] = document.getElementById('tema"+i+"').value");
            }
        }
        for (i=1 ; i<=str; i++) {
            var sugges = i + '. <br /><input type="text" id="tema' + i + '" name="tema' + i +'" autocomplete="off" /><br />';
            ss.innerHTML += sugges;
            if (cantidadanterior != 0) {
                eval("document.getElementById('tema"+i+"').value = x[i]");
            }
            if (i==str) {
                ss.innerHTML += '<br />';
            }
        }
        cantidadanterior = document.getElementById('cantidad').value;
    } 
}
 

Obviamente, ese codigo no funciona y es por eso que hago la consulta. Supongo que habra otras formas, pero no encuentro como.

Muchas Gracias.

[IsaBelM]

crea un campo y clonalo con con el método cloneNode()

[solovoy]

No conozco bastante esa funcion pero por lo que vi me clonaria todo el campo. El problema es que al clonar todo el campo, tambien clonaria la id por lo cual no la podria diferenciar a la hora de pasar el formulario para que se guarde en la base de datos.

Actualizo:

Encontre la solucion. El error en el codigo de arriba fue que yo tomaba los valores de los campos despues del ss.innerHTML = '' osea que cuando buscaba los valores no habia nada porque ya se habia borrado todo.

Despues el problema era que no me asignaba el valor al campo. No se porque no me dejaba ingresar los valores en el for en el que creo el campo. Asi que lo solucione haciendo otro for. Ahora hay dos for, uno que crea los campos y otro que les asigna el valor que tenian antes del cambio.

Finalmente el codigo quedo asi:

Código Javascript:

var cantidadanterior = 0;
 
var x = new Array();
 
function cantidadTemas() {
        var str = document.getElementById('cantidad').value;
        if (!isInteger(str) ) {
            return;
        }
        if (cantidadanterior != 0) {
            for (i=1;i<=cantidadanterior;i++) {
                x[i] = document.getElementById('tema'+i).value;
            }
        }
        var ss = document.getElementById('temas')
        ss.innerHTML = '';
        for (i=1 ; i<=str; i++) {
            var sugges = i + '. <br /><input type="text" id="tema' + i + '" name="tema' + i +'" autocomplete="off" ';
            sugges += '/><br />';
            if (i==str) {
                sugges += '<br />';
            }
            ss.innerHTML += sugges;
        }
        for (i=1 ; i<=str; i++) {
            if (cantidadanterior != 0 && typeof x[i] != 'undefined') {
                document.getElementById('tema'+i).value = x[i];
            }
        }
        cantidadanterior = document.getElementById('cantidad').value;
}
 

[IsaBelM]

Iniciado por solovoy

No conozco bastante esa funcion pero por lo que vi me clonaria todo el campo. El problema es que al clonar todo el campo, tambien clonaria la id por lo cual no la podria diferenciar a la hora de pasar el formulario para que se guarde en la base de datos.

la id no se usa para recoger los campos e insertarlos, se usa el atributo name. en cuanto a que se clona la id, tienes razón pero se salva con algo como esto

var f = campoaclonar.cloneNode(true);
f.id = '';

con una cuatro o cinco líneas de código está hecho