Tenho a página abaixo:
http://funerariasaopedro.net.br/novo/contato.php
Nela tem um formulário de e-mail e, logicamente, um botão enviar.
Porém esse botão enviar está recebendo um return false
poque está enviando uma requisição ao jQuery Ajax para realizar ações na base de dados.
Mas esse return true
não faz o efeito de mexer com o botão e então o usuário tem a sensação de que o formulário NÃO foi enviado e fica clicando várias vezes.
Gostaria de ajuda para fazer 3 coisas.
- Fazer um efeito tipo de que o botão recebeu o clique.
- Bloquear o botão até que a requisição seja completada.
- Colocar uma imagem loading enquanto a requisição esteja sendo processada
// 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>