0

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>

3
  • Veo que usas bootstrap, podrías leer en la documentación el uso de los "alert". El formulario lo puedes ocultar tranquilamente con js o jquery con .hide()
    – Fran Islas
    Commented el 12 nov. 2018 a las 23:50
  • claro si la idea es poder hacerlo con js o jquery nose si con bootstrap solamente sirve lo que quiero hacer Commented el 13 nov. 2018 a las 1:36
  • Hola Mariano. ¿Qué estas usando para enviar el mail? Commented el 6 dic. 2018 a las 16:03

1 respuesta 1

0

en el div errorMessage insertas el mensaje y a la misma vez ocultas el contenido de tu formulario para que solo sea visible tu mensaje

ejemplo si la operacion fue existosa

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

$(".formValidation").hide();//puedes utilizar tambien style="display:none" p
1
  • Hola Juan como estas? como seria el armado del jquery? ya que no tengo mucho dominio en el, este ejemplo lo tome de otro sitio. Commented el 13 nov. 2018 a las 0:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.