Enviar formulario por POST sin recargar página

djboro88 · #1 (**permalink**) 28/05/2012, 09:17

Hola a todos, ya vuelvo con más dudas...

Me gustaría hacer un sistema de comentario pero que al darle envia no se tenga que recargar la página. El sistema de mensajes ya lo tengo y funciona perfecto, peeerooo... cada comentario q se envía se recarga la pagina.

¿Conocesi alguna forma sencilla (ya que de AJAX tengo más bien poca idea) y rapida de conseguirlo?

Saludos y Gracias !!

Pablo Ayala · #2 (**permalink**) 28/05/2012, 09:35

Código HTML:

Ver original<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<form id="tuformulario" name="tuformulario">
 
 <textearea id="tutextarea"  name="tutextarea" ></textarea>
 
 
  <button type="button" id="tuboton"></button>
</form>

Código Javascript:

Ver original$("#tuboton").click(function(){
 
  var comentario= $("#tutextarea").val();
  $.post("elnombredetupagina.php?comentario="+escape(comentario), function(){
       
      alert("Tu comentario se ha guardado exitosamente...!");    
   });
 
});

Tu archivo php:

Código PHP:

Ver original$comentario = $_REQUEST["comentario"];
 
....... (etc etc)

chinanzio · #3 (**permalink**) 28/05/2012, 09:37

prueba ponerle el atributo target al form y oculta el iframe

Código HTML:

Ver original<form target="el-iframe">
    <input type="submit" value="envia"/>
</form>
    
<iframe name="el-iframe"></iframe>

djboro88 · #4 (**permalink**) 28/05/2012, 09:51

He encontrado este script.
Pero no me recoge el textarea. Me publica el comentario en blanco.

Código Javascript:

Ver original<script language="javascript">
$(document).ready(function() {
    $().ajaxStart(function() {
        $('#loading').show();
        $('#divresult').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#divresult').fadeIn('slow');
    });
    $('#form, #fat, #nombreform').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#divresult').html(data);
 
            }
        })
        
        return false;
    }); 
})  
</script>

Lo del iframe no sale. Y además se que se puede hacer con AJAX o JQUERY, ya que los IFRAME no me inspiran confianza... XD

caricatos · #5 (**permalink**) 28/05/2012, 09:58

Hola:

Si tu formulario funciona bien sin ajax, tienes la página bien, y ahora te toca acomodar lo que tienes...

Para empezar, puedes poner en el formulario el sistema para que no se envíe...

<form onsubmit="return enviar(this)"...

... con esto, antes de el envío, se ejecuta la función "enviar", y si esa función devuelve "false", el envío se cancela.

Ahora queda programar esa función... es cuestión de saber pasar los parámetros. Supongo que habrás visto cosas con Ajax (no hacen falta librerías).

Muéstranos el progreso.

Saludos