Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema con formularios en Ajax

Estas en el tema de Problema con formularios en Ajax en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/06/2011, 03:21
 
Fecha de Ingreso: junio-2011
Mensajes: 1
Antigüedad: 9 años, 4 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.

Etiquetas: ajax, mysql, php, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:09.