2

¡Hola amigos! Una consulta, tengo mi código en HTML y en PHP, pero no logro hacer que al momento de dar click en "SUBMIT", al usuario le salga una alerta o un "div" nuevo que diga "MENSAJE ENVIADO CORRECTAMENTE", no quiero dirigirlo a una página diferente, quisiera que en la misma página salga ese mensaje, ya que al momento de dar en "submit", sólamente se recarga la página y causa confusión al usuario si se mandó el mensaje o no.

Este es mi código HTML:

<form action="contact.php" id="form1" name="form1" method="post" class="rd-mailform text-left offset-top-30">
                        <div class="range offset-top-0">
                            <div class="cell-md-4">
                                <div class="form-group">
                                    <label for="contact-name" class="form-label form-label-outside">Nombre Completo<span class="text-primary">*</span>
                                    </label>
                                    <input id="name" type="text" name="name" data-constraints="@Required" placeholder="Nombre Completo" class="form-control" required>
                                </div>
                            </div>
                            <div class="cell-md-4">
                                <div class="form-group">
                                    <label for="contact-email" class="form-label form-label-outside">Email<span class="text-primary">*</span>
                                    </label>
                                    <input id="email" type="email" name="email" placeholder="Email" data-constraints="@Required @Email" class="form-control" required>
                                </div>
                            </div>
                            <div class="cell-md-4">
                                <div class="form-group">
                                    <label for="contact-phone" class="form-label form-label-outside">Teléfono</label>
                                    <input id="phone" type="text" name="phone" placeholder="Teléfono" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="form-group textarea-group">
                            <label for="contact-message" class="form-label form-label-outside">Mensaje<span class="text-primary">*</span>
                            </label>
                            <textarea id="message" name="message" placeholder="Mensaje" data-constraints="@Required" class="form-control"></textarea>
                        </div>
                        <div class="offset-top-40 text-center">
                            <button type="submit" name="Submit" value="ENVIAR" class="btn btn-primary">Enviar Ahora</button>
                        </div>
                    </form>
                        <!--<div class="mensajeEnviado"><label class="textoEnviado">¡Mensaje enviado correctamente, estaremos en contacto!<label></div>
                        </div> -->

Este es mi código PHP, pueden notar que el div de "¡Mensaje enviado correctamente" está como un comentario, ya que obviamente no quiero que salga en la página por default sin que el usuario haya hecho algo, me estuvieron diciendo que lo puedo hacer en "AJAX" para que no lo redirija a otra página, pero sinceramente no sé nada sobre AJAX, si existe la forma de hacerlo en php, les agradecería mucho su ayuda, igual me comentaron que hiciera un "if-else" para pasarlo a otras páginas, pero no creo que sea la mejor opción.

<?php

    $para = "[email protected], [email protected]";

    $asunto = "Mensaje desde la pag web";

    $mailheader = "From: ".$_POST["email"]."\r\n";
    $mailheader .= "Reply-To: ".$_POST["email"]."\r\n";      
    $mailheader .= "Content-type: text/html; charset=utf-8\r\n"; 
    $MESSAGEBODY = "Nombre: ".$_POST["name"]."\n";
    $MESSAGEBODY .= "\n<br>Email: ".$_POST["email"]."\n";
    $MESSAGEBODY .= "\n<br>Teléfono: ".$_POST["phone"]."\n";
    $MESSAGEBODY .= "\n<br>Mensaje: ".($_POST["message"])."\n";

    mail($para, $asunto, $MESSAGEBODY, $mailheader) or die ("Error al enviar email");

    header("Location: http://www.luanclinicadental.com/contacto.html");


?>
2
  • 1
    bienvenido a StackOverflow en español, ¿A que te refieres con etiqueta de enviado y error? ¿mostrar un mensaje para cada caso?
    – Luis Hongo
    el 25 oct. 2018 a las 18:59
  • Exactamente, pero no quiero un alert en javascript, podría ser un <div> bonito que solamente diga eso, de hecho en mi código de Jacascript, salía un mensaje de "ENVIANDO" y después se eliminó, ya ese no me interesa tanto, ya me quebré mucho la cabeza, sólamente sería el div de "ENVIADO", porque solamente se recarga la página y luego los usuarios no entienden, ya me han llegado varios correos del mismo usuario escribiendo lo mismo varias veces. ¡Gracias por tu respuesta! el 25 oct. 2018 a las 19:17

2 respuestas 2

2

Tienes que usar ajax

<form onsubmit="return false;" id="form1" name="form1" method="post" class="rd-mailform text-left offset-top-30">
    <div class="range offset-top-0">
        <div class="cell-md-4">
            <div class="form-group">
                <label for="contact-name" class="form-label form-label-outside">Nombre Completo<span class="text-primary">*</span></label>
                <input id="name" type="text" name="name" data-constraints="@Required" placeholder="Nombre Completo" class="form-control" required/>
            </div>
        </div>
        <div class="cell-md-4">
            <div class="form-group">
                <label for="contact-email" class="form-label form-label-outside">Email<span class="text-primary">*</span></label>
                <input id="email" type="email" name="email" placeholder="Email" data-constraints="@Required @Email" class="form-control" required>
            </div>
        </div>
        <div class="cell-md-4">
            <div class="form-group">
                <label for="contact-phone" class="form-label form-label-outside">Teléfono</label>
                <input id="phone" type="text" name="phone" placeholder="Teléfono" class="form-control">
            </div>
        </div>
    </div>
    <div class="form-group textarea-group">
        <label for="contact-message" class="form-label form-label-outside">Mensaje<span class="text-primary">*</span></label>
        <textarea id="message" name="message" placeholder="Mensaje" data-constraints="@Required" class="form-control"></textarea>
    </div>
    <div class="offset-top-40 text-center">
        <button type="submit" name="Submit" value="ENVIAR" class="btn btn-primary" onclick="submitForm()">Enviar Ahora</button>
    </div>
</form>

Agrega jquery

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>

Y este script

<script type="text/javascript">
    function submitForm(){
        if($('input#name').val()==""){
            alert('Introduzca un nombre');
            return false;
        }
        if($('input#email').val()==""){
            alert('Introduzca un email');
            return false;
        }
        if($('input#phone').val()==""){
            alert('Introduzca un telefono');
            return false;
        }
        if($('#message').val()==""){
            alert('Escriba un mensaje');
            return false;
        }
            var form = $('#form1');
            var data = form.serialize();
            $.ajax({
                type: "POST",
                url : 'contact.php',
                data: data,
                success: function(){
                    form.find('.alert').remove();
                    form.append('<div class="alert alert-success">El mensaje ha sido enviado correctamente</div>');
                    form.find('.alert').show();
                }
            });


    }
</script>
20
  • Access to XMLHttpRequest at 'luanclinicadental.com/contacto.html' (redirected from 'luanclinicadental.com/contact.php') from origin 'luanclinicadental.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. el 29 oct. 2018 a las 16:01
  • Me sale eso amigo :( el 29 oct. 2018 a las 16:01
  • quita en el php el 29 oct. 2018 a las 16:03
  • Esto : header("Location: luanclinicadental.com/contacto.html"); el 29 oct. 2018 a las 16:03
  • Sí me llega el mensaje a la bandeja de correo una vez que le quité eso, pero ahora me sale "Uncaught TypeError: form.find is not a function at Object.success (contacto.html:386) at c (core.min.js:7) at Object.fireWith [as resolveWith] (core.min.js:7) at n (core.min.js:7) at XMLHttpRequest.t (core.min.js:7)" el 29 oct. 2018 a las 16:05
0

No entiendo muy bien lo que quieres en si ? Tienes dos opciones mandar el form mediante ajax luego limpiar el formulario y mostrar el div con el mensaje que quieres o puedes enviar con php mandarlo a otra pagina o la misma y mostrar el mensaje

  1. php-flash-messages

  2. https://getbootstrap.com/docs/4.1/components/alerts/

1
  • Sí, justamente quiero que al momento de dar click en "submit", salga un mensaje que diga "Mensaje enviado correctamente", porque ahorita la dar "submit", sólamente se recarga la página y el usuario no sabe si el mensaje se envió o no :( Pero sigo sin poder hacerlo jaja el 28 oct. 2018 a las 0:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.