Jump to content
kriskastro

Adicionar action de URL em formulário Ajax com Javascript

Recommended Posts

Oi, pessoal. Preciso de uma ajuda de vocês. 

Tenho esse código de formulário de contato em um dos sites que gerencio e preciso colocar um redirecionamento de URL ao submeter o envio do formulário com sucesso. Atualmente ele só exibe "Mensagem enviada com sucesso!". Já tentei injetar essa função direto pelo javascript, porém as tentativas que fiz foram todas sem sucesso. Podem me ajudar com isso?

 

A ideia seria enviar as pessoas para uma página de resposta que já desenvolvi.

<form class="avia_ajax_form av-form-labels-visible avia-builder-el-123 el_after_av_hr avia-builder-el-last av-custom-form-color av-light-form" method="post" name="formhouse">
<fieldset>
<p id="element_avia_1_1" class=" first_form form_element form_element_third"><label for="avia_1_1">Nome <abbr class="required" title="required">*</abbr></label>
<input id="avia_1_1" class="text_input is_empty" name="nome" type="text" value="" /></p>
<p id="element_avia_2_1" class=" form_element form_element_third"><label for="avia_2_1">E-Mail <abbr class="required" title="required">*</abbr></label>
<input id="avia_2_1" class="text_input is_empty" name="email" type="text" value="" /></p>
<p id="element_avia_3_1" class=" form_element form_element_third"><label for="avia_3_1">Telefone <abbr class="required" title="required">*</abbr></label>
<input id="avia_3_1" class="text_input is_phone" name="telefone" type="text" value="" /></p>
<p id="element_avia_4_1" class=" first_form form_element form_fullwidth av-last-visible-form-element"><label class="textare_label hidden textare_label_avia_4_1" for="avia_4_1">Mensagem <abbr class="required" title="required">*</abbr></label>
<textarea id="avia_4_1" class="text_area is_empty" cols="40" name="mensagem" rows="7"></textarea></p>
<p class="hidden"><input id="avia_5_1" class="hidden " name="avia_5_1" type="text" value="" /></p>

<center id="msgErroHouse" style="color: red; display: none;">Erro ao enviar a mensagem, preencha todos os campos para continuar</center>&nbsp;

<center id="msgShowHouse" style="display: none;">Mensagem enviada com sucesso!</center>
<p class="form_element "><input name="avia_generated_form1" type="hidden" value="1" />
<input id="clica-botao-house" class="button" type="button" value="Enviar" /></p>
</fieldset>
</form>

<script language="javascript">

function chama(){
    var ret = hc_envia_mensagem(2923, document.formhouse.nome.value, document.formhouse.email.value, '', document.formhouse.telefone.value, document.formhouse.mensagem.value);

    if(document.formhouse.email.value.trim() != '' && document.formhouse.nome.value.trim() != ''){
        jQuery('#msgErroHouse').hide();
        jQuery('#msgShowHouse').show();
        document.formhouse.nome.value = ''; 
        document.formhouse.email.value = ''; 
        document.formhouse.ddd.value = '';
        document.formhouse.telefone.value = ''; 
        document.formhouse.mensagem.value = '';
    }else{
        jQuery('#msgShowHouse').hide();
        jQuery('#msgErroHouse').show();
    }
    
}

setTimeout(function(){
    jQuery('#clica-botao-house').on('click', function(){chama ()});
    jQuery('[data-avia-form-id]').hide();   
    
},100)

</script>

 

Share this post


Link to post
Share on other sites

@kriskastro Bom amigo não deu para entender seu código ele está meio bagunçado.

 

Algo muito estralho, é que você utilizar setTimeout para inserir o evento de click no botão. Se você quer espera a página carregar para inserir esses eventos e evitar erros, você pode utilizar o evento onload ou o método Ready Event Jquery.

 

Exemplo: 

window.omload = function()
{
	jQuery('#clica-botao-house').on('click', function(){chama ()});
	jQuery('[data-avia-form-id]').hide(); 
}

/* Método Jquery */

$(document).ready(function(){
	jQuery('#clica-botao-house').on('click', function(){chama ()});
	jQuery('[data-avia-form-id]').hide(); 
});

/* Método ainda mais curto Jquery */

$(function(){
	jQuery('#clica-botao-house').on('click', function(){chama ()});
	jQuery('[data-avia-form-id]').hide(); 
});

 

Para adicionar um código de redirecionamento caso ocorra uma requisição bem sucedida, eu precisos saber aonde acontece a requisição e como funciona o retorno dela. Você passa os dados do formulário para uma função chamada hc_envia_mensagemm e depois salva o retorno dela em uma variável, porem você não utiliza o retorno da função nem mesmo verifica o retorno.

 

Vou deixa um exemplo do formulário com algumas modificações que eu fiz, com ele você pode modifica e adiciona o redirecionamento que você deseja.

 

        <div>
            <form onsubmit="return false;" class="avia_ajax_form av-form-labels-visible avia-builder-el-123 el_after_av_hr avia-builder-el-last av-custom-form-color av-light-form" method="post" name="formhouse">
                <fieldset>
                    <p id="element_avia_1_1" class=" first_form form_element form_element_third">
                        <label for="avia_1_1">Nome <abbr class="required" title="required">*</abbr></label>
                        <input id="avia_1_1" class="text_input is_empty" name="nome" type="text" value="" placeholder="Nome" required>
                    </p>
                    <p id="element_avia_2_1" class=" form_element form_element_third">
                        <label for="avia_2_1">E-Mail <abbr class="required" title="required">*</abbr></label>
                        <input id="avia_2_1" class="text_input is_empty" name="email" type="text" value="" placeholder="E-mail" required>
                    </p>
                    <p id="element_avia_3_1" class=" form_element form_element_third">
                        <label for="avia_3_1">Telefone <abbr class="required" title="required">*</abbr></label>
                        <input id="avia_3_1" class="text_input is_phone" name="telefone" type="text" value="" placeholder="DDD + Telefone" required>
                    </p>
                    <p id="element_avia_4_1" class=" first_form form_element form_fullwidth av-last-visible-form-element">
                        <label class="textare_label hidden textare_label_avia_4_1" for="avia_4_1">Mensagem <abbr class="required" title="required">*</abbr></label><br>
                        <textarea id="avia_4_1" class="text_area is_empty" cols="40" name="mensagem" rows="7" required></textarea>
                    </p>
                    <input id="avia_5_1" name="avia_5_1" type="hidden" value="">
                    <input name="avia_generated_form1" type="hidden" value="1">
                    <input id="clica-botao-house" class="button" type="submit" value="Enviar">
                </fieldset>
            </form>
        </div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>

            $(function(){
                
                $("[name=formhouse]").on("submit", function(event){
                    
                    let 
                        formulario = $(this),
                        dados = formulario.serializeArray();

                    /* Filtros */

                    /* Verificar Nome */
                    dados[0]["value"] = dados[0]["value"].trim();
                    if (dados[0]["value"] == "")
                    {
                        alert("O campo nome é obrigatório.");
                        return false;
                    }

                    /* Verificar e-mail */
                    dados[1]["value"] = dados[1]["value"].trim();
                    if (!validacaoEmail(dados[1]["value"]))
                    {
                        alert("E-mail invalido.");
                        return false;
                    }

                    /* Verificar Telefone */
                    dados[2]["value"] =  dados[2]["value"].replace(/[^0-9]/g, "");
                    if(!validatePhone( dados[2]["value"]))
                    {
                        alert("Numero de telefone é invalido.");
                        return false;
                    }

                    /* Verificar Messagem */
                    dados[3]["value"] = dados[3]["value"].trim();
                    if (dados[3]["value"] == "")
                    {
                        alert("O campo mensagem está em branco.");
                        return false;
                    }

                    /* Ajax */

                    $.ajax({
                        url : "URL",
                        method  : "POST",
                        data : dados,
                        success : function(){
                            window.location.href = "URL DE SUCESSO";
                        },
                        error : function(){
                            alert("Ocorreu um erro. Tente novamente mais tarde.");
                        }
                    });

                    event.preventDefault();
                    return false;
                });

                $("[data-avia-form-id]").hide();  
            });


            /* Função de verificação de e-mail. Fonte: https://www.devmedia.com.br/validando-e-mail-em-inputs-html-com-javascript/26427*/
            function validacaoEmail(field)
            {
                usuario = field.substring(0, field.indexOf("@"));
                dominio = field.substring(field.indexOf("@") + 1, field.length);

                if  (
                        (usuario.length >= 1) &&
                        (dominio.length >= 3) && 
                        (usuario.search("@") == -1) && 
                        (dominio.search("@") == -1) &&
                        (usuario.search(" ") == -1) && 
                        (dominio.search(" ") == -1) &&
                        (dominio.search(".") != -1) &&      
                        (dominio.indexOf(".") >= 1)&& 
                        (dominio.lastIndexOf(".") < dominio.length - 1)
                    )
                {
                    return true;
                }

                return false;
            }

            /* Função de verificação de telefone. Fonte: https://pt.stackoverflow.com/questions/293950/valida%C3%A7%C3%A3o-campo-telefone */
            function validatePhone (phone)
            {
                var regex = new RegExp('^((1[1-9])|([2-9][0-9]))((3[0-9]{3}[0-9]{4})|(9[0-9]{3}[0-9]{5}))$'); 
                return regex.test(phone);
            }

        </script>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
      //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.