Hola quería saber como puedo hacer para que cuando un usuario complete correctamente el formulario genere un mensaje de envió sin tener que generar una pagina extra de envió. La idea que tenia era que por ahí una ves completado el formulario y enviado desaparezca el form y solo aparezca el mensaje de Muchas gracias!, se puede generar algo asi eso?
$(".formValidation").on("submit", function(e){
var errorMessage = $(".errorMessage");
var hasError = false;
$(".inputValidation").each(function(){
var $this = $(this);
if($this.val() == ""){
hasError = true;
$this.addClass("inputError");
errorMessage.html("<p>Por favor, complete los siguientes campos.</p>");
e.preventDefault();
}if($this.val() != ""){
$this.removeClass("inputError");
}else{
return true;
}
}); //Input
errorMessage.slideDown(700);
}); //Form .submit
.info-section .imagen-formulario{
overflow: hidden;
margin-bottom: 0;
}
.info-section .inputError{
background-color: #9e46578c!important;
border-bottom: 2px solid #824747!important;
color: #fff;
}
.info-section .inputError::-webkit-input-placeholder{
color: #fff;
}
.info-section .errorMessage{
/*background-color: #d03e3e; */
color: #fff;
clear: right;
display: none;
font-size: 14px;
font-weight: bold;
height: 55px;
letter-spacing: 1px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
margin-top: 21px;
}
.info-section .errorMessage p{
margin: 0px;
padding: 19px 0px 0px 30px;
text-align: left;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<section class="info-section seccion_form py-0" style="background-color: #b45d3e!important">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 p-0 m-0">
<figure class="imagen-formulario">
<img src="http://qkdev.com.ar/pruebas/welivery_web/images/imagen_form.jpg" class="img-fluid">
</figure>
</div>
<div class="col-md-6 col-lg-6 content-half mt-0 px-lg-5 pt-lg-5">
<div class="head-box mb-5 pl-md-5 mt-2" style="position: relative;">
<h2 class="text-white text-underline-rb-white">
Contáctanos
</h2>
<hr class="hr_contacto">
</div>
<div class="clearfix"></div>
<form class="formValidation px-lg-2">
<div class="form-group">
<input type="name" class="form-control inputValidation" id="exampleInputEmail1" aria-describedby="ecommerce" placeholder="Ecommerce">
</div>
<div class="form-group">
<input type="name" class="form-control inputValidation" id="exampleInputEmail1" aria-describedby="nombre" placeholder="Nombre">
</div>
<div class="form-group">
<input type="phone" class="form-control inputValidation" id="exampleInputEmail1" aria-describedby="phone" placeholder="Teléfono">
</div>
<div class="form-group mb-5">
<input type="email" class="form-control inputValidation" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
</div>
<button type="submit" class="btn btn_enviar_form">ENVIAR</button>
</form>
<div class="errorMessage"></div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>