Submit button does not show that it was clicked

Question

I have the page below:

http://funerariasaopedro.net.br/novo/contato.php

In it has a form of e-mail and, of course, a send button.

But this send button is getting one return false why are you sending a request to jQuery Ajax to perform actions in the database.

But this return true does not make the effect of fiddling with the button and then the user has the feeling that the form NAY was sent and gets clicking several times.

I would like help to do 3 things.

• Make a type effect from which the button received the click.
• Lock button until request is completed.
• Put an image loading while the request is being processed

// JavaScript Document
$(document).ready(function() {


  $("#assunto").change(function () {
		if(this.value == 4) {
			  $(".qual").css("display", "block");
			  $("#qual").prop("required",true);
		} else {
			  $(".qual").css("display", "none");
			  $("#qual").prop("required",false);
		}	  
  })


  $("div.contato form#formContato").on("submit", function () {

    if ($("div.contato form#formContato input[type=text].telefone").val().length > 0) {
		if ($("div.contato form#formContato input[type=text].telefone").val().length < 14) {
			alert("telefone ou celular precisam ser preenchidos com ddd + numero completo");
			$("div.contato form#formContato input[type=text].telefone").focus();
			return false;
		}
	}
	
	if($('div.contato form#formContato #assunto').val() == 4) {
		$('div.contato form#formContato #qual').val() = "";
	}
	
	if($('div.contato form#formContato #descricao').val() == "")   {     //verifica apena o texto
		alert("Descrição não está preenchida!");
		$('div.contato form#formContato #descricao').focus();
	   return false;
	} 

   $.post ("_requeridos/email.php", {
	   
	   nome      : $("#nome").val(),
	   email     : $("#email").val(),
	   telefone  : $("#telefone").val(),
	   descricao : $("#descricao").val(),
	   assunto   : $("#assunto").val(),
	   qual      : $("#qual").val(),
	   
   }, function(retorno){

        if (retorno == "OK") {
          resposta = "E-mail enviado com sucesso!";
        } else {
          resposta = "Erro no envio do E-mail";
        }
       $(".resposta").css("display", "block");
       $(".resposta").html(resposta);     
	           
     }
    );
	 
    return false;
	
  }); 
  
});  

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<h1 class="titulos">Fale Conosco</h1>

<form class="formularios" id="formContato"> 
 
  <div class="contatoEsquerdo">  

    <label class="labelPequeno" >Assunto</label><select class="typeTextMedio" id="assunto" name="assunto" required>
      <option value="">Escolha o assunto</option>
      <option value="1">Orçamento</option>
      <option value="2">Indicação</option>
      <option value="3">Elogio</option>
      <option value="4">Outro</option>
    </select><br /><br />
  
    <div class="qual" style="display:none">
        <label class="labelPequeno" >Qual?</label><input type="text" class="typeTextMedio" maxlength="200" id="qual" name="qual" placeholder="Qual?" /> <br /> <br />        
    </div>
    
    <label class="labelPequeno" >Nome</label><input type="text" class="typeTextMedio" maxlength="200" id="nome" name="nome" placeholder="Nome" required /> <br /> <br />
      
      <label class="labelPequeno" >Telefone</label><input type="text" class="typeTextMedio telefone" id="telefone" name="telefone" maxlength="15" placeholder="ddd + número"  /> <br /> <br />
  
    <label class="labelPequeno" >Email</label><input type="email" class="typeTextMedio" maxlength="200" id="email" name="email" placeholder="E-mail" required />

  </div>     
  
  <div class="contatoDireito"> 
    <h1 class="titulos">Descrição</h1>
    <textarea class="textarea" name="descricao" id="descricao" cols="80" rows="15" required></textarea>
  </div>
  
  <div class="contatoBaixo"> 
    <input name="envia" class="btnAcesso" type="submit" value="Enviar" /> 
  </div>

  
</form>

<div class="resposta" ></div> 

Answer 1

Start by adding a Hover effect to css

$(".btnAcesso").click(function(event){
            $(event.target).attr('disabled', 'disabled');
             $(event.target).after('<div class="loading">Carregando...</div>');
});

   .btnAcesso:hover {
        box-shadow: 2px 2px 2px #000;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contatoBaixo"> 
    <input name="envia" class="btnAcesso" type="submit" value="Enviar"> 
 </div>

I can’t help you more precisely because you can’t test here, but you have to do this and when the request returns true, you enable the button again and take out the "Loading..." with these commands:

$(event.target).removeAttr('disabled');
$('.loading').addClass('hide');

also add this class to your css:

.hide{
    display: none;
}