0

Quiza sea algo sencillo pero yo no logro encontrar el error.

Tengo un formulario que lo quiero mandar por correo electronico,Durante se envia el correo quiero que el boton que dice Enviar Informacion cambie por "Enviando... ", una vez enviado el correo quiero que me muestre una Alert que me diga que el mensaje se envio y me regrese a mi formulario. El correo lo recibo perfectamente con todos sus datos lo que sucede es que despues de enviar el correo me muestra solamente esto:

Resultado

Estas imagenes son de mi resultado despues de presionar el boton Enviar Informacion

Mi boton Enviar Informacion

Lo que tengo es lo siguiente:

Mi Archivo de Formulario>

    <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`device-width`, initial-scale=1.0">
    <title>Bolsa de empleo | Cooperativa Chorotega</title>

    <?php include'head.php' ?>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="stretched" >
    <div id="wrapper" class="clearfix">
    <?php include'top-bar.php' ?>

    <header id="header" class="full-header">
            <?php include'menu.php' ?>
    </header>
    
    <section id="page-title">

            <div class="container clearfix heading-block2">
                <h1>Formulario Bolsa de empleo</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="./">Inicio</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Formulario Bolsa de empleo</li>
                </ol>
            </div>

        </section>
        
        <section id="content">
            <div class="container clearfix">

                <div class="heading-block m-t-45 center wow fadeIn" data-wow-duration="1.9s">
                    <h2 style="text-align: left;">Solicitud de empleo</h2>
                    <span class="divcenter" style="font-size: 15px; text-align: justify;margin-left: 0 !important; max-width: fit-content;">En Cooperativa Chorotega entendemos que la situación actual puede estar afectando las finanzas de nuestros afiliados. Por eso, a continuación ponemos a disposición la solicitud para acogerse al beneficio.<br>
                        <b>**Nota: toda la informacion aquí proporcionada sera tratada con confidencialidad</b></span>
                
                                   
                </div>

                <div class="row bottommargin-sm c-azul">
                    <div class="container clearfix">


                        <form class="nobottommargin" method="post" id="bolsa" enctype="multipart/form-data" action="php/mailbolemp.php"  novalidate="novalidate">

                                <div class="col_one_third c-azul">
                                    <label for="puesto">Puesto al que aplica:<small>*</small></label>
                                    <input type="text" id="puesto" name="puesto" value="" class="sm-form-control required">
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="nombre1">Primer nombre:<small>*</small></label>
                                    <input type="text" id="nombre1" name="nombre1" value="" class="sm-form-control required">
                                </div>
                                
                                <div class="col_one_third col_last c-azul">
                                    <label for="nombre2">Segundo nombre:<small>*</small></label>
                                    <input type="text" id="nombre2" name="nombre2" value="" class="sm-form-control required">
                                </div>
                                
                                <div class="col_one_third c-azul">
                                    <label for="apellido1">Primer apellido:<small>*</small></label>
                                    <input type="text" id="apellido1" name="apellido1" value="" class="sm-form-control required">
                                </div>
                                
                                <div class="col_one_third c-azul">
                                    <label for="apellido2">Segundo apellido:<small>*</small></label>
                                    <input type="text" id="apellido2" name="apellido2" value="" class="sm-form-control required">
                                </div>

                                <div class="col_one_third c-azul col_last ">
                                    <label for="genero">Genero :<small>*</small></label>
                                    <select name="selectgenero" id="genero" class="sm-form-control required" required="">
                                    <option value="0">Seleccione el genero</option>
                                    <option value="Masculino">Masculino</option>
                                    <option value="Femenino">Femenino</option> 
                                   </select>
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="estatura">Estatura (Metros)<small>*</small></label>
                                    <input type="text" id="estatura" name="estatura" value="" class="sm-form-control required">
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="peso">Peso (Libras)<small>*</small></label>
                                    <input type="text" id="peso" name="peso" value="" class="sm-form-control required">
                                </div>

                                <div class="col_one_third col_last c-azul">
                                    <label for="identificacion">Número de identidad <small>*</small></label>
                                    <input type="text" id="identificacion" name="identificacion" placeholder="Con guiones" value="" class="sm-form-control">
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="phone">Teléfono<small>*</small></label>
                                    <input type="text" id="phone" name="phone" value="" class="sm-form-control">
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="nacionalidad">Nacionalidad<small></small></label>
                                    <input type="text" id="nacionalidad" name="nacionalidad" value="" class="sm-form-control">
                                </div>
                                
                                <div class="col_one_third col_last c-azul">
                                    <label for="nacimiento">Fecha de nacimiento<small></small></label>
                                    <input type="date" id="nacimiento" placeholder="30 / 12 / 2020" name="nacimiento" value="" class="sm-form-control">
                                </div>
                                
                                <div class="col_full c-azul" id="especifico">
                                    <label for="domicilio">Domicilio <small>*</small></label>
                                    <textarea class="required sm-form-control " id="domicilio" name="domicilio" rows="2" cols="15"></textarea>
                                </div>
                                
                                <div class="col_one_third c-azul">
                                    <label for="estado">Estado civil :<small>*</small></label>
                                    <select name="selectestado" id="estado" class="sm-form-control required" required="">
                                    <option value="0">Seleccione el estado</option>
                                    <option value="Soltero">Soltero</option>
                                    <option value="Casado">Casado</option>
                                    <option value="Union Libre">Union Libre</option>
                                    <option value="Divorciado">Divorciado</option>
                                    <option value="Viudo">Viudo</option>
                                   </select>
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="licencia">Tipo de licencia :<small>*</small></label>
                                    <select name="selectlicencia" id="licencia" class="sm-form-control required" required="">
                                    <option value="0">Seleccione el tipo de licencia</option>
                                    <option value="Licencia Liviana">Licencia Liviana</option>
                                    <option value="Licencia Pesada Articulada">Licencia Pesada Articulada</option>
                                    <option value="Licencia Pesada no Articulada">Licencia Pesada no Articulada</option>
                                    <option value="Licencia de Motocicleta">Licencia de Motocicleta</option>
                                   </select>
                                </div>

                                <div class="col_one_third c-azul col_last">
                                    <label for="auto">¿Tiene auto? :<small>*</small></label>
                                    <select name="selectauto" id="auto" class="sm-form-control required" required="">
                                    <option value="0">Seleccione</option>
                                    <option value="Si">Si</option>
                                    <option value="No">No</option>
                                   </select>
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="motocicleta">¿Tiene motocicleta? :<small>*</small></label>
                                    <select name="selectmotocicleta" id="motocicleta" class="sm-form-control required" required="">
                                    <option value="0">Seleccione</option>
                                    <option value="Si">Si</option>
                                    <option value="No">No</option>
                                   </select>
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="viajar">¿Puede viajar? :<small>*</small></label>
                                    <select name="selectviajar" id="viajar" class="sm-form-control required" required="">
                                    <option value="0">Seleccione</option>
                                    <option value="Si">Si</option>
                                    <option value="No">No</option>
                                   </select>
                                </div>

                                <div class="col_one_third col_last c-azul">
                                    <label for="correo">Correo Electrónico</label>
                                    <input type="email" id="correo" name="correo" value="" class="sm-form-control">
                                </div>
                                
                                <div class="col_one_third c-azul primero">
                                    <label for="vivecon">¿Vive con? :<small>*</small></label>
                                    <select name="selectvivecon" id="vivecon" class="sm-form-control required" required="">
                                    <option value="0">Seleccione</option>
                                    <option value="Otros">Otros</option>
                                    <option value="Sus Padres">Sus Padres</option>
                                    <option value="Su Familia">Su Familia</option>
                                    <option value="Solo">Solo</option>
                                   </select>
                                </div>

                                <div class="col_one_third c-azul col_last segundo">
                                    <label for="parientes">¿Tiene parientes trabajando en esta empresa? :<small>*</small></label>
                                    <select name="selectparientes" id="parientes" class="sm-form-control required" required="">
                                    <option value="0">Seleccione</option>
                                    <option value="Si">Si</option>
                                    <option value="No">No</option>
                                   </select>
                                </div>

                                <div class="col_full c-azul" id="especifico">
                                    <label for="parentesco">Si su respuesta es si, favor indiquenos el nombre y parentesco <small>*</small></label>
                                    <textarea class="required sm-form-control " id="parentesco" name="parentesco" rows="2" cols="15"></textarea>
                                </div>

  
                                    <h3>Estado de salud / Hábitos personales</h3><br>
                                
                                <div class="col_one_third c-azul primero">
                                    <label for="salud">¿Cómo considera su estado de salud actual? :<small>*</small></label>
                                    <select name="selectsalud" id="salud" class="sm-form-control required" required="">
                                    <option value="0">Seleccione</option>
                                    <option value="Excelente">Excelente</option>
                                    <option value="Bueno">Bueno</option>
                                    <option value="Regular">Regular</option>
                                   </select>
                                </div>
                                
                                <div class="col_one_third col_last c-azul segundo">
                                    <label for="religion">¿Religión? :<small>*</small></label>
                                    <select name="selectreligion" id="religion" class="sm-form-control required" required="">
                                    <option value="0">Seleccione</option>
                                    <option value="Adventista">Adventista</option>
                                    <option value="Católico">Católico</option>
                                    <option value="Evangélico">Evangélico</option>
                                    <option value="Mormón">Mormón</option>
                                    <option value="Testigo de Jehova">Testigo de Jehova</option>
                                   </select>
                                </div>  

                                <div class="col_one_third c-azul primero">
                                    <label for="club">¿Pertenece  a algun club social y deportivo?<small></small></label>
                                    <input type="text" id="club" name="club" value="" class="sm-form-control">
                                </div>

                                <div class="col_one_third col_last c-azul segundo">
                                    <label for="pasatiempo">¿Cuál es su pasatiempo favorito?<small></small></label>
                                    <input type="text" id="pasatiempo" name="pasatiempo" value="" class="sm-form-control">
                                </div>

                                <div class="col_full c-azul" id="especifico">
                                    <label for="meta">¿Cuál es su meta en la vida?<small>*</small></label>
                                    <textarea class="required sm-form-control " id="meta" name="meta" rows="6" cols="30"></textarea>
                                </div>

                                
                                <h3>Escolaridad</h3><br>

                                <div class="col_one_third c-azul">
                                    <label for="escolaridad">Nivel de escolaridad alcanzado<small></small></label>
                                    <input type="text" id="escolaridad" name="escolaridad" value="" class="sm-form-control">
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="obtenido">Último título obtenido<small></small></label>
                                    <input type="text" id="obtenido" name="obtenido" value="" class="sm-form-control">
                                    <input type="text" id="obtenido2" name="obtenido2" value="" class="sm-form-control" placeholder="Nivel">
                                </div>

                                <div class="col_one_third col_last c-azul">
                                    <label for="cursando">Actualmente cursando carrera<small></small></label>
                                    <input type="text" id="cursando" name="cursando" value="" class="sm-form-control">
                                    <input type="text" id="cursando2" name="cursando2" value="" class="sm-form-control" placeholder="Nivel">
                                </div>

                                <div class="col_full  c-azul">
                                    <label for="relevantes">Otros conocimientos academicos relevantes<small></small></label>
                                    <input type="text" id="relevantes" name="relevantes" value="" class="sm-form-control">
                                </div>
                               

                                <h3>Conocimientos Generales</h3><br>

                                <div class="col_one_third c-azul">
                                    <label for="oficina">Funciones de oficina que domina<small>*</small></label>
                                    <input type="text" id="oficina" name="oficina" value="" class="sm-form-control required">
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="funciones">Otros trabajos o funciones que domina<small>*</small></label>
                                    <input type="text" id="funciones" name="funciones" value="" class="sm-form-control required">
                                </div>

                                <div class="col_one_third col_last c-azul">
                                    <label for="taller">Maquina de oficina o taller que sepa manejar<small>*</small></label>
                                    <input type="text" id="taller" name="taller" value="" class="sm-form-control required">
                                </div>
     
                                <h3>Empleo Actual y Anteriores</h3><br>

                                <div class="col_one_third c-azul">
                                    <label for="empleo">Añadir empleo<small></small></label>
                                    <input type="text" id="empleo" name="empleo" value="" class="sm-form-control required">
                                </div>

                                <div class="col_one_third c-azul">
                                    <label for="empresa">Nombre de la empresa<small></small></label>   
                                    <input type="text" id="empresa" name="empresa" value="" class="sm-form-control required">
                                </div>

                                <div class="col_one_third c-azul col_last">
                                    <label for="xpuesto">Puesto<small></small></label>
                                    <input type="text" id="xpuesto" name="xpuesto" value="" class="sm-form-control required">
                                </div>

                                <div class="col_full c-azul">
                                    <label for="periodo">Periodo<small></small></label>
                                    <input type="text" id="periodo" name="periodo" value="" class="sm-form-control required">
                                </div>

                                <h3>Datos Económicos</h3><br>

                                <div class="col_one_third c-azul primero">
                                    <label for="ingresos">¿Tiene usted otros ingresos? :<small>*</small></label>
                                    <select name="selectingresos" id="ingresos" class="sm-form-control required" required="">
                                    <option value="0">Seleccione</option>
                                    <option value="Si">Si</option>
                                    <option value="No">No</option>
                                   </select>
                                </div>

                                <div class="col_one_third col_last c-azul segundo">
                                    <label for="gastos">¿A cuanto ascienden sus gastos mensuales?<small>*</small></label>
                                    <input type="text" id="gastos" name="gastos" value="" class="sm-form-control required">
                                </div>

                                <div class="col_one_third primero c-azul">
                                    <label for="mensual">Sueldo mensual deseado<small>*</small></label>
                                    <input type="text" id="mensual" name="mensual" value="" class="sm-form-control required">
                                </div>
                      

                                <br><br>
                                <div class="col_full c-azul">
                                    <label for="foto" style="text-align: justify;color:#868e96; ">Subir fotografia<small>*</small></label>
                                    <input type="file" required id="foto" name="foto" value="" required class="sm-form-control" >
                                </div>

                                <br>

                                <div class="col_full form-row submit-button form-submit">
                                    <div class="centrar">
                                     <input type="checkbox" id="box-9"  value="Terminos">
                                    <label for="box-9">Acepto<strong><a target="_blank" href="documentos/y.pdf"> Términos y condiciones.</a></strong> </label>
                                    
                                    <button type="submit" id="submit" name="submit" value="submit" class="btn btn-primary">Enviar informacion</button>
                                    </div>

                                    <div id="msgE"></div>
                                
                                </div>

                                

                        </form>     

                    </div>

                </div>
            </div>
        </section>
        

    <?php include'social.php' ?>
        <footer id="footer" class="dark">
            <?php include'footer.php' ?>
        </footer>

    
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.1/jspdf.debug.js"></script>
    <script>
        let myForm = document.getElementById('bolsa');
        let formData = new FormData(myForm);
    
        $.ajax({
            dataType: "JSON",
            url: "php/mailbolemp.php",
            type: "POST",
            data: formData,
             contentType:false,
            processData:false,
            cache:false,
            beforeSend: function(xhr) {
                $("#submit").html('Enviando... Por favor espere');
            },
            success: function(response) {
                if(response){
                    if(response['signal'] == 'ok'){
                       alert(response['msg']);
                         $("#submit").html('Enviar');
                    } else {
                        alert(response['msg']);  
                        $("#submit").html('Enviar');
                    }
                }
            },
            error: function() {
                $('#msgE').html('<div class="mailFailE">Error</div>');
            },
            complete: function() {
                $("#enviarE").html('Enviar'); 
                $("#submit").html('Enviar');
            }
        });
    });

</script>

</div>

    <div id="gotoTop" class="icon-angle-up"></div>
</body>

</html>

Y Este es el codigo de mi PHP Mailer para mandar el correo

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

$puesto = trim($_POST['puesto']);
$nombre1 = trim($_POST['nombre1']);
$nombre2 = trim($_POST['nombre2']);
etc..
$mensual = trim($_POST['mensual']);

if($nombre1 != null) {
if ($identificacion !=null) {

        $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   = '[email protected]';                     // SMTP username
        $mail->Password   = 'mipassword*';                               // SMTP password
        $mail->SMTPSecure = 'ssl';                                  // Enable TLS encryption, `ssl` also accepted
        $mail->Port       = 465;                                    // TCP port to connect to                                   // TCP port to connect to
        //Recipients
        $mail->setFrom($correo, $nombre1);
        $mail->AddAddress('[email protected]');
        $mail->addAddress($correo, 'Solicitud de empleo');
        $mail->addReplyTo($correo, $nombre1);

         $mail->isHTML(true);
        //echo $_FILES['cv-upload']['tmp_name'];
        $mail->addAttachment($_FILES['foto']['tmp_name'],$_FILES['foto']['name']);

         $mail->Subject = 'Solicitud de empleo';
         $mail->Body    = 'Puesto al que aplica: ' . $puesto . '<br>Primer nombre: ' . $nombre1 . '<br>Segundo nombre: ' . $nombre2 . '<br>Primer apellido: ' . $apellido1 . '<br>Segundo apellido: ' . $apellido2. etc...;

        if(!$mail -> send()) {
            $signal = 'bad';
            $msg = 'Mailer Error: ' . $mail -> ErrorInfo;
        } else {
            $signal = 'ok';
            $msg = '¡Tu Solicitud ha sido enviada! Pronto nos estaremos poniendo en contacto contigo!';
        }
    }else{
    $signal = 'bad';
    
    $msg = 'Por favor, Seleccione todos los campos obligatorios (*).';
}
    
}else {
    
    $signal = 'bad';
    $msg = 'Por favor, llena todos los campos obligatorios (*).';
}

$data = array(
    'signal' => $signal,
    'msg' => $msg
);

echo json_encode($data);

?>

Alguien sabe que tengo mal hecho y que consejo o sitios web me da para mejorar en estos temas.

3
  • 2
    Todo el código de la petición AJAX debería estar dentro de una función y ejecutarse hasta que se haga clic en el botón submit y donde puedas cancelar el proceso normal con event.preventDefault();. De hecho, me sorprende que tengas oportunidad de llenar el formulario así como lo tienes.
    – Triby
    el 30 jul. 2020 a las 1:32
  • muchas gracias por la observacion amigo, ahora me funciona gracias a su ayuda. Tengo otra consulta siempre con el mismo formulario pero no se si puedo molestarte aqui con ello.
    – Ragnar
    el 30 jul. 2020 a las 7:11
  • Si el problema está relacionado, edita la pregunta, coloca tu código actual y agrega la duda que tienes.
    – Triby
    el 30 jul. 2020 a las 14:14

1 respuesta 1

1

La primer observacion es que el codigo JS y el AJAX se ejecuta antes de que cargue el dom. Por lo tanto debes registrar el evento de carga de la pagina primero. Segundo es que debes enviar el AJAX cuando se hace click en el boton enviar. Ejemplo:

$(document).ready(function () {
    //Objeto boton enviar.
    var btnSend = $("#submit");
    //Registro el evento click el boton. 
    btnSend.on("click", function (event) {
        //Aca debes de validar el formulario antes de enviar. Tu codigo...
        let myForm = document.getElementById('bolsa');
        let formData = new FormData(myForm);
        //Ejecuto ajax.
        $.ajax({
            dataType: "JSON",
            url: "php/mailbolemp.php",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            beforeSend: function (xhr) {
                btnSend.val('Enviando... Por favor espere');
            },
            success: function (response) {
                try {
                    //Response es texto plano. debes convertilo a JSON Object para acceder a las propiedades.
                    var jsonData = JSON.parse(response);
                    if (jsonData.signal === 'ok') {
                        btnSend.val('Enviar');
                    } else {
                        btnSend.val('Enviar');
                    }
                } catch (e) {
                    console.log(e);
                }

            },
            error: function () {
                btnSend.val('Enviar');
                $('#msgE').html('<div class="mailFailE">Error</div>');
            },
            complete: function () {
                btnSend.val('Enviar');
                //no entiendo este submit aca??????
                //$("#submit").html('Enviar');
            }
        });

        event.preventDefault();
    });

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.