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 Jack Oliveira
      Ola pessoal montando um limitador a ser selecionado no SELECT OPTION ele ate faz a contagem  certo etc...
       
      porem não estou conseguindo fazer esta contagem continuar pois ja esta cadastrado no banco o maximo permetido
       
      <div class="col-md-6"> <div class="form-group"> <label>Categorias: </label> <select class="form-control select2" name="categorias[]" id="SelecionaQtdOption" multiple="multiple" data-placeholder="<?php echo $txt['todos_os_mods']; ?>"> <option value="">Selecionar Categorias</option> <?php foreach($categorias as $categoria){ if(strpos($Dados['categorias'], $categoria['titulo']) !== false){ ?> <option selected value="<?= $categoria['titulo']; ?>"><?= $categoria['titulo']; ?></option> <?php } else { ?> <option value="<?= $categoria['titulo']; ?>"><?= $categoria['titulo']; ?></option> <?php } } ?> </select> </div> </div> java esta desta forma
      <?php $QtdCategoria = 3; ?> <script type="text/javascript"> $(document).ready(function() { var selecionarOpiton = null; $('#SelecionaQtdOption').change(function(event) { if ($(this).val().length == <?= $QtdCategoria; ?>) { //Limitar Quantidade de categoria a ser selecionanda no select Option $(this).val(selecionarOpiton); } else { selecionarOpiton = $(this).val(); } }); }); </script>  
    • By gersonab
      Bom dia a todos, preciso aplicar duas máscaras em uma janela modal, não estou conseguindo fazer, fora dela as mascaras funcionam.
      <div class="form-group col-md-4"> <label>Data pagamento</label> <input type="text" name="dataval" class="form-control" id="dataapp"> </div> <div class="form-group col-md-4"> <label>Valor</label> <input type="text" name="valpro" class="form-control" id="money"> </div> utilizo este plugin
      <script src="../plugins/input-mask/jquery.inputmask.bundle.min.js"></script> $("#money").inputmask("999,999,999.999"); $("#dataapp").inputmask("99/99/9999"); desde já agradeço qq ajuda
    • By Jack Oliveira
      Ola pessoal estou com uma dificuldade ou melhor com erro ao fazer a leitura do arquivo por ajax
      Pelo meus calculos esta certo a forma que fiz, porem nao me mostra o resultado
      Espero que possam dar uma ideia do que seria e de como resolver
       
      este é o erro que retorna
      <br /> <b>Notice</b>: Undefined index: length in <b>C:\Host\htdocs\CMS-DELIVERY\CPANELUSER\ajax-list.php</b> on line <b>31</b><br /> <br /> <b>Notice</b>: Undefined index: start in <b>C:\Host\htdocs\CMS-DELIVERY\CPANELUSER\ajax-list.php</b> on line <b>32</b><br /> <br /> <b>Notice</b>: Undefined index: length in <b>C:\Host\htdocs\CMS-DELIVERY\CPANELUSER\ajax-list.php</b> on line <b>32</b><br /> You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '' at line 1  
      No arquivo php esta assim
      <?php session_start(); header('Content-Type: application/json'); require('./database/config.php'); require('./database/config.database.php'); require_once('./includes/funcoes.php'); //require('ssp.class.php'); $Campos = "'DL.id, DL.titulo, DL.telefone, DC.titulo as CityTitulo'"; $column = array("DL.id", "DL.titulo", "DC.titulo", "DL.destaque"); $queryIJ = 'directory_listing DL inner join directory_cidades DC on(DL.cidade = DC.titulo)'; $query = "WHERE DC.status=1 AND DL.status=1 "; if (isset($_POST["is_category"])) { $query = "DL.cidade = '" . $_POST["is_category"] . "' AND "; } if (isset($_POST["search"]["value"])) { $query = '(DL.id LIKE "%' . $_POST["search"]["value"] . '%" OR DL.titulo LIKE "%' . $_POST["search"]["value"] . '%" OR DL.telefone LIKE "%' . $_POST["search"]["value"] . '%") '; } if (isset($_POST["order"])) { $query = 'ORDER BY ' . $column[$_POST['order']['0']['column']] . ' ' . $_POST['order']['0']['dir'] . ' '; } else { $query = 'ORDER BY DL.id DESC '; } $query1 = ''; if ($_POST["length"] != 1) { $query1 = 'LIMIT ' . $_POST["start"]. ', ' . $_POST["length"]; } define('QUERYIJ', $queryIJ); define('CAMPOS', $Campos); define('QUERY', $query); define('QUERY1', $query1); $number_filter_row = DBCount(QUERYIJ,CAMPOS,QUERY); function ListarDirectoryEmpresaCidade($Q1 = QUERYIJ, $Camp = CAMPOS, $Query2 = QUERY, $Query3 = QUERY1) { $QueryInnerJoin = DBRead($Q1,$Camp, $Query2 .$Query3); return groupByEmpresaByCidade($QueryInnerJoin,'CityTitulo'); } function groupByEmpresaByCidade($array, $key) { $return = array(); foreach($array as $val) { $return[$val[$key]][] = $val; } return $return; } $data = array(); $ListarDirectoryEmpresa = ListarDirectoryEmpresaCidade(); foreach ($ListarDirectoryEmpresa as $ListarCidade) { //$ListarCidade[0]['CityTitulo'] foreach ($ListarCidade as $ListarDirectory) { //$ListarDirectory['titulo'] $sub_array = array(); $sub_array[] = $ListarDirectory["id"]; $sub_array[] = $ListarDirectory["titulo"]; $sub_array[] = $ListarCidade[0]['CityTitulo']; $sub_array[] = $ListarDirectory["telefone"]; $data[] = $sub_array; } } $result = DBCount('directory_listing','*'); $output = array( "draw" => intval($_POST["draw"]), "recordsTotal" => $result, "recordsFiltered" => $number_filter_row, "data" => $data ); echo json_encode($output); ?> Ja no html esta assim
       
      <div class="table-responsive"> <table id="list_data" class="table table-bordered table-striped"> <thead> <tr> <th>Id.</th> <th>Titulo</th> <th> <select name="directory_cidades" id="directory_cidades" class="form-control"> <option value="">Buscar Cidade</option> <?php $Query = DBRead('directory_cidades','*',"ORDER BY titulo ASC"); foreach($Query as $rows) { echo '<option value="' . $rows["titulo"] . '">' . $rows["titulo"] . '</option>'; } ?> </select> </th> <th>Telefone</th> </tr> </thead> </table> </div> No javascript esta assim
       
      <script type="text/javascript" language="javascript"> $(document).ready(function() { load_data(); function load_data(is_category) { var dataTable = $('#list_data').DataTable({ "processing": true, "serverSide": true, "order": [], "ajax": { url: "ajax-list.php", type: "POST", data: { is_category: is_category } }, "columnDefs": [{ "targets": [2], "orderable": false, }, ], }); } $(document).on('change', '#directory_cidades', function() { var directory_cidades = $(this).val(); $('#list_data').DataTable().destroy(); if (directory_cidades != '') { load_data(directory_cidades); } else { load_data(); } }); }); </script> Sei que o problema não esta no html e nem no javacript postei eles para melhor entender
    • By Jack Oliveira
      Ola pessoal boa noite 
       
      Bom é o seguinte
       
      Como eu posso fazer uma contagem de imagens que poderá ser carregado pelo input  file
      Exemplos 
      <!-- img1 carregar apenas 3 imagens --> <input type="file" name="img1"> <!-- img2 carregar apenas 6 imagens --> <input type="file" name="img2"> <!-- img3 carregar apenas 9 imagens --> <input type="file" name="img3"> <!-- img4 carregar apenas 12 imagens --> <input type="file" name="img4"> Ouver um jeito também de bloquear se for selecionado mais do que for permitido...
       
      Já vi isso em alguns site quando for selecionar as imagens se passar da quantidade ele não seleciona mais nenhuma imagem. 
       
      Se img1 ja tiver as 3 imagens nao permite selecionar ou então ocultar o input se a quantidade ja foi cadastrada..
       
      Se o usuário tiver as 3 imagens e se ele apagou uma ele podera selecionar apenas uma e nada mais...
       
      Se teria como fazer isso apenas com php ou teria que usar jquery ou javascript..
       
      Espero que possam entender..
       
       
      Obs: não precisa ser codigo grande pra pouca coisa; que possa ser mais simplificado possível..
    • By Vinixops
      Bom dia!
       
      Não estou conseguindo receber os dados de um campo textarea e um select. Estou tentando via jquery. Todos os campos input são recebido corretamente.
      Testei de várias formas e não consegui.
       
      Vou colocar os trechos do código. Fico grato caso alguém possa ajudar.
       
       
      Função que uso para enviar os dados para página que fazer o tratamento.
      // --> Envia dados Formulario Orçamento - Start <--
          jQuery(function($){                
              $('#OrcIndex').submit(function(){
                  event.preventDefault();                    
                  $.post('CadastraOrcIndex.asp', $('#OrcIndex input'), function(retorno){
                      if(retorno){                        
                          //alert(retorno);
                          $("#PrintaOrcIndex").html(retorno);
                      }else{
                      }
                  }, 'html');
                  return false;
              });
          });
      // --> Envia dados Formulario de Orçamento - End <--
       
      Formulário o que preciso enviar os dados para tratamento.
       
                               <form method="post" id="OrcIndex" name="OrcIndex">
                                      <input type="hidden" id="latitude" name="Latitude">
                                      <input type="hidden" id="longitude" name="Longitude">
                                  <div class="row g-3">
                                      <div class="col-12 col-sm-6">
                                          <label>Seu nome</label>
                                          <input name="NomeOrc" type="text" class="form-control border-0" style="height: 55px;">
                                      </div>
                                      <div class="col-12 col-sm-6">
                                          <label>Seu e-mail</label>
                                          <input name="EmailOrc" type="email" class="form-control border-0" style="height: 55px;">
                                      </div>
                                      <div class="col-12 col-sm-6">
                                          <label>Seu celular</label>
                                          <input name="CelularOrc" type="text" class="form-control border-0" style="height: 55px;">
                                      </div>
                                      <div class="col-12 col-sm-6">
                                          <label>Escolha o setor</label>
                                          <select name="SetorOrc" id="SetorOrc" class="form-select border-0" style="height: 55px;">
                                              <option value="Selecione" selected>Selecione</option>
                                              <option value="Energia Solar">Energia Solar</option>
                                              <option value="Aquecimento Solar">Aquecimento Solar</option>
                                              <option value="Câmeras e Monitoramento">Câmeras e Monitoramento</option>
                                              <option value="Automação Residencial">Automação Residencial</option>
                                              <option value="Automação Comercial">Automação Comercial</option>
                                              <option value="Redes e Informática">Redes e Informática</option>
                                          </select>
                                      </div>
                                      <div class="col-12">
                                          <label>Detalhe sua necessidade </label>
                                          <textarea name="DetalheOrc" id="DetalheOrc" class="form-control border-0"></textarea>
                                      </div>
                                      <div class="col-12">
                                          <button class="btn btn-primary rounded-pill py-3 px-5" type="submit">Solicitar Orçamento</button>
                                      </div>
                                  </div>
                              </form>
                          <span id="PrintaOrcIndex">&nbsp;</span>
×

Important Information

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