entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

problema javascrpit con formulario de contacto

Buenas. Estoy creando un formulario de contacto y tengo un problema. La cosa está en que no controlo mucho de javascript y es donde tengo el error que no consigo ver........
Se que esta en el archivo javascript por que si lo quito me envía el email correctamente. Pero con el archivo javascript me envía el email, pero es como si no recogiese los datos del post, del formulario, y me lo envía vacío. Pero la cosa está en que necesito este código javascript. Es el que hace que salga un mensajito en la parte superior del formulario informando que se ha enviado correctamente. Sin el me redirige a una página en blanco con el mensaje de información.
Como ya he dicho al ser javascript no se ver el fallo. Pongo el código a ver si alguien lo sabe ver:

// Contact form validation
    var form = $('.contact-form');
    form.submit(function () {'use strict',
        $this = $(this);
        $.post($(this).attr('action'), function(data) {
            $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
        },'json');
        return false;
    });

Entonces, con este código me hace bien lo del mensajito informando que se ha enviado, y me lo envía, pero el email en blanco.
Sin este código me envía bien el email, con todos los datos del post, pero se me va a una página en blanco con el mensajito. Y se queda ahí......
Gracias por la ayuda.

1voto

Leonardo-Tadei comentado

Hola @nachito777sk,

hace falta que agregues el código HTML del formulario para poder ver el error.

Al final de tu pregunta haces referencia aun "email en blanco"... pero un formulario envía datos a GET o POST a un URL, no envía un email. Podrías aclarar un poco más esto?

4 Respuestas

2votos

nachito777sk Puntos2050

Hola, después de mucho probar (como dije no javascript no es mi especialidad) ya he solucionado el problema. Como decía carlossevi, en el método post, no enviaba nada, me faltaba los datos he enviar. Yo lo enviaba así:

$.post("sendemail.php, function(data) {

$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
        },'json');

Cargaba la URL y llamaba a la función con lo que quería hacer. En mi caso lo correcto era, después de llamar a la URL(sendemail.php), enviar los datos que se iban a cargar en esta URL, y después llamar a la función, de esta manera:

$.post("sendemail.php", {name: document.getElementById("name").value, email: document.getElementById("email").value, message: document.getElementById("message").value}, function(data) {

$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
        },'json');

Como veis, recoge el los valores del formulario para enviarlos. La documentación que me pasaste me ha venido muy bien.
Gracias por la ayuda...

0voto

nachito777sk Puntos2050

Tienes razón, esto no lo explique bien. A ver si así se entiende mejor:
Este es el apartado del formulario de contacto del HTML:

<div class="col-sm-5">
                        <div id="contact-section">
                            <h3>Contacta con nosotros</h3>
                            <div class="status alert alert-success" style="display: none"></div>
                            <form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" required="required" placeholder="Nombre">
                                </div>
                                <div class="form-group">
                                    <input type="email" name="email" class="form-control" required="required" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <textarea name="message" id="message" required="required" class="form-control" rows="4" placeholder="Mensaje"></textarea>
                                </div>                        
                                <div class="form-group pull-right social-icons">
                                    <input type="submit" class="btn btn-primary pull-right" value="Enviar"</input>
                                    <a href="https://twitter.com/noisy_app" target="_blank" style="font-size: 55px; color: #373737"><i class="fa fa-twitter"></i></a>
                                    <a href="https://www.facebook.com/Noisy-508280102683678" target="_blank" style="font-size: 55px; color: #373737; padding-right: 30px"><i class="fa fa-facebook"></i></a>
                                </div>

                            </form>        
                        </div>

Esto lo envía, como tu bien dices a otra URL, que es un archivo que se llama sendemail.pnp que es este:

<?php
    header('Content-type: application/json');
    $status = array(
        'type'=>'success',
        'message'=>'Gracias por contactar con nosotros. Nos pondremos en contacto con usted lo antes posible '
    );

    $name = @trim(stripslashes($_POST['name'])); 
    $email = @trim(stripslashes($_POST['email'])); 
    $subject = @trim(stripslashes($_POST['subject'])); 
    $message = @trim(stripslashes($_POST['message'])); 

    $email_from = $email;
    $email_to = '[email protected]';//replace with your email

    $body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Subject: ' . $subject . "\n\n" . 'Message: ' . $message;

    $success = @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');

    echo json_encode($status);
    die;

La cosa está en la función javascript que como dije hace que enseñe el mensajito en el mismo formulario que es este:

// Contact form validation
    var form = $('.contact-form');
    form.submit(function () {'use strict',
        $this = $(this);
        $.post($(this).attr('action'), function(data) {
            $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
        },'json');
        return false;
    });

3votos

carlossevi Puntos63540

Lo que hace la pieza de Javascript a grandes rasgos:

  1. Envía una petición POST con jQuery a sendemail.php (realmente la envía a la URL del atributo action del elemento que devuelve el selector css .contact-form).
  2. Hace una animación con un elemento del HTML poniendo antes el texto del mensaje que devuelve la petición POST.
  3. Evita que el envío del formulario mediante el método "tradicional".

El problema que tienes es que en esa petición no estás enviando ningún dato del formulario, por lo que tu script de PHP no tiene ningún parámetro POST y genera un email vacío.

3votos

Leonardo-Tadei Puntos227020

Hola @nachito777sk,

concuerdo con lo que dice @carlossevi.

Para debuguearlo y ver qué pasa, modificá sendmail.php de la siguiente manera:

<?php
    header('Content-type: application/json');
    $status = array(
        'type'=>'success',
        'message'=>"Debug {$_POST['name']} - {$_POST['email']} - {$_POST['subject']} - {$_POST['message']}"
    );
...

De esta manera vas a ver los valores que recibe tu script desde el formulario.

Si el código que pusiste por acá está completo, lo que yo creo que pasa es que el formulario no tiene un elemento llamado "subject" y por esto el script PHP falla al querer acceder a una posición inexistente del vector POST... tal vez sea solo eso, pero si no es, podés ir agregando valores al array que es la respuesta para poder ir viendo dónde falla.

Saludos!

0voto

nachito777sk comentado

Pues al hacer la comprobación en el mensaje, efectivamente sale esto:

Debug - - -
Lo que dices del subject, ya contemplé esto. Pero si elimino la función javascript, el email se envía perfectamente, con el subject en blanco, pero lo demás bien rellenado. También decir que el subject ahora le doy valor fijo yo, en el sendemail.php. Pero este no parece ser el problema.

1voto

carlossevi comentado

Como te decía en mi respuesta, es que la petición POST va vacía sin parámetros porque en lugar de hacer uso de la función submit() (ver doc) utilizas la función post() (ver doc) y no le añades parámetros a la petición.

Deberías añadirle el parámetro opcional data a la función post().

0voto

nachito777sk comentado

Me miraré la documentación a ver si puedo solucionarlo.
Gracias.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta