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 Marceloely
      Eu gostaria de saber como fazer para preencher automaticamente(pré populado) uma página de pagamentos a partir dos dados inseridos em uma página anterior pelo plugin do contact form 7 do wordpress
       
      Os campos até são preenchidos, mas não com a informação inserido no formulário mas sim com a id mesmo que coloquei na URL
        
      <label> Seu nome
          [text nome id:nome class:nome] </label>
      <label> Seu DDD
      [tel DDD id:DDD class:DDD]</label>
      <label> Seu Celular
      [tel celular id:celular class:celular]</label>
      <label> Seu e-mail
      </label>
      <label> Assunto
          [text* your-subject] </label>
      <label> Sua mensagem (opcional)
          [textarea your-message] </label>
      [submit "Enviar"]
      <script>
       document.addEventListener('wpcf7mailsent', function (Event) {
         location = 'https://pay.hotmart.com/A48773288I?ap=5181&name=id:nome&phoneac=id:ddd&phonenumber=id:celular&email=id:email';
       }, false);
      </script>
    • By Marceloely
      Em alguns países, campanhas de publicidade com objetivo de mensagem no instagram são proibidas, tendo isso em vista gostaria de saber se é possível criar um link onde o usuário caia direto no inbox de outra pessoa no instagram? Como se fosse aqueles links do que cai na conversa do whatsapp.
    • By rafa-martin
      Pessoal, boa noite. 
       
      Estou tendo problemas ao passar um  parâmetro do tipo cursor no java no momento que chamo uma proc no oracle. 
       
      Tenho uma procedure que o parâmetro é um cursor. 
       
      create or replace minhaproce(p_result OUT SYS_REFCURSOR)
       
      begin
        open p_result for select * from tabela;
      end;
       
      Até aqui beleza. 
       
      quando chamo no java não está aceitando o tipo cursor.
       
      @Query(value = "{call minhaproce(?)}", nativeQuery = true)
      Collection<Coche> minhaproce(@Param("p_result") OracleTypes.CURSOR) 
       
      não é aceita. mesmo eu colocando como collection Collection<Coche> listaProcedure(@Param("p_result") List<Coche> p_result2), também não aceita. Agora seu eu fizer o select direto com abaixo retorna. 
       
      @Query(value = "SELECT * FROM tabela", nativeQuery = true)
      Collection<Coche> minhaproce();
       
      Por que funciona fazendo o select direto e não funciona pela procedure? Não acho nada na internet alguma coisa parecida.
    • By KBAlbuquerque
      Estou tentando salvar o nome da imagem no banco de dados com um FormData;
      porém está dando que a imagem está nula no Servidor Node JS da API.
       
      Uso React Native e Express File Upload e Node JS.
       
      Muito obrigada.
       
      Segue o código:
       
      Constantes:
           
      const [nome, setNome] = useState('');       const [marca, setMarca] = useState('');       const [modelo, setModelo] = useState('');       const [foto, setFoto] = useState('');       const [fotoNome, setFotoNome] = useState('');       const [fotoType, setFotoType] = useState('');       const [usuarioId, setUsuarioId] = useState('');  
      Código da API:
         
      const nome = req.body.nome;     const marca = req.body.marca;     const modelo = req.body.modelo;     const foto = req.files;     const usuarioId = req.body.usuario_id;      const file = Date.now().toString() + '_' + foto.myfile;      const filePath = path.join(__dirname, 'public', 'imagens');      foto.mv(`${filePath}/${file}`, err => {           if (err) {               return res.send('Imagem não salva!');           } else {               return res.send('Imagem salva com sucesso!');           }     });  
      Escolhe a Imagem:
           
      const escolhaImagem = (response) => {         if (response.didCancel) {             console.log('Cancelado!');         } else if (response.error) {             console.log("Erro na Imagem: " + response.error);         } else if (response.customButton) {             console.log('Botão customizado' + response.customButton);         } else {             setFoto(response);             setFotoUri(response.uri);             setFotoNome(response.fileName);             setFotoType(response.type);         }     }  
      Função FormData no Cadastro:
              
      const formData = new FormData();         formData.append('nome', nome);         formData.append('marca', marca);         formData.append('modelo', modelo);         formData.append('myfile', fotoNome);         formData.append('usuario_id', usuarioId);         console.log(formData);         const headers = {             method: "post",             body: formData,             headers: {                 "Content-Type": "multipart/form-data",                 "Accept": "application/json",             },         }         await fetch(URL_SERVIDOR + '/salvar-veiculo', headers)             .then(response => response.json())             .then(result => {                 console.log(result)             }).catch((err) => {                 console.log("ERRO: " + err);             });  
    • By Dsdaa
      Olá estou fazendo uma tela de login com flask,html,css e js E estou tentando pegar dados para validar se o usuário está cadastrado ou não Como nenhum usuário tem cadastro, então queria que aparecesse uma mensagem dizendo para o usuário se cadastrar e redirecionar para nova tela - mas isso aí eu me viro -, gostaria mesmo de ajuda para pegar esses dados através do button e onclick pois não estou conseguindo :/ . Irei postar o código .html
      Obs: O arquivo de javascript não tem nada
      <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="../Flask-Login/estilo.css"> <title>Login Page</title> <script src="js/scripts.js" defer></script> </head> <body> <div class="row align-items-center h-100 "> <div class="col-8 col-md-3 col-xs-8 mx-auto l-form"> <form id="login-form"> <img class="row mx-auto" src="https://i.imgur.com/RhJpe7c.png" width="150"> <div class="form-group "> <input type="text" name="email" placeholder="Email" class="form-control i-form"> </div> <div class="form-group"> <input type="password" name="password" placeholder="Password" class="form-control i-form"> </div> <div class="form-group"> <button type="button" onclick="userLogin()" class="btn btn-dark btn-md btn-block">Login</button> </div> </form> </div> </div> <script> </script> </body> </html>
×

Important Information

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