formulario dinamico Ajax

[bichomen]

Estoy automatizando una función, para no tener que crear un a función nueva cada vez que creo un formulario, la idea es sencilla, en el id de cada elemento le asigno un número:

Código:

id="elemento1"
id="elemento2"
id="elemento3"
...

luego para enviar el formulario:

Código HTML:

<form name="for" action="" onSubmit="formulario('url','x')"> <--- la x es el numero de elementos que tiene el formulario si pongo 4 inputs, por ejemplo,  pongo un 4 

y aquí el ajax en cuestión:

Código HTML:

function nuevoAjax()
{
	var xmlhttp=false;
 	
	try 
	{
 		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 	} 
	catch (e) 
	{
 		try 
		{
 			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 		} 
		
		catch (E) 
		{
 			xmlhttp = false;
 		}
  	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
	{
 		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

function formulario(url,elementos)
{
	ele = new Array();
	var element, ele1, elemento;	
	
	contenedor = document.getElementById("detalles");
		
	for(var i=1; i<=elementos; i++)
	{
		element = 'elemento' + i;
		ele[i] = document.getElementById(element).value;
	}
	
	ajax=nuevoAjax();
	ajax.open("POST",url,true);
	ajax.onreadystatechange=function() 	
	{
		if (ajax.readyState==4) 
		{
			contenedor.innerHTML = ajax.responseText;
	 	}
		else 
		{
			contenedor.innerHTML = 'Cargando...';
	  	}
	}	
	ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	
	for(var i=1; i<=elementos; i++)
	{
		ele1 = 'elemento' + i;
		
		if(ele1 == 'elemento1')
		{
			elemento = ele1 + '=' + ele[i];
		}
		else if(ele1 != 'elemento1')
		
		elemento +=  '&' + ele1 + '=' + ele[i];
	}
	
	ajax.send(elemento);
}

Pero no acaba de funcionar, ¿donde esta el fallo?, gracias


bichomen

[caricatos]

Hola:

Si tienes un formulario con action="", estás indicando que se envíe a si mismo (la propia página), y por lo que veo usas un botón submit para la llamada ajax, y no cancelas el envío, así que lo que pasa es que se haga o no la petición, estás forzando la recarga de la página...

Puedes usar un botón normal (si no se debe enviar el form es lo que te aconsejo), o cancelar el form añadiendo detrás de tu llamada esa cancelación (return false)...

Otra cosa que veo es que los datos los estás pidiendo a una url "url"... podría ser tu intención, pero no lo creo

Saludos

[bichomen]

El action tiene que estar vacío para enviar la función, en cuanto a lo que me comentas del botón normal del submit, lo que tengo es esto:

Código HTML:

<input id="submit" name="submit" type="submit" value="Enviar"> 

Que aunque lo envío, no lo tramito, ya que solo que solo es para lanzar el evento onSubmit, de echo todo los formularios los tengo así y me funcionan, pero lo que estoy intentando hacer, es crear, uno genérico, para no tener que crear una función especifica para cada formulario, como venia haciendo hasta ahora.


bichomen

[caricatos]

Iniciado por caricatos

Hola:

Si tienes un formulario con action="", estás indicando que se envíe a si mismo (la propia página), y por lo que veo usas un botón submit para la llamada ajax, y no cancelas el envío, así que lo que pasa es que se haga o no la petición, estás forzando la recarga de la página...

Aunque no tramites el envío, con ese action y un botón submit, el envío se realiza... chequea la url, ya que al no definir el método, se supone get, y en tu página encontrarás ?[&]submit=Enviar junto al resto de parámetros... y también considera la otra parte de mi respuesta (claro que el fallo podría ser otro).

Saludos

[bichomen]

Pues funciona, el error era un pequeño despistes a la hora de insertar en la base de datos, aun así le e quitado el action="" como comentas, para que no reenvíe toda página. Gracias por todo si se puede depurar mas el código agradecería cualquier consejo.


bichomen