2

Deseo mostrar un div en el Alert de confirmación de envío, éste es mi código:

<?php

$Nombre = $_POST['Nombre'];
$Email = $_POST['Email'];
$Mensaje = $_POST['Mensaje'];
$Telefono = $_POST['Telefono'];    

if ($Nombre=='' || $Email=='' || $Mensaje=='' || $Telefono==''){

    echo "<script>alert('Los campos marcados con * son obligatorios');location.href ='javascript:history.back()';</script>";

}else{


    require("archivosformulario/class.phpmailer.php");
    $mail = new PHPMailer();    
    $mail->From     = $Email;
    $mail->FromName = $Nombre; 
    $mail->AddAddress("[email protected]"); // Dirección a la que llegaran los mensajes.

    // Aquí van los datos que apareceran en el correo que reciba
    //adjuntamos un archivo 

    $mail->WordWrap = 50; 
    $mail->IsHTML(true);     
    $mail->Subject  =  "Comentarios Tiendas El Golazo";
    $mail->Body     =  "Nombre: $Nombre \n<br />".    
    "Email: $Email \n<br />".    
    "Mensaje: $Mensaje \n<br />".
    "Telefono: $Telefono \n<br />";       

    // Datos del servidor SMTP

    $mail->IsSMTP(); 
    $mail->Host = "smtp.gmail.com";
    $mail->Port = 465;
    $mail->SMTPSecure = "ssl";  // Servidor de Salida.
    $mail->SMTPAuth = true; 
    $mail->Username = "[email protected]";  // Correo Electrónico
    $mail->Password = ""; // Contraseña

    if ($mail->Send())
        echo "<script>
                $ElDiv=document.getElementById("confirmation").parse(html);  
                alert(ElDiv);
                location.href ='contactanos.html';
             </script>";    

    else
    echo "<script>alert('Error al enviar el formulario');location.href ='javascript:history.back()';</script>";

}

?>

Deseo que este div se muestre al enviar el formulario como muestra de envío exitoso en vez de un simple mensaje en Alert`.

Este es mi div usando clases de Bootstrap:

<div id="confirmation" class="alert alert-success hidden">
    <span class="glyphicon glyphicon-star">Gracias por tu Comentario!</span> 
</div>

¿Es posible mostrar un div dentro del Alert confirmation de PhpMailer? Yo lo intenté pero mi código está erróneo ¿Alguna sugerencia o ayuda?

2
  • ¿Lo que quieres es mostrar código HTML (el glyphicon) en el alert?
    – Alvaro Montoro
    Commented el 25 may. 2016 a las 2:52
  • Correcto, deseo mostrar ese Div, ya que solo el mensaje se ve simple, mi código está erróneo ya que me lanzo un error de parseo y no soy experto en js Commented el 25 may. 2016 a las 2:59

2 respuestas 2

0

Me voy a centrar en esta parte del código que es la que contiene los errores:

    echo "<script>
            $ElDiv=document.getElementById("confirmation").parse(html);  
            alert(ElDiv);
            location.href ='contactanos.html';
         </script>";  

Ese código tiene algunos problemas:

  • Hay comillas dobles (getElementById("confirmation")) dentro de una cadena demarcada por comillas dobles. Eso te da un error de parseo (el que mencionas en los comentarios), la solución es simple: cambia esas comillas dobles por simples: getElementById('confirmation')
  • Después de solucionar ese problema hay más: en PHP no tienes definida la variable $ElDiv, lo cual lanzará error también a la hora de escribir el valor (porque no existe). Esto realmente parece un error tipográfico y debería ser ElDiv (sin el $).
  • La parte de parse(html) fallará también porque 1) parse no existe como función y 2) html no es una variable definida. Para solucionar esto podrías hacer algo como innerHTML.

Así un código válido quedaría así:

    echo "<script>
            ElDiv=document.getElementById('confirmation').innerHTML;  
            alert(ElDiv);
            location.href ='contactanos.html';
         </script>";  

Pero ahora hay otro problema: la función alert es bastante limitada, toma como parámetro una cadena o un objeto que se transformará a cadena. No le puedes pasar código HTML para que formatee el pop-up de la alerta.

Esto podrías solucionarlo utilizando el símbolo estrella en unicode en lugar del glyphicon de Bootstrap (el resultado no es igual pero al menos sí se mostrará la estrella):

<div id="confirmation" class="alert alert-success hidden">
    ★ Gracias por tu Comentario!</span> 
</div>

Así lo que se ejecutaría quedaría como esto:

aux = document.getElementById("confirmation").innerHTML;
alert(aux);
<div id="confirmation" class="alert alert-success hidden">
    ★ Gracias por tu Comentario! 
</div>


Si no te gusta el resultado (tampoco es para tirar cohetes), puedes usar los modales de Bootstrap (que ya tienes en el proyecto) para mostrar el mensaje modal y en ese caso sí que te permitirá tener código HTML y glyphicons y cosas así.

El código en PHP entonces cambiaría un poco (en lugar de esperar a que se cierre el modal, se redirige después de 3 segundos):

    echo "<script>
            $('#confirmation').modal('show');
            setTimeout(\"location.href ='contactanos.html'\", 3000);
         </script>"; 

Y el HTML:

<div id="confirmation" class="modal">
    <div class="alert alert-success">
        <span class="glyphicon glyphicon-star">Gracias por tu Comentario!</span> 
    </div>
</div>
10
  • Entiendo, entonces no existen manera alguna de mostrar el div ya sea fuera del Alert o no necesariamente dentro de un alert sino imprimir el div sin el Alert? ¿Es necesario tener un Alert? Commented el 25 may. 2016 a las 3:17
  • @AlejandroRuiz Se me olvidó añadir que puedes utilizar un modal (por ejemplo los de Bootstrap) en lugar de alert y esos sí que van a permitir que pongas HTML y glyphicons y cosas así
    – Alvaro Montoro
    Commented el 25 may. 2016 a las 3:18
  • ¿Se podría de esa manera y se podria incluir en PhpMailer? ¿Tienes idea de como? Commented el 25 may. 2016 a las 3:20
  • He añadido un pequeño ejemplo. Lo único es que puede que necesites añadir un controlador para que sólo se haga la redirección cuando se cierre el modal, de lo contrario me parece que la redirección se ejecutará sin esperar a que el modal se cierre
    – Alvaro Montoro
    Commented el 25 may. 2016 a las 3:22
  • Creo que es algo complicado y más cuando no manejo el tema lo suficiente, dejare el comentario con la estrella y te agradezco mucho por tu ayuda aprendi al respecto Commented el 25 may. 2016 a las 3:25
0

no se como estas haciendo tu formulario pero me imagino que es algo como esto...

  <form class="col s12" name="formulario" id="idobjeto" action="scripts/claseenviacorreo.php" method="POST" enctype="multipart/form-data" onsubmit="return checkSubmit();">

//el contenido de tu formulario

</form>

lo que se me ocurre ya que tienes el texto colocado en el div dentro del phpmailer , dejarlo como esta y solo agregarle a un submit la funcion de mostrrar el sweet aleert con el mensaje y el tiempo para el redireccionamiento o cuando se presione ok

 function checkSubmit() {
            if (!statSend) {
                statSend = true;
                return true;
            } else {
                alert("El formulario ya se esta enviando...");
                return false;
            }
        }

el else que estoy colocando es para los impacientes o personas que tienen internet lento que no esperan asi les muestro esa alerta. pero vamos al punto...

la alerta que quiero mostrarte es la de sweet alert y esa puedes verla funcionar al cambiar el la linea del alert por lo siguiente: no te olvides de importar las librerias (y)

<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js">



 var statSend = false;
        function checkSubmit() {
            if (!statSend) {
                statSend = true;


   swal({
  title: 'Enviando',
  text: 'Por Favor Espere',
  timer: 30000,
 // imageUrl: "cargando.gif", si quieres agregarle una imagen //personalizada
 // imageWidth: 400, anchura de la img
 // imageHeight: 200, alto de la img
 // imageAlt: 'Custom image', otra imagen debajo 
  onOpen: () => {
    swal.showLoading()
  }
}).then((result) => {
  if (

    result.dismiss === swal.DismissReason.timer
  ) {

  }
})




                return true;
            } else {
                swal("Por favor espere", 
    "El formulario se esta enviando",
     "success");
                return false;
            }
        }

tu boton submit debe tener esto:

<button id="btsubmit" type="submit" onclick="envio();" class="btn">Enviar</button>

trata de verlo , si no puedes , te ayudo otro rato .tengo tiempo y me gusta mucho esta alerta (y)

Tu Respuesta

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

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