Ir para conteúdo
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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Estou com uma pequena dúvida, referente a PEGAR AUTOMATICAMENTE a HORA e alimentar o campo INPUT.
       
      Tenho uma rotina, que estava aparentemente funcionando corretamente, mas agora estou tendo problema.
       
      A rotina, pega a HORA atual e informa automaticamente o INPUT, não estou entendendo porque agora não está mais fazendo.

      Abaixo a rotina.

       
      <div class="col-lg-3"> <label for="cotaHrsinicio">Hora da Abertura<span class="required">*</span></label> <div class="controls"> <input type="time" id="cotaHrsinicio" name="cotaHrsinicio" class="form-control" style="width:100%;" value="" /> <!-- NESSE INPUT A ROTINA INFORMA A DATA ATUAL --> </div> </div>  
       
      function date_time() { var date = new Date(); //var am_pm = "AM"; var hour = date.getHours(); /* if(hour>=12){ am_pm = "PM"; } */ if (hour == 0) { hour = 12; } if(hour<12){ hour = hour - 12; } if(hour>12){ hour + 12; } if(hour<10){ hour = "0"+hour; } var minute = date.getMinutes(); if (minute<10){ minute = "0"+minute; } var sec = date.getSeconds(); if(sec<10){ sec = "0"+sec; } /* *Formato da Hora (h:m:s) * Passar para a Variável: Hora Atual */ var cotaHrsinicio = document.getElementById("cotaHrsinicio").value = hour+":"+minute; }
      Grato,
       
      Cesar

       
    • Por luiz monteiro
      Bom dia.
      Estou precisando formatar um campo de entrada type text somente para numero com a seguinte formatação.
      se menor que 999 mostrar dessa forma mesmo, nesse caso seria para centena.dezena.unidade. Tipo 001 até 009 depois 010 até 099 depois 100 até 999
      de 1.000 até 999.999  mostrar com o ponto, nesse caso seria para milhar.centena.dezena.unidade. Tipo 001.000 até 001.999 e assim por diante.
      de 1.000.000 até 9.999.000, nesse caso seria para milhão.milhar.centena.dezena.unidade. aqui mesma ideia....
      Parecidos com aqueles campos de preço, que ao digitar os zeros ficam a esquerda até o valor atingirem a unidade correspondente.
       
      Tentei adaptar esse que encontrei na net.
      function moeda(a, e, r, t) { let n = "" , h = j = 0 , u = tamanho2 = 0 , l = ajd2 = "" , o = window.Event ? t.which : t.keyCode; if (13 == o || 8 == o) return !0; if (n = String.fromCharCode(o), -1 == "0123456789".indexOf(n)) return !1; for (u = a.value.length, h = 0; h < u && ("0" == a.value.charAt(h) || a.value.charAt(h) == r); h++) ; for (l = ""; h < u; h++) -1 != "0123456789".indexOf(a.value.charAt(h)) && (l += a.value.charAt(h)); if (l += n, 0 == (u = l.length) && (a.value = ""), 1 == u && (a.value = "0" + r + "0" + l), 2 == u && (a.value = "0" + r + l), u > 2) { for (ajd2 = "", j = 0, h = u - 3; h >= 0; h--) 3 == j && (ajd2 += e, j = 0), ajd2 += l.charAt(h), j++; for (a.value = "", tamanho2 = ajd2.length, h = tamanho2 - 1; h >= 0; h--) a.value += ajd2.charAt(h); a.value += r + l.substr(u - 2, u) } return !1 } Mas sem sucesso.
       
      Grato por enquanto.
       
       
       
    • Por Giovanird
      O script abaixo atualiza a página (centro.php) a cada um minuto e dentro desta página terei uma div que não poderá ser atualizada.
      Tentei colocar esta div como pagina com setInterval de 100 minutos porem ao dar o refresh no centro.php  tudo vai junto.  Será que isto é possivel?

      Desde já meu muito obrigado!
      <script> function atualiza(){ var url = 'centro.php'; $.get(url, function(dataReturn) { $('#centro').html(dataReturn); }); } setInterval("atualiza()",60000); </script>  

    • Por luiz monteiro
      Bom dia. Eu estou tentando encontrar uma maneira de evitar que após o usuário selecionar, se selecionar, uma imagem, essa seja substituída apenas por outra selecionada. Porém quando o usuário cancela a seleção, o input file remove o arquivo se já foi selecionado anteriormente.
      Essa é a estrutura que estou usando HTML
      form action="#" method="post" name="formulario" id="formulario" enctype="multipart/form-data"
      input type="file" name="file_name[]" br input type="file" name="file_name[]" br button enviar /button /form
      JS PURO
      Peguei esse script em um post aqui do stackoverflow e adaptei
      script type="text/javascript"
      let formulario = document.querySelector("#formulario"); formulario.addEventListener("change", (e)=>{ e.preventDefault(); var file = e.target.files[0]; if (e.target.files.length === 1 && e.target.files !== undefined && e.target.files !== null && file.type.match('image.*')) { console.log("if okay"); } else { //preciso entender o que devo fazer aqui para verificar se há arquivo no DOM desse target caso, o usuário cancele a seleção, para evitar que se há um arquivo no DOM esse permaneça. console.log(file); //CASO O USUÁRIO CANSELA A SELEÇÃO, RETORNA undefined } }); /script
      O if está correto, porém o que falta é o que fazer no else. Agradeço desde já.
    • Por luiz monteiro
      Olá. Tenho 3 formulários em uma mesma pagina, onde cada um tem 1 input type text.
      O que preciso é recuperar o nome desses inputs e o valor correspondente ao formulário submetido.
      =============
      form name="formulario1" id="formulario1"
      input type="text" name="nome1" value="valor1" /form
      form name="formulario2" id="formulario2"
      input type="text" name="nome2" value="valor2" /form
      form name="formulario3" id="formulario3"
      input type="text" name="nome3" value="valor3" /form
      =============
      ..........
      var formulario_submetido = document.getElementById("formulario1"); formulario_submetido.addEventListener('submit', function(e) { e.preventDefault(); //tentei console.log(document.querySelectorAll('#'+this.id + ' input').name); //tentei var formula = new FormData(formulario_submetido); console.log(formula.input['type=text'].name); //tentei console.log(formula.get(input['type=text']).name); ..........
        no console.log(e), ele está nessa hierarquia   form -> srcElement -> input -> attributes -> name 
      Como recupero o valor do name dele e o valor do value?
       
      Agradeço desde já.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.