Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/06/2011, 04:21
fergol
 
Fecha de Ingreso: junio-2011
Mensajes: 1
Antigüedad: 9 años, 5 meses
Puntos: 0
Problema con formularios en Ajax

Antes de empezar, decir que soy nuevo en esto de la programación web, he hecho mis pinitos en c, c++ y java pero en esto soy totalmente novato, así que seguramente halla metido la pezuña hasta el fondo. Aquí va la duda:
Quiero insertar los datos de un formulario en una base de datos mysql. Para ello tengo la pagina principal (en php), una clase js donde se realiza la validación y la creación del ajax, y un php que se encarga de subir los datos a la base.
La cosa queda así:
La parte del formulario:
Código HTML:
<?php
	include("./php/configuracion.inc.php");	
	$link=conectar($bd_host,$bd_usuario,$bd_pwd,$bd_nombre);	
	$c=mysql_query("select * from Dias",$link);
	?>
    		<form id="formlista" >
                <table class="Discotecas">
  <tr>
    <td width="260" height="30" style="text-align:right"><label>Día: &nbsp;</label></td>
    <td width="334"><select id="Dias" onChange='cargaDias(this.value)'>
					<option value="0">- Selecciona un día -</option>
					<?php
						echo mysql_error();
						while($r=mysql_fetch_array($c)){
							echo "<option value=".$r['idDia'].">".$r['nombreDia']."</option>";
						}
					?>
				</select></td>
  </tr>
  <tr>
    <td height="30" style="text-align:right"><label>Discotecas:&nbsp; </label></td>
    <td><select id="Discoteca" disabled="disabled" onChange='cargaDisco(this.value)'>
				</select><img src="images/loading.gif" alt="Cargando" name="imgDisco" width="30" height="26" id="imgDisco" style="display:none"/></td>
  </tr>
      <tr>
    <td height="30" style="text-align:right;"><label>Hora límite: &nbsp;</label></td>
    <td><div id="Hlimite" class="listas" style="height:20px; width:70px"></div></td>
  </tr>
  <tr>
    <td height="30" style="text-align:right; vertical-align:top"><label>Evento: &nbsp;</label></td>
    <td><div id="Evento" class="listas" style="height:50px; width:320px"></div></td>
  </tr>
    <tr>
    <td height="30" style="text-align:right; vertical-align:top"><label>Información:&nbsp;
    </label></td>
    <td><div id="Informacion" class="listas" style="height:50px; width:320px"></div></td>
  </tr>
  <tr>
  <td height="30" style="text-align:right;">
  <label>Personas en lista:&nbsp;</label>
  </td>
  <td><input class="input1" type="text" id="lisNom1"
  style="width:140px">
  &nbsp;&nbsp;+&nbsp;&nbsp;
  <select id="mas1" style="width:40px">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  </select>
  </td>
  </tr>
  <tr>
  <td></td>
  <td>
  <input class="input1" type="text" id="lisNom2"
  style="width:140px">
  &nbsp;&nbsp;+&nbsp;&nbsp;
  <select id="mas2" style="width:40px">
  <option value="0">0</option>
  <option value="1">1</option>
  </select>
  </td>
  </tr>
    <tr>
  <td height="30" style="text-align:right;"><label>Teléfono:&nbsp;</label></td>
  <td>
  <input class="input1" type="text" id="listelefono"
  style="width:140px"></td>
  </tr>
      <tr>
  <td height="30" style="text-align:right;"><label>e-mail:&nbsp;</label></td>
  <td>
  <input class="input1" type="text" id="lisemail"
  style="width:140px"></td>
  </tr>
        <tr>
  <td></td>
  <td>
  <p></p>
  <button id="botonEnviar" class="boton" onClick="validaListas()">Enviar</button></td>
  </tr>
</table>
			 </p>
    		</form> 
He de decir también que esta parte utiliza dos select dependientes, pero supongo que para esto no son relevantes.

La clase js:
Código:
// Variables para setear
onload=function() 
{
	lisNom1=document.getElementById("lisNom1");
	lisNom1=document.getElementById("lisNom1");
	mas1=document.getElementById("mas1");
	mas2=document.getElementById("mas2");
	listelefono=document.getElementById("listelefono");
	lisemail=document.getElementById("lisemail");
	Dia=document.getElementById("Dias");
	Discoteca=document.getElementById("Discoteca");
	formlista=document.getElementById("formlista");
	urlDestino2="../php/lismail.php";
	
	preCarga("images/ok.gif", "images/loading.gif", "images/error.gif");
}

function preCarga()
{
	imagenes=new Array();
	for(i=0; i<arguments.length; i++)
	{
		imagenes[i]=document.createElement("img");
		imagenes[i].src=arguments[i];
	}
}

function nuevoAjax()
{ 
	var xmlhttp=false; 
	try 
	{ 
		// No IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
	}
	catch(e)
	{ 
		try
		{ 
			// IE 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
		} 
		catch(E) { xmlhttp=false; }
	}
	if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); } 
	return xmlhttp; 
}

function limpiaForm()
{
	for(i=0; i<=1; i++)
	{
		form.elements[i].className=claseNormal;
	}
	document.getElementById("inputComentario").className=comentNormal;
}

function campoError(campo)
{
	campo.className=claseError;
	error=1;
}

function ocultaMensaje()
{
	divTransparente.style.display="none";
}

function muestraMensaje(mensaje)
{
	divMensaje.innerHTML=mensaje;
	divTransparente.style.display="block";
}

function eliminaEspacios(cadena)
{
	// Funcion para eliminar espacios delante y detras de cada cadena
	while(cadena.charAt(cadena.length-1)==" ") cadena=cadena.substr(0, cadena.length-1);
	while(cadena.charAt(0)==" ") cadena=cadena.substr(1, cadena.length-1);
	return cadena;
}

function validaLongitud(valor, permiteVacio, minimo, maximo)
{
	var cantCar=valor.length;
	if(valor=="")
	{
		if(permiteVacio) return true;
		else return false;
	}
	else
	{
		if(cantCar>=minimo && cantCar<=maximo) return true;
		else return false;
	}
}

function validaCorreo(valor)
{
	var reg=/(^[a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30}$)/;
	if(reg.test(valor)) return true;
	else return false;
}

function validaForm()
{
	limpiaForm();
	error=0;
	
	var nombre=eliminaEspacios(form.inputNombre.value);
	var correo=eliminaEspacios(form.inputCorreo.value);
	var comentarios=eliminaEspacios(form.inputComentario.value);
	
	if(!validaLongitud(nombre, 0, 4, 50)) campoError(form.inputNombre);
	if(!validaCorreo(correo)) campoError(form.inputCorreo);
	if(!validaLongitud(comentarios, 0, 5, 500)) campoError(form.inputComentario);
	
	if(error==1)
	{
		var texto="<img src='images/error.gif' alt='Error'><br><br>Error: revisa los campos en rojo.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
		muestraMensaje(texto);
	}
	else
	{
		var texto="<img src='images/loading.gif' alt='Enviando'><br>Enviando...<br><br><button style='width:60px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ocultar</button>";
		muestraMensaje(texto);
		
		var ajax=nuevoAjax();
		ajax.open("POST", urlDestino, true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("nombre="+nombre+"&correo="+correo+"&comentarios="+comentarios);
		
		ajax.onreadystatechange=function()
		{
			if (ajax.readyState==4)
			{
				var respuesta=ajax.responseText;
				if(respuesta=="OK")
				{
					var texto="<img src='images/ok.gif' alt='Ok'><br>Gracias por tu mensaje.<br>Te responderemos en la mayor brevedad posible.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
				}
				else var texto="<img src='error.gif'><br><br>Error: intentalo más tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
				
				muestraMensaje(texto);
			}
		}
	}
}

function validaTel(valor)
{
	if( !(/^\d{9}$/.test(valor))) return false;
	else return true;
	
}

function validaListas()
{
	
	var lisNom1=eliminaEspacios(formlista.lisNom1.value);
	var lisNom2=eliminaEspacios(formlista.lisNom2.value);
	var listelefono=eliminaEspacios(formlista.listelefono.value);
	var lisemail=eliminaEspacios(formlista.lisemail.value);
	var resultado="Errores:\n";
	var error=0;
	
	if(!validaLongitud(lisNom1, 0, 4, 50)){
		 resultado+="-Debes rellenar el campo 'Personas en lista'\n";
		 error=1;
	}
	if(!validaCorreo(lisemail)){
		 resultado+="-Debes rellenar tu e-mail\n";
		 error=1;
	}
	if(!validaTel(listelefono)){
		 resultado+="-Debes rellenar el campo número\n";
		 error=1;
	}
	
	if(error==1) alert(resultado);
	else
	{		
		var ajax=nuevoAjax();
		ajax.open("POST", urlDestino2, true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("nombre1="+lisNom1+"&nombre2="+lisNom2+"&mas1="+mas1+"&mas2="+mas2+"&email="+lisemail+"&telefono="+listelefono+"&Dia="+Dia+"&Discoteca="+Discoteca);
		
		ajax.onreadystatechange=function()
		{
			if (ajax.readyState==4)
			{
				var respuesta=ajax.responseText;
				if(respuesta=="OK")
				{
					alert("Apuntado en la lista. Revisa tu correo por favor");
				}else
				alert("Ocurrió un error, intentalo de nuevo mas tarde");
				
			}
		}
	}
}
// Mensajes de ayuda

if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
else navegador=1;
Este js tiene dos validadores para un formulario de contacto y para el formulario principal. El que interesa es ValidaListas()

Y por último el php:
Código PHP:
<?php
if($_POST)
{
    include(
"php/configuracion.inc.php");    
    foreach(
$_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));
    
$link=conectar($bd_host,$bd_usuario,$bd_pwd,$bd_nombre);    
    
mysql_query("insert into reservas(idDia,discoteca,nombre1,mas1,nombre2,mas2,email,telefono) VALUES($Dia,$Discoteca,$nombre1,$mas1,$nombre2,$email,$telefono)",$link);
        echo 
"OK";
}
echo 
"0K";
?>
El caso es que por alguna razón no funciona y en el js sale por la rama de error.

Muchas gracias de antemano y perdonad lo farragoso del código, como he dicho, soy novato.