Tengo un formulario por donde envían información y documentos en HTML y todas las variables las paso a JavaScript para mostrar un mensaje con Ajax cuando todo sale bien en el mismo formulario y limpiarlo. En la página web he realizado dos más que me funcionan bien pero ahora tengo el lió que necesito adjuntar dos archivos y no se como pasarlos:
Código Html, lo hice usando bootstrap:
<form class="px-5 col-12 my-3" id="env_documentos" role="form" enctype="multipart/form-data">
<div class="form-group mb-1 row">
<input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="NombreDoc" placeholder="Su nombre completo" data-toggle="tooltip" data-animation="false" data-placement="top" title="Ingresa tu nombre completo" autocomplete="off" required>
</div>
<div class="form-group mb-1 row">
<input type="tel" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TelefonoDoc" placeholder="Su número celular" data-toggle="tooltip" data-animation="false" data-placement="left" pattern="[0-9]{10}" title="Número celular (10 digitos) sin espacios" autocomplete="off" required>
</div>
<div class="form-group mb-1 row">
<input type="email" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="CorreoDoc" placeholder="[email protected]" data-toggle="tooltip" data-animation="false" data-placement="right" title="Ingresa tu nombre completo" autocomplete="off" required>
</div>
<div class="form-group mb-1 row">
<label for="TipoCredito" class="mb-0 mt-2 col-12"><b>Destinación del crédito</b></label>
<select class="custom-select col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TipoCredito" required>
<option selected>Seleccione uno...</option>
<option value="Vehículo">Vehículo</option>
<option value="Inmueble">Inmueble</option>
</select>
</div>
<div class="form-group mb-1 row">
<label for="TipoEmpleo" class="mb-0 mt-2 col-12"><b>¿Usted es empleado o independiente?</b></label>
<select class="custom-select col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TipoEmpleo" required>
<option selected>Seleccione uno...</option>
<option value="Empleado">Empleado</option>
<option value="Independiente">Independiente</option>
</select>
</div>
<div class="form-group mb-1 row mt-3">
<p class="col-12 m-0 p-0">Adjunte carta laboral, si es empleado o extracto bancario si es independiente</p>
<label class="custom-file col-md-4 offset-md-4 col-lg- offset-lg-5">
<input type="file" name="Cerficado" id="documento1">
</label>
</div>
<div class="form-group mb-1 row mt-3">
<p class="col-12 m-0 p-0">Cédula de ciudadanía</p>
<label class="custom-file col-md-4 offset-md-4 col-lg- offset-lg-5">
<input type="file" name="Cerficado" id="documento2">
</label>
</div>
<div class="form-group mb-1 row">
<label for="Referencia1" class="mb-0 mt-2 col-12"><b>1ra Referencia personal:</b></label>
<input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="NombreRef1" placeholder="Nombre completo" data-toggle="tooltip" data-animation="false" data-placement="top" title="Nombre completo" autocomplete="off" required>
<input type="tel" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TelefonoRef1" placeholder="Número de teléfono" data-toggle="tooltip" data-animation="false" data-placement="left" title="Número celular ó fijo con indicativo sin espacios" autocomplete="off" required>
<input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="DireccionRef1" placeholder="Dirección" data-toggle="tooltip" data-animation="false" data-placement="right" title="Dirección de residencia" autocomplete="off" required>
<input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="CargoRef1" placeholder="Cargo / labor" data-toggle="tooltip" data-animation="false" data-placement="left" title="Cargo o labor que desempeña" autocomplete="off" required>
</div>
<div class="form-group mb-1 row">
<label for="Referencia2" class="mb-0 mt-2 col-12"><b>2da Referencia personal:</b></label>
<input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="NombreRef2" placeholder="Nombre completo" data-toggle="tooltip" data-animation="false" data-placement="top" title="Nombre completo" autocomplete="off" required>
<input type="tel" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TelefonoRef2" placeholder="Número de teléfono" data-toggle="tooltip" data-animation="false" data-placement="left" title="Número celular ó fijo con indicativo sin espacios" autocomplete="off" required>
<input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="DireccionRef2" placeholder="Dirección" data-toggle="tooltip" data-animation="false" data-placement="right" title="Dirección de residencia" autocomplete="off" required>
<input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="CargoRef2" placeholder="Cargo / labor" data-toggle="tooltip" data-animation="false" data-placement="left" title="Cargo o labor que desempeña" autocomplete="off" required>
</div>
<label class="form-check-label letramini gris text-white fondoblanco">
<input class="form-check-input" type="checkbox" value="" required>He leído y acepto la <a class="" href="" data-toggle="modal" data-target="#Aprovacion">política de tratamiento de datos personales</a>
</label>
<!-- Menú presentado en una ventana Modal -->
<div class="modal" id="Aprovacion" tabindex="-1" role="dialog" aria-labelledby="ModalAprovacion" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- INICIO CABECERA DE LA VENTANA MODAL (MENU) -->
<div class="modal-header">
<img src="img/SVG/logo.svg" alt="Logotipo Tu Crédito Fácil" class="logo">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<!-- FIN CABECERA DE LA VENTANA MODAL (MENU) -->
<!-- INICIO CUERPO DE LA VENTANA MODAL (MENU) -->
<div class="modal-body m-0 p-0">
<div class="text-center banda-azul p-2">
<p class="text-white p-0 m-0"><i class="fa fa-info-circle mr-1 ml-0 text-white" aria-hidden="true"></i>INFORMACIÓN IMPORTANTE<br>Autorización <span class="text-info">Manejo de la información</span></p>
</div>
</div>
<!-- FIN CUERPO DE LA VENTANA MODAL (MENU) -->
<p class="px-5 py-3">
Autorizo de manera voluntaria, previa, expresa e informada a Empresa para la recolección y posterior análisis de los datos aquí suministrados, con la finalidad de ser contactado y a través de ellos poder tramitar un crédito en diferentes entidades financieras o mediar en la compra de un inmueble o vehículo, según sea el servicio que solicite. Así mismo, declaro que he sido informado sobre el derecho que tengo a conocer, actualizar y rectificar mis datos personales, solicitar prueba de la autorización, ser informado sobre el tratamiento que se ha dado a mis datos personales, presentar quejas ante la Superintendencia de Industria y Comercio (SIC), revocar la autorización otorgada y/o solicitar la supresión de mis datos en los casos en que sea procedente, conoce más sobre esta política dando <a href="legal/politica_datos_personales.html" target="_blank">click</a>
</p>
<!-- INICIO PÍE DE PÁGINA DE LA VENTANA MODAL (MENU) -->
<div class="modal-footer m-0 p-4 text-center">
<p class="m-0 p-0">Pará más información contactenos a las líneas telefonicas<br>311 111 1111 - 311 111 1111</p>
</div>
<!-- INICIO PÍE DE PÁGINA DE LA VENTANA MODAL (MENU) -->
</div>
</div>
</div>
<!-- fin de Modal -->
<div class="text-center mt-3">
<button type="button" class="btn btn-danger">Enviar</button>
</div>
<div class="alert alert-success hidden-xl-down mt-2" role="alert" id="msgDocu">
<strong>¡Bien hecho!</strong> La información ha sido enviada exitosamente. <strong> Pronto te contactaremos e informaremos el resultado de tu solicitud.</strong>
</div>
</form>
este es el código normal conque capturo los valores y después envío a php:
$("#form-consulta").submit(function(event){
// cancela el envío del formulario
event.preventDefault();
submitForm();
});
function submitForm(){
// Initiate Variables With Form Content
var nombre = $("#NombreContacto").val();
var tel = $("#NumeroContacto").val();
var email = $("#CorreoContacto").val();
var mensaje =$("#Consulta").val();
$.ajax({
type: "POST",
url: "php/contacto.php",
data: "name=" + nombre + "&email=" + email + "&tel=" + tel + "&mensaje=" + mensaje,
success : function(text){
if (text == "success"){
formSuccess();
}
else {
console.log("Error de PHP. No retorna Success",text);
}
}
});
}
function formSuccess(){
$( "#msgContacto" ).removeClass( "hidden-xl-down" );
$('input[type=text],input[type=email],input[type=tel],textarea').val('');
}
en PHP los capturo y envío así:
<?php
$name = $_POST["name"];
$email = $_POST["email"];
$tel = $_POST["tel"];
$mensaje = $_POST["mensaje"];
// A quien se va a enviar el correo y el asunto que va a llevar
$EmailTo = "[email protected]";
$Subject = "Información solicitada a través del Sitio WEB";
// preparando el contenido del correo
$Body = '<html>'.
'<head><title>Contacto WEB</title></head>'.
'<body><h3>La siguiente persona nos ha contactado por medio del formulario WEB:</h3>'.
'<strong>'.
'Nombre: '.
'</strong>';
$Body .= $name;
$Body .= '<br>'.
'<strong>'.
'E-mail: '.
'</strong>';
$Body .= $email;
$Body .= '<br>'.
'<strong>'.
'Teléfono: '.
'</strong>';
$Body .= $tel;
$Body .= '<br>'.
'<br>'.
'<strong>'.
'Dejando el siguiente mensaje: '.
'</strong>';
$Body .= $mensaje;
$Body .= '</body>'.
'</html>';
// para el envío en formato HTML
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8"."\r\n";
//dirección del remitente
$headers .= "From: Contacto WEB <[email protected]>\r\n";
// dirección de respuesta, en este caso sera la que se ingresa en el formulario
$headers .= "Reply-To:" . $email . "\r\n";
// ruta del mensaje desde origen a destino
$headers .= "Return-path:";
$headers .= $mail;
$headers .= "\r\n";
// direcciones que recibián copia
$headers .= "Cc: [email protected]\r\n";
// direcciones que recibirán copia oculta
$headers .= "Bcc: [email protected]\r\n";
// envio del correo electrónico
$success = mail($EmailTo, $Subject, $Body, $headers);
// enviando el mensaje de que fue correcto el envío para que aparezca en el formulario el mensaje
if ($success){
echo "success";
}else{
echo "invalid";
}
?>
por ejemplo. Ahora mi consulta es: ¿Cómo hago para capturar los dos?:
<input type="file" name="Cerficado" id="documento1">
<input type="file" name="Cerficado" id="documento2">
y pasarlos por JavaScript para pasarlo a PHP y enviarlos como adjunto?
Bueno no se si sera sencillo o difícil pero para el que anda aprendiendo como yo y no encuentra casi documentación es difícil. De antemano muchas gracias