How to generate a message after completing a form correctly

Navigation
0

Hi, I wanted to know how I can do so that when a user completes the form correctly, it generates a sending message without having to generate an extra page of sending. The idea that I had was that once the form was completed and the form disappeared and only the message of Thank you appears, can something like that be generated? 

$(".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>
    
asked by Mariano Andres Franco 13.11.2018 в 00:48
source

1 answer

0

in the errorMessage div you insert the message and at the same time you hide the contents of your form so that only your message is visible

example if the operation was successful 

$(".errorMessage").html('<p class="errorMessage">Correcto</p>');
$(".errorMessage").show();//en caso que se encuentre oculto

$(".formValidation").hide();//puedes utilizar tambien style="display:none" p
    
answered by 13.11.2018 в 01:07
problem showing different colors using php vector in the googlechart library Adapter for various forms C # does not show data