Urgente ayuda sobre creacion de text fields adicionales con js

[jiten]

Amigos puse este código que funciona excelente con IE, pero no pasa nada con Firefox :

Se supone que al hacer click en el bottón "(+) Aumenta un campo de texto" éste me debería añadir más campos , tanto en IE como en Firefox lo hace, pero a diferencia de IE, en Firefox elimina los valores de los anteriores text fields en caso de que ya haya escrito algo dentro de ellos.... por qué señor por qué ???


<script language="javascript">

$nummaxrooms=1;
fields = 0;
function addInput() {
if (fields <= 5)
{
document.getElementById('text').innerHTML += "<br>Room type name : <input type='text' name='roomtypename"+fields+"' class='style10'/> Quantity : <input type='text' name='roomqty"+fields+"' class='style10' size='9'/> Rack Price us$: <input type='text' name='roomrackprice"+fields+"' class='style10' size='9'/><br>";
fields += 1;
}
else
{
alert("Sólo se pueden 5 registros.");
document.form.add.disabled=true;return;
}

}

//
//... y en el body (formulario) el botón es :
//

<input type="button" onclick="addInput()" name="add" value="(+) Aumenta un campo de texto" />



Alguna ayuda por favor ?

[zerokilled]

sucede que los campos no tienen un valor predeterminado. de modo que cuando usas innerHTML este toma la fuente original y la vuelve a escribir en el documento. o sea, lo que el usuario escribe no queda grabado en el atributo value. para comprobarlo, intenta tomar el valor con el metodo getAttribute("value"), veras que te devuelve un string vacio independientemente lo que el usuario escribio. la solucion es simplemente usar metodos del DOM para crear los elementos en lugar de innerHTML.

Código:

<script language="javascript">
$nummaxrooms=1;
fields = 0;
function addInput() {
if (fields < 5){
var target = document.getElementById('text');
var p = document.createElement("p");

p.appendChild(setText("Room type name: "));
p.appendChild(setInput("text", "roomtypename"+fields, "style10"));
p.appendChild(setText("Quantity: "));
p.appendChild(setInput("text", "roomqty"+fields, "style10"));
p.appendChild(setText("Rack Price us$: "));
p.appendChild(setInput("text", "roomrackprice"+fields, "style10"));
target.appendChild(p);
fields++;
}else{
alert("Sólo se pueden 5 registros.");
document.form.add.disabled=true;return;
}

function setText(text){
return document.createTextNode(text);
}

function setInput(type, name, classname){
var input = document.createElement("input");
input.setAttribute("type", type);
input.setAttribute("name", name);
input.className = classname;
return input;
}
}

</script>
<input type="button" onclick="addInput()" name="add" value="(+) Aumenta un campo de texto" />
<p id="text"></p>

[jiten]

Amigo mio: usé el codigo que me diste pero tengo 2 errores :

el primero (apenas cargo la pagina) es :

"expected identifier"

y la otra sucede cada vez que hago click en el boton "Add"

que puede estar faltando ??? agradecere tu respuesta, saludos,

[zerokilled]

curioso, en Fx me funciona perfecto y no lo habia verificado en iexplorer. en todo caso, es el error es porque utilice una palabra reservada en la funcion setInput, class. simplemente cambia el nombe del argumento.

Código:

function setInput(type, name, classname){
var input = document.createElement("input");
input.setAttribute("type", type);
input.setAttribute("name", name);
input.className = classname;
return input;
}

[jiten]

Zero killed :


mira, ahora ya cambié y funciona la parte de crear nuevos campos de "textfield", pero sigue con el tema de que si tu rellenas los campos y luego sigues presionando el boton "add" aumenta un nuevo text field pero borra los valores que estaban escritos en los anteriores . en otras palabras , si sigues estos pasos :

1) crea 2 campos de texto
2) rellenalos con cualquier texto
3) aumenta (add) un campo de texto más
4) ERROR ---> aumentará, pero lo que se rellenó en el punto 2 se borró con esto.

Es precisamente lo que quiero evitar... puedes probarlo asi ?

[zerokilled]

!¿en serio?! a mi no me sucede eso, aun siguiendo tus pasos. me funciona en iexplorer 7 y Fx 3.5.2 ¿no estaras probando alguna version antigua? o bien limpia la cache del navegador, no sea que este cargando desde la cache un archivo antiguo. presiona CTRL + F5 para obligar al navegador cargar los archivos desde la fuente original. te aseguro que el DOM no interfiere con los campos creados.

[jiten]

ohh perdon... refresqué mal mi pagina... ahora corre maravillosamente bien ! muchas gracias !

[jiten]

Una pregunta adicional... y que pasaria si tambipen quiero definir el atributo "size" para los campos de texto ? es decir ponerles por ejemplo un tamaño de 20 al primero y de 9 a los dos siguientes ? ... te agradezco,

[zerokilled]

no pasaria nada, simplemente hay que añadirlos tienes que agregar una linea a la funcion setInput.

Código:

function setInput(type, name, classname, size){
var input = document.createElement("input");
input.setAttribute("type", type);
input.setAttribute("name", name);
input.setAttribute("size", size);
input.className = classname;
return input;
}

ahora, cada vez que llamas a la funcion tienes que incluir el ultimo parametro size. un ejemplo

Código:

p.appendChild(setInput("text", "roomtypename"+fields, "style10", "20"));
p.appendChild(setInput("text", "roomqty"+fields, "style10", "9"));
p.appendChild(setInput("text", "roomrackprice"+fields, "style10", "9"));

[jiten]

excelente ! lo habia pensado asi ylo hice antes pero no me salia porque ponia el "Size " antes de "class"... habrá algun motivo especial ? bueno.. no imporat quizas ya , porque funciona... gracias !

[zerokilled]

el orden no tiene mucha relevancia, pudo haberse ubicado en la primera linea o despues de classname. lo unico importante es que todas las lineas deben estar antes del return.

[jiten]

Iniciado por zerokilled

el orden no tiene mucha relevancia, pudo haberse ubicado en la primera linea o despues de classname. lo unico importante es que todas las lineas deben estar antes del return.

Zero illed : una pregunta, cómo hago para hacer una sumatoria de los valores de estos nodos creados ? estoy probando con :

for (k=0;k<=5;k++)
{
$sumando_room=document.form."roomtypename"+k.value ;
$suma=$suma+$sumando_room;
}

pero me bota error...

[zerokilled]

cuando tu quieras utilizar una variable como parte del nombre de una propiedad, metodos u objeto tienes que utilizar sintaxis un tanto diferente a la de punto. realmente no es nada nuevo en el lenguaje, es simplemente tratar el objeto como si fuera un array. si! cualquier objeto puede utilizarse de esa forma. luego, dentro de los corchetes poner el nombre junto con la variable. por tanto...

Código:

// la siguiente linea;
$sumando_room=document.form."roomtypename"+k.value ;

// se transforma a;
$sumando_room=document.form["roomtypename"+k].value ;

por ultimo, considera que cualquier valor leido desde un elemento HTML se tratan como un string, independientemente del contenido. en tu caso estas leyendo la propiedad value el cual tienes que convertir el valor a numerico antes de operar con el.

[jiten]

Gracias. Cambié la linea, pero cuando corro elprograma me sale un error del tipo :

" document.form["roomtypename"+k].value" is null or not an object "

qué puede estar pasando ?

[zerokilled]

en el codigo no le veo nada mal. quiero decir, error de sintaxis no es. debe ser que las referencias no estan correctas. asegurate de que los inputs creados esten dentro del formulario, de lo contrario no te va a funcionar. tambien asegurate que el nombre utilizado en document.form sea el correcto.