submit button does not show it was clicked

Question

submit button does not show it was clicked

Navigation

#1 by (1 votes)

1

I have the page below:

It has a form of email and, of course, a send button

But this submit button is receiving a return false because it is sending a request to jQuery Ajax to perform actions in the database.

But this return true does not affect the button, so the user has the feeling that NO has been sent and clicking several times.

I would like help to do 3 things.

Make a type effect that the button was clicked on.
Lock the button until the request is completed.
Placing a loading image 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><h1class="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>

jquery css css3

asked by anonymous 18.05.2018 / 15:28

1 answer

I can not get the input value "csrfmiddlewaretoken" In this case below, the login attribute would not have to be set to private for the method?

score 1 · Answer 1

Start by adding the hover effect in the 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><divclass="contatoBaixo"> 
    <input name="envia" class="btnAcesso" type="submit" value="Enviar"> 
 </div>

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

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

add this class to your css:

.hide{
    display: none;
}