0

Estoy intentando enviar un formulario con PHPMailer haciendo una petición AJAX para mostrar una ventana de éxito a la hora de completar la petición.

Mi duda es que tengo otro (form-4) formulario que si me hace todo el proceso perfectamente y no entiendo este error con mi segundo formulario (form-1) que está dentro de la misma página ambos diferenciados por ID.

Lo que he intentado:

*Intente' mandar el formulario sin la peticiónn AJAX y se envía perfectamente (en el form action), pero recibo un HTTP500 a pesar de que le indico que me muestre un Alert(); es por esto que decidi hacer la petición AJAX.

*Estoy mostrando en consola los procesos de validación de mi formulario (Error y éxito), cuando hay un error en el formulario me muestra el mensaje de error, pero el mensaje de éxito no me lo muestra y tampoco recibo el mensaje; por lo que creo que todo el problema es en esta petición.

$.validate({
             modules : 'security',
            onError : function($form1) {
              console.log('validation error');
              $('html, body').animate({
                scrollTop: $('.form-error').offset().top
              }, 500);
            },
            onSuccess : function($form1) {
              if(($form1).attr('id') === 'form-1'){
                  console.log('validation success');
                  $.ajax({
                    type: "POST",
                    url: "php/websiteEmail.php",
                    data: $form1.serialize(),
                    success: function(){
                      $('.js-form-1-response').addClass('sent');
                      $('.js-form-1-response').html('<h2>Excelente!</h2> <p>¡Es un placer conocerte! Danos un par de horas y programaremos nuestra primera cita.</p><a class="bs-button btn-small" data-linkName="Ir al inicio" href="/"><span data-hover="Ir al inicio">Ir al inicio</span></a><h6>Revisa nuestros canales creativos</h6><ul class="social"><li class="dribbble"><a href="" target="_blank"><span>Dribbble</span><img src="img/social/social-dribbble-loop.gif" alt="Dribbble"></a><li><li class="behance"><a href="" target="_blank"><span>Behance</span><img src="img/social/social-behance-loop.gif" alt="Behance"></a><li><li class="instagram"><a href="" target="_blank"><span>instagram</span><img src="img/social/social-instagram-loop.gif" alt="Instagram"></a><li></ul>');
                    }
                });
              }else{
                $.ajax({
                  type: "POST",
                  url: "php/websiteEmail.php",
                  data: $form1.serialize(),
                  success: function(){
                    $('.js-form-1-response').addClass('sent');
                    $('.js-form-1-response').html('<h2>Excelente!</h2> <p>¡Es un placer conocerte! Danos un par de horas y programaremos nuestra primera cita.</p><a class="bs-button btn-small" data-linkName="Ir al inicio" href="/"><span data-hover="Ir al inicio">Ir al inicio</span></a><h6>Revisa nuestros canales creativos</h6><ul class="social"><li class="dribbble"><a href="" target="_blank"><span>Dribbble</span><img src="img/social/social-dribbble-loop.gif" alt="Dribbble"></a><li><li class="behance"><a href="" target="_blank"><span>Behance</span><img src="img/social/social-behance-loop.gif" alt="Behance"></a><li><li class="instagram"><a href="" target="_blank"><span>instagram</span><img src="img/social/social-instagram-loop.gif" alt="Instagram"></a><li></ul>');
                  }
                });
              }
            },
          });

          $('body').on('click', '.js-remove-msg', function(){
            $('.js-form-1-response').text('');
          });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

                   <form action="" method="post" id="form-1">
                            <div id="web-step-3" class="step step-3">
                                <div class="offset-top-sm">
                                    <div class="row center-xs">
                                        <div class="col-xs-12 col-sm-9 col-md-7">
                                            <div class="step-number"><strong>03</strong> - 04</div>
                                            <h2>Detalles del <br />proyecto</h2>
                                        </div>
                                    </div>
                                    <div class="form-wrap">
                                        <div class="row center-xs">
                                            <div class="col-xs-12 col-sm-10 col-md-8">
                                                <div class="row">
                                                    <div class="col-xs-12 col-lg-6">
                                                        <p>
                                                            <input class="text-input" name="your-name" type="text"
                                                                placeholder="Nombre *" data-validation="length"
                                                                data-validation-length="min2"
                                                                data-validation-error-msg="Introduzca su nombre">
                                                        </p>
                                                    </div>
                                                    <div class="col-xs-12 col-lg-6">
                                                        <p>
                                                            <input class="text-input" name="your-email" type="email"
                                                                placeholder="Correo *" data-validation="email required"
                                                                data-validation-error-msg="Introduzca un correo">
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xs-12 col-lg-6">
                                                        <input class="text-input" name="your-phone" type="text"
                                                            placeholder="Celular">
                                                    </div>
                                                    <div class="col-xs-12 col-lg-6">
                                                        <input class="text-input" name="your-company-name" type="text"
                                                            placeholder="Nombre Empresa">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xs-12">
                                                        <input class="text-input" name="your-company-url" type="text"
                                                            placeholder="Url del sitio">
                                                    </div>
                                                    <p>
                                                        <input type="checkbox" name="contact_me_by_fax_only" value="1"
                                                            style="display:none !important" tabindex="-1"
                                                            autocomplete="false">
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="text-align:center">
                                        <a class="bs-button btn-small" href="#web-step-4" data-anchor="web-step-4" data-linkName="Siguiente">
                                            <span data-hover="Siguiente">Siguiente</span></a>
                                </div>
                            </div>
                            <!-- End of step 4 -->
                            <div id="web-step-4" class="step step-4">
                                <div class="offset-top-sm">
                                    <div class="row center-xs">
                                        <div class="col-xs-12 col-sm-9 col-md-7">
                                            <div class="step-number"><strong>04</strong> - 04</div>
                                            <h2>Algo m&aacute;s?</h2>
                                            <div class="row center-xs">
                                                <div class="col-xs-12 col-md-10">
                                                    <p class="small">Si hay algún detalle pertinente que le gustaría
                                                        compartir, deje un mensaje en el cuadro a continuación.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-wrap">
                                        <div class="row center-xs">
                                            <div class="col-xs-12 col-md-6">
                                                <textarea rows="4" cols="50" placeholder="Esperamos su comentario..."
                                                    name="additional-info"></textarea>
                                            </div>
                                        </div>
                                        <div class="row center-xs">
                                            <div class="col-xs-8 col-sm-4 col-lg-3">
                                                <div class="submit-button-wrap">
                                                    <input name="submit-website" class="submit-button" type="submit"
                                                        value="ENVIAR INFO">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of step 4 -->
                    </form>

Validation Error

Como informacion Extra, al presionar Enviar Info, me muestra un Error: POST en ..php/email.php Entiendo perfectamente que este es mi archivo para enviar el correo pero de mi otro formulario ID: form-4, el actual es ...php/websiteEmail.php de mi formulario ID: form-1.

error

Para validar mi formulario ID: form-4 utilizo esta peticion:

//Form-4
          $.validate({
            modules : 'security',
            onError : function($form) {
              console.log('validation error');
              $('html, body').animate({
                scrollTop: $('.form-error').offset().top
              }, 500);
            },
            onSuccess : function($form) {
              if(($form).attr('id') === 'form-4'){
                  console.log('validation success');
                  $.ajax({
                    type: "POST",
                    url: "php/email.php",
                    data: $form.serialize(),
                    success: function(){
                      $('.js-form-response').addClass('sent');
                      $('.js-form-response').html('<h2>Excelente!</h2> <p>¡Es un placer conocerte! Danos un par de horas y programaremos nuestra primera cita.</p><a class="bs-button btn-small" data-linkName="Ir al inicio" href="/"><span data-hover="Ir al inicio">Ir al inicio</span></a><h6>Revisa nuestros canales creativos</h6><ul class="social"><li class="dribbble"><a href="https://dribbble.com/Buzzworthy" target="_blank"><span>Dribbble</span><img src="img/social/social-dribbble-loop.gif" alt="Dribbble"></a><li><li class="behance"><a href="https://www.behance.net/BuzzworthyStudio" target="_blank"><span>Behance</span><img src="img/social/social-behance-loop.gif" alt="Behance"></a><li><li class="instagram"><a href="https://www.instagram.com/buzzworthy.studio/" target="_blank"><span>instagram</span><img src="img/social/social-instagram-loop.gif" alt="Instagram"></a><li></ul>');
                    }
                });
              }else{
                $.ajax({
                  type: "POST",
                  url: "php/email.php",
                  data: $form.serialize(),
                  success: function(){
                    $('.js-form-response').addClass('sent');
                    $('.js-form-response').html('<h2>Excelente!</h2> <p>¡Es un placer conocerte! Danos un par de horas y programaremos nuestra primera cita.</p><a class="bs-button btn-small" data-linkName="Ir al inicio" href="/"><span data-hover="Ir al inicio">Ir al inicio</span></a><h6>Revisa nuestros canales creativos</h6><ul class="social"><li class="dribbble"><a href="" target="_blank"><span>Dribbble</span><img src="img/social/social-dribbble-loop.gif" alt="Dribbble"></a><li><li class="behance"><a href="" target="_blank"><span>Behance</span><img src="img/social/social-behance-loop.gif" alt="Behance"></a><li><li class="instagram"><a href="" target="_blank"><span>instagram</span><img src="img/social/social-instagram-loop.gif" alt="Instagram"></a><li></ul>');
                  }
                });
              }
            },
          });

*Edit:

    <?php

require ('class.phpmailer.php');
require('PHPMailerAutoload.php');

$correo=trim($_POST['email']);
$nombre= trim($_POST['name']);
$mensaje = trim($_POST['message']);
// $apellido=trim($_POST['lastname']);
// $celular = trim($_POST['phone']);

    $mail = new PHPMailer(true);                                 // Enable verbose debug output
    $mail->CharSet = "utf-8";
    $mail->isSMTP();                                            // Set mailer to use SMTP
    $mail->Host       = 'smtp.gmail.com';                      // Specify main and backup SMTP servers
    $mail->SMTPAuth   = true;                                   // Enable SMTP authentication
    $mail->Username   = 'xxxx.com';                     // SMTP username
    $mail->Password   = 'xxxxx';                               // SMTP password
    $mail->SMTPSecure = 'ssl';                                  // Enable TLS encryption, `ssl` also accepted
    $mail->Port       = 465;                                    // TCP port to connect to                                   // TCP port to connect to
    $mail->setFrom($correo, $nombre);

    $mail->addAddress('[email protected]', 'Test');
    $mail->addReplyTo($correo, 'Gracias por contactarnos');
     $mail->isHTML(true);
         $mail->Subject = 'Chat';
         $mail->Body    = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <meta name="viewport" content="initial-scale=1.0" />
         <meta name="format-detection" content="telephone=no" />
         <title>'.$nombre.'</title>
     
     </head>
     
     <body id="body-layout" style="background: #406c8d;">
     
         mensaje
     </body>
     
     </html>';

     if(!$mail -> send()) {
      $signal = 'bad';
      $msg = 'Mailer Error: ' . $mail -> ErrorInfo;
  } else {

      echo'<script type="text/javascript">
      alert("Mensaje enviado! en breve nos comunicaremos con usted.");
      window.location.href="../index.php";
      </script>';
      $signal = 'ok';
      $msg = '¡Tu Solicitud ha sido enviada! Pronto nos estaremos poniendo en contacto contigo.';
  }
$data = array(
'signal' => $signal,
'msg' => $msg
);

echo json_encode($data);
11
  • En la imagen que pusiste, en la pestaña "Sources" aparece error 500 y el problema está en php/email.php, no en Javascript. Por favor edita la pregunta para agregar el código con el que envías el correo y, de ser posible, revisa el registro de errores para que también lo pongas aquí.
    – Triby
    el 18 mar. 2021 a las 19:14
  • No, me refiero a la línea después de las imágenes: NEWSITE/php/email.php 500
    – Triby
    el 18 mar. 2021 a las 19:23
  • Hola @Triby, gracias por tu comentario; he editado el codigo, pero me parece extraño que el error venga aqui cuando estoy usando la misma libreria con el otro formulario y funcione perfectamente.
    – Ragnar
    el 18 mar. 2021 a las 19:26
  • ¿Tienes la librería PHPMailer en la misma carpeta que email.php? Intenta acceder directamente desde el navegador al script NEWSITE/php/email.php, seguramente ahí podrás ver de qué se trata el error.
    – Triby
    el 18 mar. 2021 a las 19:32
  • Efectivamente tengo los archivos dentro de la misma carpeta estructura-archivos y si intento acceder directamente con el url me muestra un HTTP 500.
    – Ragnar
    el 18 mar. 2021 a las 19:37

1 respuesta 1

1

Hola gracias a los comentarios que recibi logre encontrar como solucionarlo.

Mi evento $.validate que viene de una libreria Validate.js, en el momento de hacer la integracion no habia leido muy bien la documentacion de la misma.

llamando onError y onSuccess puedo establecer la cantidad de acciones que quiero que realice mi/mis formularios una vez presionado el boton submit.

Asi que onSuccess puedo agregarle tantas condiciones como sean necesarias, en el elseif/else agrego todos los formularios que quiera validar en base a su ID.

    $.validate({
        modules : 'security',
        onError : function($form) {
        console.log('validation error');
        $('html, body').animate({
            scrollTop: $('.form-error').offset().top
        }, 500);
        },
        onSuccess : function($form) {
        if(($form).attr('id') === 'form-1'){
            console.log('validation success');
            $.ajax({
                type: "POST",
                url: "php/websiteEmail.php",
                data: $form.serialize(),
                success: function(){
                $('.js-form-response').addClass('sent');
                $('.js-form-response').html('<h2>Excelente!</h2> <p>¡Es un placer conocerte! Danos un par de horas y programaremos nuestra primera cita.</p><a class="bs-button btn-small" data-linkName="Ir al inicio" href="/"><span data-hover="Ir al inicio">Ir al inicio</span></a><h6>Revisa nuestros canales creativos</h6><ul class="social"><li class="dribbble"><a href="" target="_blank"><span>Dribbble</span><img src="img/social/social-dribbble-loop.gif" alt="Dribbble"></a><li><li class="behance"><a href="" target="_blank"><span>Behance</span><img src="img/social/social-behance-loop.gif" alt="Behance"></a><li><li class="instagram"><a href="" target="_blank"><span>instagram</span><img src="img/social/social-instagram-loop.gif" alt="Instagram"></a><li></ul>');
                }
            });
        }else if(($form).attr('id') === 'form-4'){
            console.log('validation success');
            $.ajax({
            type: "POST",
            url: "php/email.php",
            data: $form.serialize(),
            success: function(){
                $('.js-form-response').addClass('sent');
                $('.js-form-response').html('<h2>Excelente!</h2> <p>¡Es un placer conocerte! Danos un par de horas y programaremos nuestra primera cita.</p><a class="bs-button btn-small" data-linkName="Ir al inicio" href="/"><span data-hover="Ir al inicio">Ir al inicio</span></a><h6>Revisa nuestros canales creativos</h6><ul class="social"><li class="dribbble"><a href="" target="_blank"><span>Dribbble</span><img src="img/social/social-dribbble-loop.gif" alt="Dribbble"></a><li><li class="behance"><a href="" target="_blank"><span>Behance</span><img src="img/social/social-behance-loop.gif" alt="Behance"></a><li><li class="instagram"><a href="/" target="_blank"><span>instagram</span><img src="img/social/social-instagram-loop.gif" alt="Instagram"></a><li></ul>');
            }
            });
        }
        },
    });

ahora ambos formularios se envian perfectamente e ire agregando mis otros formularios alli mismo.

Gracias por sus comentarios.

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.