problema con envío de formulario php sin recargar la página

[aniMAYtions]

Hola amig@s.

Estoy tratando de enviar un formulario php sin que se recargue la página en la que me encuentro, para luego insertar los datos en la base de datos y mostrar el nuevo registro.
Me explico, es un módulo de comentar noticias y lo que quiero conseguir es que cada vez que un usuario quiera hacer un comentario, éste sea registrado e inmediatamente se muestre donde los demás.
Para ello, en la página incial muestro mi formulario de la siguiente manera:

Código:

<form name='fcomenta' id='fcomenta' action='' method='post'>
   <p>Su nombre:</p>
   <p><input name='nombre' type='text' id='autor' value='An&oacute;nimo' maxlength='20' onfocus='javascript:nombre(this.value);' onblur='javascript:nombre(this.value);'/></p>
   <p>Su email:</p>
   <p><input name='email' type='text' id='autor' value='' maxlength='50'/></p>
   <p>Texto de su comentario:</p>

   <p><textarea name='comentario' cols='40' rows='5'></textarea></p>
						
   <input name='idnoticia' type='hidden' value=".$row_noticia['ID']." />
   <input name='ipusuario' type='hidden' value=".$ip." />
   <p><input name='env_com' type='submit' value='Enviar' id='env_com'/></p>
</form>

Luego, según he leído por la red, con la librería jquery se haría de la siguiente manera:

Código:

   // Interceptamos el evento submit
    $('#form, #fat, #fcomenta').submit(function() 
	{
	   alert('intercerpto el submit');
	  // Enviamos el formulario usando AJAX
	  	var noticia = document.fcomenta.idnoticia.value;
		var usuario = document.fcomenta.idusuario.value;
		var nombre = document.fcomenta.nombre.value;
		var email = document.fcomenta.email.value;
		var comentario = document.fcomenta.comentario.value;
	
		$.ajax({
		type: "GET",
			url: "funciones.php",
			data: "action=comentar&cod_usuario="+cod_usuario+"&cod_noticia="+cod_noticia+"&nombre="+nombre+"&email="+email+"&comentario="+comentario,
			success: function(msg){
				document.getElementById("txtprueba").style.visibility = 'visible';
				document.getElementById("txtprueba").innerHTML = msg;
			}, 
			error: function(xho){
				document.getElementById("txtprueba").style.visibility = 'visible';
				document.getElementById("txtprueba").innerHTML = "Error:"+xho.responseText;
			}
		});
	})

Bueno, la verdad es que la función que encontré la he adaptado a mis necesidades. Pero de todas formas no me intercepta el submit y la página se recarga igualmente no haciendo absolutamente nada.

Alguien puede guiarme sobre cómo podría solucionar esto?? Qué librería se adptaría más a lo que io quiero hacer y cómo debería utilizarla para conseguirlo??

Muchas gracias!!

[DooBie]

si pones esta linea:

Código:

$('#form, #fat, #fcomenta').submit(function()

asi:

Código:

$('#fcomenta').submit(function()

Tampoco lo coge?

[aniMAYtions]

Tampoco, ia lo probé 20 veces de las 2 formas.
Creo que el problema puede estar en que me falta algún plugin para la librería jquery. Estuve leiendo por ahí algo del plugin form para jquery, pero también lo adjunté y sigue sin funcionar.

A ver, io conseguí de otra manera diferente a la que os puse en mi otro post recoger los valores del formulario desde javascript.
Lo que no logro conseguir es que no se me recargue la página y ia no sé qué más probar, pues he leído todo lo leible que he encontrado por la red...

Muchas gracias

[DooBie]

Prueba asi:

Código:

$(document).ready(function() {
// Aqui todo tu codigo javascript
});

[aniMAYtions]

Que va, tampoco, ni poniendo esa función dentro de la página que la recibe.
A ver si encontramos alguna solución pronto...

Un saludo!!

[Tecna]

Buenas,

No entiendo ese código que pones, pero parece que estás usando el metod GET y si quieres enviar datos deberías usar POST.

Por otro lado algunos eventos producen una acción determinada asociada como es el caso de onsubmit que llama al método submit() que envía el formulario y recarga la página. Durante la propagación del evento se puede impedir esa acción con el método preventDefault() del objeto Event y además la función debería devolver false.

[DooBie]

Yo probe lo que te dije con tu codigo y me salto el alert, el resto del codigo, ya no se si funciona o no, pero sin las lineas que te comente, no saltaba el alert...

[aniMAYtions]

Pues no se chic@s, a mi no me da el resultado esperado.
De todas formas ahora lo tengo hecho con PHP simple, recargando la página, y lo de ajax no era imprescindible así que he pasado directamente a otra cosa.
Si veo que me sobra tiempo retomaré en breve este tema.
Mil gracias de todas formas!!

[aniMAYtions]

Hola de nuevo amig@s!!

Reabro este tema, como ia os dije, porque tengo algo más de tiempo y me gustaría poder conseguir el envío de formularios sin recargar la página. Más que nada por el tema de mostrar una pequeña frase con el estado de la acción que se realiza.
Os comento en resúmen lo que he hecho y a ver si entre todos encontramos una solución.
Se trata del módulo de comentarios de una noticia. Cuando muestro la noticia completa, abajo de ésta aparece dicho módulo, en el que hay que insertar el nombre del usuario que comenta, su email y el comentario en cuestión. Luego guardo otros parámetros para identificar al usuario en un momento concreto. al pulsar el botón enviar del formulario tengo puesto un evento 'onsubmit' donde me lo valida y devuelve o true o false para que se realice la inserción o no.
Primero comentaros, tanto el formulario como la función de insertar los tengo en la página funciones. En el Index tengo el javascript y es ahí donde recibo las acciones que iaman a las funciones de la otra página.
Esto del onsubmit me lo hace bien, pero si pongo el siguiente código

Código:

$('fcomenta').submit(function()
{
	alert('intercepto el submit');
});

no me hace nada, no salta el alert.
Creo que ahora después intentaré poner la iamada a ajax desde la función del evento onsubmit, pero antes de hacerlo, os suena a locura o es viable??

Un saludo y gracias

[DooBie]

No sera #fcomenta?

[aniMAYtions]

Iniciado por DooBie

No sera #fcomenta?

También lo probé, y tampoco funciona...

[pato12]

Y probaste actualizando tu jquery? talves que lo tienes dañado o mal incluido.. Tambien pone el codigo asi:

Código Javascript:

$(function(){
// Tu codigo, esto se va a ejecutar cuando el dom este cargado,
});
 

Suerte
Salu2

[johntzulik]

Espero que esto te ayude un poco bye me tengo que ir cualquier cosa avisas! http://twitter.com/johntzulik
por cierto utilizo un plug-in llamado validate puedes encontrarlo aqui http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Código Javascript:

$("#regAgent").validate({ /// validando formulario de nuevo usuario
  submitHandler: function(form) {
    html="q=Save_New_User&"; // va a mandar un query a la pagina function.asp // if q = "Save_New_User" then
  $.each(form, function(i){           //agarra todo la info que este en el formulario
      html += form[i].name+"="+form[i].value+"&";   //y pasa el nombre = valor ejemplo: user=JohnTzulik&pass=123
    });
  $.ajax({        //llama al ajax 
      type: "POST",              //por post
      url: "functions.asp",       // el destino es funtions.asp
      data: html,                 // datos a enviar es nuestra variable html antes llenada
      beforeSend:function(){      //antes de enviar   
        $("#mi_div").fadeOut(1000);   //ocultas el div padre del formulario  
      }, 
      success: function(Save_New_User){    //la funcion te regresa algo
        $("#mi_div").fadeIn(5000).html(Save_New_User);    //insertas lo que te regresa tu funcion 
      },
      error:function (xhr, ajaxOptions, thrownError){   // esto es en caso de error 
        $("#mi_div").fadeIn(5000).html(xhr.status+ " "+thrownError);
      }
  });
  }
});