NO lanza evento onchage

[locoxchacho]

Buenas noches a todos los foreros!

Recurro nuevamente a este foro, como no iba ser de otra forma, en busca de un poco de su gran conocimiento para poder ayudarme a resolver un problema que tengo con JS. El mismo es el siguiente:

Mediante JS, yo voy agregando formularios a mi pagina, para poder subir n archivos. La idea es que, cuando se agregue un archivo, se inicia el upload mediante Ajax (con el famos iframe escondido) y, mediante el evento onchage del input, se agregue un nuevo formulario para que se puedan cargar varios archivos al mismo tiempo. EL codigo es el siguiente:

Código:

var numero = 0;

c= function (tag) { // Crea un elemento
return document.createElement(tag);
}
d = function (id) { // Retorna un elemento en base al id
return document.getElementById(id);
}
e = function (evt) { // Retorna el evento
return (!evt) ? event : evt;
}
f = function (evt) { // Retorna el objeto que genera el evento
return evt.srcElement ?  evt.srcElement : evt.target;
}

function cambia(id){
	document.getElementById(id).innerHTML = "se esta subiendo";
}

addField = function () {
	   container = d('upload');
	   ++numero;
	   
	   span = c('form');
	   span.className = 'form';
	   span.id = 'file' + numero;
	   span.method="post";
	   span.enctype="multipart/form-data";
	   span.action="upload.php";
	   span.target="iframeUpload" + numero;

	   field = c('INPUT');   
	   field.name = 'fotos';
	   field.type = 'file';
	   field.onchange = "javascript: submit();addField();document.getElementById('uploader"+numero+"').innerHTML='<img src=\"fotos/barra.gif\"/>';";
	   field.accept="image/jpg";
	   field.className = 'field';
	   
	   field2 = c('INPUT');   
	   field2.name = 'evento';
	   field2.type = 'hidden';
	   field2.value = document.getElementById('select').value;
	   
	   field3 = c('INPUT');   
	   field3.name = 'numero';
	   field3.type = 'hidden';
	   field3.value = numero;
	   
	   iframe = c('iframe');
	   iframe.className = 'iframe';
	   iframe.id="iframeUpload" + numero;
	   iframe.name="iframeUpload"+numero;
	   
	   subir = c('span');
	   subir.id= "uploader"+numero;
	   subir.className = 'upload';

	   span.appendChild(field);
	   span.appendChild(iframe);
	   span.appendChild(field2);
	   span.appendChild(field3);
	   span.appendChild(subir);
	   container.appendChild(span);
}
removeField = function (evt) {
	lnk = f(e(evt));
	span = d(lnk.name);
	span.parentNode.removeChild(span);
}

ESte funciona perfecto en opera, pero en nigun otro navegador. La funcion addFile sin funciona, pero lo que no se ejecuta correctamente, es el evento onchange del formulario: digamos, yo elijo el primer archivo y la idea seria que se agregue un nuevo formulario y se comienze a subir el otro. Pero esto no sucede.

Alguna idea en qué es lo que puedo andar funcionando mal? Culquier duda, el codigo en funcionamiento se encuentra aqui.

Muchas gracias, espero su ayuda y/o comentarios!

Pablo.

[David]

No asignes el evento onchange como un String. Asígnalo con una función:

Código Javascript:

elemento.onchange = function() {
    /* Código */
}
 

O con el método addEventListener/attachEvent

[locoxchacho]

OK, david, muchas gracias! Ha funcionado de maravillas. Lo unico que no puedo resolver es que yo enviaba el formulario con "ajax", y para eso utilizaba la cadena: "javascript: submit()". Ahora, que es una funcion, no la puedo utilzar: que alternativa existe para enviar el formulario al disparar el evento??

Desde ya, muchas gracias por tu ayuda, un saludo!

PAblo.

[David]

Puedes usar:

Código Javascript:

document.getElementById("id_del_formulario").submit();
 

[locoxchacho]

me ha funcionado perfecto! muchas gracias por tu ayuda, david!!


por ultimo, y no se porque, me ha surgido un problema con la variable numero: la empiezo de cero y teoricamente el primer formulario que se agrega seria formulario1, pues hago ++numero. Ahora, me muestra la barra de progreso en progreso2, en vez de progreso1. Esto lo he solucionando en, cuanto hago el getelementbyId, haciendo un ("formulario"+(numero-1)), y funciona todo perfecto. Pero hay algo del codigo que anda mal, pues no tendria que hacer numero-1. Pero creo que no es de extrema importancia, ya que funciona, pero si alguien ve algun error en el codigo que me pueda haber salteado y por eso sea el error, bienvenido!

aca dejo el nuevo codigo para que lo vean:

Código:

var numero = 0;

addField = function () {
	   container = d('upload');
	   ++numero;
	   
	   span = c('form');
	   span.className = 'form';
	   span.id = 'file' + numero;
	   span.method="post";
	   span.enctype="multipart/form-data";
	   span.action="upload.php";
	   span.target="iframeUpload" + numero;

	   field = c('INPUT');   
	   field.name = 'fotos';
	   field.type = 'file';
	   field.onchange = function(){addField();document.getElementById('uploader'+(numero-1)).innerHTML='<img src="fotos/barra.gif"/>'; document.getElementById('file' + (numero-1)).submit();};
	   field.accept="image/jpg";
	   field.className = 'field';
	   
	   field2 = c('INPUT');   
	   field2.name = 'evento';
	   field2.type = 'hidden';
	   field2.value = document.getElementById('select').value;
	   
	   field3 = c('INPUT');   
	   field3.name = 'numero';
	   field3.type = 'hidden';
	   field3.value = numero;
	   
	   iframe = c('iframe');
	   iframe.className = 'iframe';
	   iframe.id="iframeUpload" + numero;
	   iframe.name="iframeUpload"+numero;
	   
	   subir = c('span');
	   subir.id= "uploader"+numero;
	   subir.className = 'upload';

	   span.appendChild(field);
	   span.appendChild(iframe);
	   span.appendChild(field2);
	   span.appendChild(field3);
	   span.appendChild(subir);
	   container.appendChild(span);
}

Muchas gracias por su ayuda nuevamente!

Pablo.