I have a booking form at a restaurant and I require that the reservation information be sent to the restaurant and a message that the reservation was received by the client. I have two php files, each one sends the emails separately, but when I do it together it does not work for me, what am I doing wrong and how do I solve it? This is the code:
//Formulario de contacto movil
$("#fomulariollamada_mov").submit(function (event) {
// cancels the form submission
event.preventDefault();
$("#enviando_mov").removeClass("d-none");
submitForm_mov();
});
function submitForm_mov() {
// Initiate Variables With Form Content
var nombre = $("#Nombre_mov").val();
var tel = $("#NumeroTelefono_mov").val();
var email = $("#CorreoElectronico_mov").val();
var mensaje = $("#Motivo_mov").val();
var personas = $("#Personas_mov").val();
var fecha = $("#Fecha_mov").val();
var hora = $("#Hora_mov").val();
var ampm = $("#AmPm_mov").val();
$.ajax({
type: "POST",
url: "../php/contacto.php",
data: "name=" + nombre + "&email=" + email + "&tel=" + tel + "&mensaje=" + mensaje + "&personas=" + personas + "&fecha=" + fecha + "&hora=" + hora + "&m=" + ampm,
success: function (text) {
if (text == "success") {
formSuccess_mov();
} else {
console.log("Error de PHP. No retorna Success", text);
}
}
});
}
function formSuccess_mov() {
$("#enviando_mov").addClass("d-none");
$("#msgSubmit_mov").removeClass("d-none");
$('input[type=text],input[type=email],input[type=tel],textarea,input[type=number],input[type=date],input[type=time],select').val('');
$.ajax({
type: "POST",
url: "../php/cliente.php",
data: "name=" + nombre + "&email=" + email + "&tel=" + tel + "&mensaje=" + mensaje + "&personas=" + personas + "&fecha=" + fecha + "&hora=" + hora + "&m=" + ampm,
success: function (text) {
if (text == "success") {
console.log("Enviado al cliente", text);
} else {
console.log("Error de PHP. No retorna Success en cliente", text);
}
}
});
}body{background-color: #ffffff;background-repeat:no-repeat;background-size:cover}body #menu-licores{height:40px} body img{margin-top:50px;width:80vw}body .btn-outline-primary{background-color:#ffffff;border-color:black;color:black}body .btn-outline-primary:hover{border-color:#ffffff;background-color:#5eb800;color:#ffffff;-webkit-box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75);box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75)}.modal-header{background-color:#5eb800;color:#ffffff;height:70px}.modal-header h3{font-size:20px;font-weight:700}.modal-body{background-color: #f1f1f1;} input, textarea{font-size:14px}#enviando_mov,#contenedor-fechahora{color:#f1f1f1;background-color:#000000;background-color:rgba(0,0,0,0.5);border:0}#msgSubmit_mov{font-size:13px}.d-none{display:none !important}.close{color:#ffffff}.close:hover{color:#5eb800}#form-submit:hover{background-color:#ffa500;color:#ffffff;-webkit-box-shadow:5px 5px 2.5px 0px rgba(0,0,0,0.8);box-shadow:5px 5px 2.5px 0px rgba(0,0,0,0.8)}#seleccion-motivo p{color:#f1f1f1;background-color:#000000;background-color:rgba(0,0,0,0.5)}#seleccion-motivo select{color:#484848}@media (min-width: 576px){body img{margin-top:120px;width:70vw}}@media (min-width: 768px){body img{margin-top:150px;width:60vw}}@media (min-width: 992px){body{background-image:url(../imagenes/fondopc.jpg)} body img{margin-top:100px;width:20vw} body .btn-outline-primary{background-color:transparent}}@media (min-width: 1800px){body .btn-outline-primary{font-size:25px;font-weight:700;padding-left:30px !important;padding-right:30px !important;border-style:inset;border-width:2px}body .btn-outline-primary:hover{border-style:solid;border-width:0px}}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body class="text-center container-fluid">
<form role="form" id="fomulariollamada_mov" class="px-2 px-md-5">
<div class="form-group mb-1 mt-3">
<input type="text" class="form-control border border-primary border-0 pl-4 ml-0" id="Nombre_mov" placeholder="Nombre" required>
</div>
<div class="form-group mb-1 mt-3">
<input type="email" class="form-control border border-primary border-0 pl-4 ml-0" id="CorreoElectronico_mov" placeholder="Email" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_'{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required>
</div>
<div class="form-group mb-1 mt-3 row pl-3">
<input type="tel" class="form-control border border-primary border-0 pl-4 ml-0 col-7 mr-2" id="NumeroTelefono_mov" pattern="[0-9]{10}" title="Número celular (10 digitos) sin espacios" placeholder="Teléfono" required>
<input type="number" class="form-control border border-primary border-0 ml-0 col-4" id="Personas_mov" pattern="[0-9]{10}" title="Número de personas" placeholder="#Personas" required>
</div>
<div class="form-group mb-1 mt-0 row pl-3" id="seccion-fechahora">
<div class="col-11 ml-1 row" id="contenedor-fechahora">
<p class="m-0 p-0 pb-1 col-5"><b>Fecha:</b></p>
<p class="m-0 p-0 pb-1 col-6"><b>Hora:</b></p>
</div>
<input type="date" class="form-control border border-primary border-0 pl-4 ml-0 col-5 mr-2" id="Fecha_mov" pattern="[0-9]{10}" title="Número celular (10 digitos) sin espacios" placeholder="Fecha" required>
<input type="time" class="form-control border border-primary border-0 ml-0 mr-2 col-3" id="Hora_mov" pattern="[0-9]{10}" title="Número de personas" placeholder="Hora" required>
<select class="form-control col-3" id="AmPm_mov" required>
<option value="am">am</option>
<option value="pm">pm</option>
</select>
</div>
<div class="form-group mb-1 mt-0 pb-2" id="seleccion-motivo">
<p class="m-0 p-0 pb-1"><b>Motivo de la reserva:</b></p>
<select class="form-control" id="Motivo_mov" required>
<option value="Cena de amor y amistad">Cena de amor y amistad</option>
<option value="Aniversario">Amigos</option>
<option value="Aniversario">Aniversario</option>
<option value="Cita Romántica">Cita Romántica</option>
<option value="Cumpleaños">Cumpleaños</option>
<option value="Despedida">Despedida</option>
<option value="Grado">Grado</option>
<option value="Negocios">Negocios</option>
<option value="Otro">Otro</option>
</select>
</div>
<div class="alert alert-light my-0 p-0 d-none" role="alert" id="enviando_mov">
<p><strong>enviando...</strong></p>
</div>
<div class="alert alert-success d-none" role="alert" id="msgSubmit_mov">
<strong>¡Bien hecho!</strong> Tu mensaje se ha enviado exitosamente. <strong> Pronto te contactaremos.</strong>
</div>
<div class="form-group text-right mt-1">
<button type="submit" class="btn" id="form-submit">Enviar</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
</html>