Ayuda formulario Ajax + Mootools

[ajalex]

hola que tal, estube haciendo un formulario con ajax y mootools alprincipio si funciono perfectamente, y no se que movi y ya no.. estube revisandolo y lo hize de nuevo y no jalo no se que pueda ser, miren el js tiene esto:

este es: contacto.js

Código HTML:

var validar = function (c) {
	
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(c)){
	
	return 1; } else { return 0; }
		 
}
var show = function(e,t,v) {
	
	e.effect('opacity',	{
	duration: 700,
	onComplete: function(){
		
		if(v!=1) {
			e.setProperties({ 'class': 'stop' });	
		} else {
			
			e.removeProperty('class');
		}
		
		
		e.setHTML(t).effect('opacity', {duration: 700}).start(0,1);
		
	}
	}).start(1,0);
	
	
}

window.addEvent('domready', function(){
									 
									 
	var c = $('contacto');
	var msj = $('mensajes');
	c.addEvent('submit', function(e){
								 
		new Event(e).stop();
		if(c.nombre.value == '') {
			show(msj,'<img src="images/alert.png" alt="" width="50" height="50" /><br>No agregaste tu nombre');
		} 
		else if(c.mail.value == '') {
			show(msj,'<img src="images/alert.png" alt="" width="50" height="50" /><br>No has agregado tu correo electr&oacute;nico');	
		}
		else if(validar(c.mail.value)==0) {
			show(msj,'<img src="images/alert.png" alt="" width="50" height="50" /><br>El correo electr&oacute;nico que a&ntilde;adiste no es v&aacute;lido');		
		}
		else if(c.asunto.value=='') {	
			show(msj,'<img src="images/alert.png" alt="" width="50" height="50" /><br>Es necesario agregar un asunto para el mensaje');	
		}
		else if(c.mensaje.value=='') {
			show(msj,'<img src="images/alert.png" alt="" width="50" height="50" /><br>Para enviar es necesario escribir un mensaje');
		}  else { 
			show(msj,'<img src="images/spinner.gif" alt="" /><br>Enviando...');
				new Ajax('includes/contacto.php', {
			   		method: 'post',
			   		data: c,
					onComplete:function(e) {
					show(msj, e, 1);
					show(msj,'<img src="images/okfull.png" alt="" width="50" height="50" /><br>Se ha enviado con &eacute;xito, el mensaje, en un lapso no mayor a 24 horas nos pondremos en contacto<br><strong>Gracias</strong>');
					

					}
				}).request();				
				

		}
		
		
	});	


});

y el formulario es este

Código HTML:

 <form id="contacto">
<div id="block_center_solo">
<div id="form">
  <h1><? echo "$row[titulo]";?></h1>
  <h2><? echo "$row[text]";?></h2>
      <div id="block_center">
      <label for="nombre">Tu Nombre: <br />
      <input name="nombre" id="nombre" class="caja" type="text" />
      </label>
      <label for="email">Tu E-mail: <br />
      <input name="email" id="email" class="caja" type="text" />
      </label>
      <label for="telefono">Tu Telefono: <br />
      <input name="telefono" id="telefono" class="caja" type="text" /> 
      </label>
      <label for="direccion">Tu Direccion: <br />
      <input name="direccion" id="direccion" class="caja" type="text" />
      </label>
      </div>
      <div id="block_right">
      <label for="depto">Departamento: <br />
      <select name="depto" class="caja" id="depto">
      <option value="" selected="selected">------------- Selecciona -------------</option>
	<? $result = $db->query("select * FROM normal_contact_mail");
	while(list($id,$title,$mail) = $db->fetch_row($result)) {
	echo "<option value=\"$mail\">$title</option>\r\n"; }?>
	  </select>
      </label>
      <label for="asunto">Asunto: <br />
      <input name="asunto" type="text" class="caja" id="asunto" />
      </label>
      <label for="mensaje">Mensaje: <br />
      <textarea id="mensaje" name="mensaje" class="textarea" rows="" cols=""></textarea>
      </label>

      <div align="center"><input id="botonenvio" onclick="verificarDatosCorreo(); return false;" type="submit" value="Enviar mensaje" class="boton2" /></div>
      <input name="enviar" id="enviar" value="1" type="hidden" />
      </div>

</div>
</div>
<div id="block_center_solo"><br />
    <div id="mensajes"></div>
</div>
  </form> 

y el contacto.php es:

Código PHP:

      if ($_POST[enviar] = 1) {
    $sender_name = $_POST[nombre];
    $sender_email = $_POST[email];
    $sender_phone = $_POST[telefono];
 
    $sender_address = $_POST[direccion];
    $depto = $_POST[depto];
    $sender_asunto = $_POST[asunto];
    $message = $_POST[mensaje];
    $subject = "Formulario de Contacto en Esc. Part. Normal Sup.";
    $msg = "Escuela Particular Normal Superior\n\n";
    $msg .= "Nombre: $sender_name\n";
    $msg .= "E-mail: $sender_email\n";
    $msg .= "Asunto: $sender_asunto\n";
    $msg .= "Telefono: $sender_phone\n";
    $msg .= "Direccion: $sender_address\n";
    $msg .= "Mensaje: $message\n\n";
    $to = "[email protected]";
    $mailheaders = "From: $sender_name <$sender_email>\n";
    $mailheaders .= "Reply-To: $sender_email\n\n";
    mail($depto, $subject, $msg, $mailheaders);
    } 
   

funcionaperfectamente el ajax con los efectos pero no envia el mail, espero me ayuden!!!

[GatorV]

Tema trasladado a Frameworks.

[ajalex]

Ya resolvi el problema, tube que hacerlo de nuevo, y la version de mootools que usaba era la 1.2 y lo hize con la v 1.1

si alguien le interesa el formulario aqui les dejo todo para que lo momten

empesamos con el formulario

Código HTML:

<script src="js/mootools.v1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/contacto.js" type="text/javascript" charset="utf-8"></script>

<form id="contacto">
<div id="block_center_solo">
<div id="form">
  <h1><? echo "$row[titulo]";?></h1>
  <h2><? echo "$row[text]";?></h2>
      <div id="block_center">
      <label for="nombre">Tu Nombre: <br />
      <input name="nombre" id="nombre" class="caja" type="text" />
      </label>
      <label for="email">Tu E-mail: <br />
      <input name="email" id="email" class="caja" type="text" />
      </label>
      <label for="telefono">Tu Telefono: <br />
      <input name="telefono" id="telefono" class="caja" type="text" /> 
      </label>
      <label for="direccion">Tu Direccion: <br />
      <input name="direccion" id="direccion" class="caja" type="text" />
      </label>
      </div>
      <div id="block_right">
      <label for="asunto">Asunto: <br />
      <input name="asunto" type="text" class="caja" id="asunto" />
      </label>
      <label for="mensaje">Mensaje: <br />
      <textarea id="mensaje" name="mensaje" class="textarea" rows="" cols=""></textarea>
      </label>

      <div align="center"><input id="botonenvio" type="submit" value="Enviar mensaje"/></div>
      <input name="enviar" id="enviar" value="1" type="hidden" />
      </div>

</div>
</div>
<div id="block_center_solo"><br />
    <div id="mensajes"></div>
</div>
  </form> 

hacemos el envio del mail

Código PHP:

  <?php
 
    if ($_POST[enviar] == 1) {
    $sender_name = $_POST[nombre];
    $sender_email = $_POST[email];
    $sender_phone = $_POST[telefono];
    $sender_address = $_POST[direccion];
    $sender_asunto = $_POST[asunto];
    $message = $_POST[mensaje];
    $subject = "Formulario de Contacto en Esc. Part. Normal Sup.";
    $msg = "Escuela Particular Normal Superior\n\n";
    $msg .= "Nombre: $sender_name\n";
    $msg .= "E-mail: $sender_email\n";
    $msg .= "Asunto: $sender_asunto\n";
    $msg .= "Telefono: $sender_phone\n";
    $msg .= "Direccion: $sender_address\n";
    $msg .= "Mensaje: $message\n\n";
    $to = "[email protected]";
    $mailheaders = "From: $sender_name <$sender_email>\n";
    $mailheaders .= "Reply-To: $sender_email\n\n";
    echo "mail($todepto, $subject, $msg, $mailheaders)";
    }
?>   

y hacemos el js con las funciones de el ajax

Código HTML:

var show = function(ev,t,v) {
	
	ev.effect('opacity',	{
	duration: 700,
	onComplete: function(){
		
		if(v!=1) {
			ev.setProperties({ 'class': 'stop' });	
		} else {
			
			ev.removeProperty('class');
		}
		
		
		ev.setHTML(t).effect('opacity', {duration: 700}).start(0,1);
		
	}
	}).start(1,0);
	
	
}
var validar = function (c) {
	
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(c)){
	
	return 1; } else { return 0; }
		 
}
window.addEvent('domready', function()
{
	var c = $('contacto');
	var msj = $('mensajes');
	
	c.addEvent('submit', function(ev)
	{
		new Event(ev).stop();
		if(c.nombre.value == '') {
			show(msj,'<img src="http://www.forosdelweb.com/images/alert.png"/><br>No agregaste tu nombre');
		}
		else if(c.email.value == '') {
			show(msj,'<img src="http://www.forosdelweb.com/images/alert.png"/><br>No has agregado tu correo electr&oacute;nico');	
		}
		else if(validar(c.email.value)==0) {
			show(msj,'<img src="http://www.forosdelweb.com/images/alert.png"/><br>El correo electr&oacute;nico que a&ntilde;adiste no es v&aacute;lido');		
		}
		else if(c.depto.value == '') {
			show(msj,'<img src="http://www.forosdelweb.com/images/alert.png"/><br>Debes Seleccionar un departamento a contactar');	
		}
		else if(c.asunto.value == '') {
			show(msj,'<img src="http://www.forosdelweb.com/images/alert.png"/><br>No has agregado un asunto');	
		}
		else if(c.mensaje.value == '') {
			show(msj,'<img src="http://www.forosdelweb.com/images/alert.png"/><br>No has escrito un mensaje');	
		} else {
			show(msj,'<img src="http://www.forosdelweb.com/images/spinner.gif" alt="" /><br>Enviando...');
		var contact = new Ajax('send-mail.php',
		{
			method: 'post',
			data:c,
			onComplete: function(ev) {
				show(msj, ev, 1);

			}
		});
		contact.request();
		}
	});

		}); 

[buddysistemas]

hola ajalex, mira tengo una pequeña duda yo estoy usando la clase mootools 1.2.1, y estoy usando el plugin accordion; hasta ahi todo va bien pero quiero implementar el efecto Timed Ajax que lo puedes ver en esta direccion: http://demos111.mootools.net/Ajax_Timed
mi problema es que cuando uso el javascript para ejecutar hace instancia a la clase Ajax y despues de haberla buscado en mi archivo mootools.js no la encuentro, hice un script basandome en los metodos que usa mi archivo pero sigue sin funcionar, este es el codigo:

utilrefresh.js

function refrescar(url){

// establecemes el periodo de refresco en 10 segundos
var timer = 5;
// periodical and dummy variables for later use
var periodical, dummy;
var start = $('start'), stop = $('stop'), log = $('yui-u');

/* our ajax istance */
var ajax = new Ajax(url, {
update: log,
method: 'get',
onComplete: function() {
// when complete, we remove the spinner
log.removeClass('ajax-loading');
},
onCancel: function() {
// when we stop timed ajax while it's requesting
// we forse to cancel the request, so here we
// just remove the spinner
log.removeClass('ajax-loading');
}
});

/* our refresh function: it sets a dummy to prevent
caching of php and add the loader class */
var refresh = (function() {
// dummy to prevent caching of php
dummy = $time() + $random(0, 100);
// we add out fancy spinner
log.empty().addClass('ajax-loading');
// requests of our php plus dummy as query
ajax.request(dummy);
});

// start and stop click events
//Cambiamos a un evento que se dispare automaticamente: window
//start.addEvent('click', function(e) {
window.addEvent('click', function(e) {
// prevent default
new Event(e).stop();
// prevent insane clicks to start numerous requests
$clear(periodical);

/* a bit of fancy styles */
//stop.setStyle('font-weight', 'normal');
//start.setStyle('font-weight', 'bold');
log.empty().addClass('ajax-loading');
/* ********************* */

// the periodical starts here, the * 1000 is because milliseconds required
periodical = refresh.periodical(timer * 1000, this);

// this is the first only request, later on will be only the periodical and refresh
// that do the request. If we don't do this way, we have to wait for 4 seconds before
// the first request.
ajax.request($time());
});

//stop.addEvent('click', function(e) {
// new Event(e).stop(); // prevent default;

/* a bit of fancy styles
note: we do not remove 'ajax-loading' class
because it is already done by 'onCancel'
since we later do 'ajax.cancel()'
*/
// start.setStyle('font-weight', 'normal');
// stop.setStyle('font-weight', 'bold');
/* ********************* */

// let's stop our timed ajax
/// $clear(periodical);
// and let's stop our request in case it was waiting for a response
// ajax.cancel();
//});
}
//Function de AJAX para la respuesta del servidor
function Ajax(){
var http=createRequestObject();var objectId='';function createRequestObject(htmlObjectId){var obj;var browser=navigator.appName;objectId=htmlObjectId;if (browser=="Microsoft Internet Explorer"){obj=new ActiveXObject("Microsoft.XMLHTTP");}
else{obj=new XMLHttpRequest();}
return obj;}
function sendReq(serverFileName,variableNames,variableValue s){var paramString='';variableNames=variableNames.split(' ,');variableValues=variableValues.split(',');for(i =0;i<variableNames.length;i++){paramString+=variab leNames[i]+'='+variableValues[i]+'&';}
paramString=paramString.substring(0,(paramString.l ength-1));if(paramString.length==0){http.open('get',serv erFileName);}
else{http.open('get',serverFileName+'?'+paramStrin g);}
http.onreadystatechange=handleResponse;http.send(n ull);}
function handleResponse(){if(http.readyState==4){responseTe xt=http.responseText;document.getElementById(objec tId).innerHTML=responseText;}}
}


en esta clase no estoy usando start ni stop, sino que lo pongo en el cargado de windows directamente, notaras esa diferencia cuando entres al link de Time_Ajax.
Espero tu respuesta prontamente, gracias..

[ajalex]

hola!!

no entiendo mucho de ajax soy principiante y en cuanto a si tenian dudas eran en cuanto al js que hize para mi formlulario

espero te pueda ayudar alguien mas!!! lo siento =(