Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

denialos404

Validação envio de mensagem por AJAX através de formulário de contato

Recommended Posts

Olá, sou novo aqui no fórum e estou com um probleminha no meu formulário de contato, tenho 2 abas - Fale Conosco e Orçamento, ao preencher o formulário de Fale Conosco, consigo receber minha mensagem de notificação de que minha mensagem foi enviada, através de uma messageBox logo acima do formulário, já quando vou para a 2ª aba, preencho o formulário e clico em enviar, não acontece o mesmo com Fale Conosco, conforme imagens em anexo a página é redirecionada com o texto que a mensagem foi enviada com sucesso do meu arquivo mailer-orcamento.php, consequentemente o endereço URL também muda. Se algúem pudesse me ajudar, ficarei muito grato!

 

Código HTML e script externo AJAX:

<!-- Aba 1 Fale Conosco -->
                        <div class="tabs-content iconTabsContent" data-tabs-content="icon-tabs-1">
                            <div class="tabs-panel is-active" id="panel1b">
                                <div id="contact">
                                    <div id="form-messages"></div>

                                    <form data-abide novalidate id="contactForm" name="contactForm" action="<?php echo get_template_directory_uri(); ?>/include/mailer-contato.php" method="post">
                                        <div class="row">
                                            <div class="small-12 medium-6 columns">
                                                <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="text" id="input-38" name="formNome" placeholder="Seu nome *" required pattern="[a-zA-Z\s]">
                        <label class="input__label input__label--isao" for="input-1">
                          <span class="input__label-content input__label-content--isao"></span>
                                                <small class="form-error">Ei! Você realmente preencheu o campo com seu nome? Tenta de novo!</small>
                                                </label>
                                                </span>
                                            </div>

                                            <div class="small-12 medium-3 columns">
                                                <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="text" id="input-38" name="formDDD" placeholder="DDD *" required>
                        <label class="input__label input__label--isao" for="input-2">
                          <span class="input__label-content input__label-content--isao"></span>
                                                <small class="form-error">Obrigatório!</small>
                                                </label>
                                                </span>
                                            </div>
                                            <div class="row">
                                                <div class="small-12 medium-2 columns">
                                                    <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="text" id="input-38" name="formTel" placeholder="Telefone *" required>
                        <label class="input__label input__label--isao" for="input-3">
                          <span class="input__label-content input__label-content--isao"></span>
                                                    <small class="form-error">Obrigatório!</small>
                                                    </label>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="small-12 medium-6 columns">
                                                <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="email" id="input-39" name="formMail" placeholder="Seu endereço de e-mail *" required pattern="email">
                      <label class="input__label input__label--isao" for="input-4">
                        <span class="input__label-content input__label-content--isao"></span>
                                                <small class="form-error">É importante saber o que você tem para nos falar!</small>
                                                </label>
                                                </span>
                                            </div>

                                            <div class="small-12 medium-6 columns">
                                                <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="url" id="input-41" name="formWebsite" placeholder="Seu website (opcional)" pattern="url">
                          <label class="input__label input__label--isao" for="input-6" for="formWebsite">
                            <span class="input__label-content input__label-content--isao" style="padding: 0.75em 0.15em;"></span>
                                                <div class="input-group" style="width: 20%;"><span class="input-group-label">www</span></div>
                                                </label>
                                                </span>
                                            </div>
                                            <div class="small-12 medium-12 columns">
                                                <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="text" id="input-38" name="formAssunto" placeholder="Assunto *" required>
                        <label class="input__label input__label--isao" for="input-7">
                          <span class="input__label-content input__label-content--isao"></span>
                                                <small class="form-error">Não queremos deixar que seu contato passe despercebido!</small>
                                                </label>
                                                </span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="small-12 columns">
                                                <label for="formMessage">
                        <textarea id="formMessage" name="formMensagem" placeholder="Sua mensagem *" required style="height: 100px;"></textarea>
                        <small class="form-error">Essa é a parte importante!...não esquece!</small>
                      </label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="small-12 columns">
                                                <button type="submit" name="formSubmit" id="formSubmit" class="button button--antiman button--text-thin button--text-upper button--size-s button--inverted-alt-contact button--border-thick float-right">Enviar Mensagem</button>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                            <!-- Aba 1 Fale Conosco fim -->
                            
                            <!-- Aba 2 Orcamento -->
                            <div class="tabs-panel" id="panel2b">
                                <div id="contact">
                                    <div id="form-messages"></div>

                                    <form data-abide novalidate id="contactForm" name="contactForm" action="<?php echo get_template_directory_uri(); ?>/include/mailer-orcamento.php" method="post">
                                        <div class="row">
                                            <div class="small-12 medium-6 columns">
                                                <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="text" id="input-38" name="formNome" placeholder="Qual o seu nome? *" required pattern="[a-zA-Z\s]">
                        <label class="input__label input__label--isao" for="input-8">
                          <span class="input__label-content input__label-content--isao"></span>
                                                <small class="form-error">Ei! Você realmente preencheu o campo com seu nome? Tenta de novo!</small>
                                                </label>
                                                </span>
                                            </div>

                                            <div class="small-12 medium-6 columns">
                                                <span class="input input--isao">
                      <input class="input__field input__field--isao input-group-field" type="text" id="input-40" name="formEmpresa" placeholder="Sua Empresa / Organização *" required/>
                      <label class="input__label input__label--isao" for="input-12" for="formCompany">
                        <span class="input__label-content input__label-content--isao"></span>
                                                <small class="form-error">Queremos o nome da sua empresa ou organização.</small>
                                                </label>
                                                </span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="small-12 medium-6 columns">
                                                <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="email" id="input-39" name="formMail" placeholder="Seu endereço de e-mail *" required pattern="email">
                      <label class="input__label input__label--isao" for="input-11">
                        <span class="input__label-content input__label-content--isao"></span>
                                                <small class="form-error">É importante saber o que você tem para nos falar!</small>
                                                </label>
                                                </span>
                                            </div>
                                            <div class="small-12 medium-2 columns">
                                                <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="text" id="input-38" name="formDDD" placeholder="DDD *" required>
                        <label class="input__label input__label--isao" for="input-2">
                          <span class="input__label-content input__label-content--isao"></span>
                                                <small class="form-error">Obrigatório!</small>
                                                </label>
                                                </span>
                                            </div>
                                            <div class="row">
                                                <div class="small-12 medium-4 columns">
                                                    <span class="input input--isao">
                        <input class="input__field input__field--isao input-group-field" type="text" id="input-38" name="formTel" placeholder="Telefone *" required>
                        <label class="input__label input__label--isao" for="input-3">
                          <span class="input__label-content input__label-content--isao"></span>
                                                    <small class="form-error">Obrigatório!</small>
                                                    </label>
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="marginBottom">
                                                <div class="small-12 medium-12 columns">
                                                    <span class="">
                        <p style="font-size: 14px">O que podemos desenvolver para você?</p>
													<input class="chkbox" type="checkbox" name="services[]" value="Website "><label class="" style="color: #000; vertical-align:top;">Website</label>
												</span>
                                                    <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Sistema Web "><label class="" style="color: #000; vertical-align:top;">Sistema Web
													<small class="form-error">Selecione pelo menos uma opção!</small></label>
												</span>
                                                    <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Loja Virtual "><label class="" style="color: #000; vertical-align:top;">Loja Virtual</label>
												</span>
                                                    <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Landing Page "><label class="" style="color: #000; vertical-align:top;">Landing Page</label>	
												</span>
                                                    <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Blog "><label class="" style="color: #000; vertical-align:top;">Blog</label>
												</span>
                                                    <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Logotipo "><label class="" style="color: #000; vertical-align:top;">Logotipo</label>
												</span>
                                                    <div>
                                                        <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Marketing e Conteúdo "><label class="" style="color: #000; vertical-align:top;">Marketing de Conteudo</label>
												</span>
                                                        <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Otimização de Sites "><label class="" style="color: #000; vertical-align:top;">Otimizacao de Sites</label>
												</span>
                                                        <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Gestão de Redes Sociais "><label class="" style="color: #000; vertical-align:top;">Gestao de Redes Sociais</label>
												</span>
                                                        <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Identidade Visual "><label class="" style="color: #000; vertical-align:top;">Identidade Visual</label>
												</span>
                                                        <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" SEO "><label class="" style="color: #000; vertical-align:top;">SEO</label>
													</span>
                                                        <div>
                                                            <span class="">
													<input class="chkbox" type="checkbox" name="services[]" value=" Papelaria Corporativa "><label class="" style="color: #000; vertical-align:top;">Papelaria Corporativa</label>
													</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 30px;">
                                            <div class="small-12 columns">
                                                <label for="formMessage">
                        <textarea id="formMessage" name="formMensagemOrcamento" placeholder="Diga-nos sobre mais detalhes do seu projeto! *" required style="height: 100px;"></textarea>
                        <small class="form-error">Essa é a parte importante!...não esquece!</small>
                      </label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="small-12 columns">
                                                <button type="submit" name="formSubmit" id="formSubmit" class="button button--antiman button--text-thin button--text-upper button--size-s button--inverted-alt-contact button--border-thick float-right">Enviar Mensagem</button>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                            <!-- Aba 2 fim -->
                          
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ajax-form.js"></script>

 

1.PNG

2.PNG

3.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites

Kd o código ajax? Se o código php está funcionando, o erro está no html e js, posta o js ou revise o mesmo pra vê se está de acordo.

Compartilhar este post


Link para o post
Compartilhar em outros sites
11 horas atrás, manoaj disse:

Kd o código ajax? Se o código php está funcionando, o erro está no html e js, posta o js ou revise o mesmo pra vê se está de acordo.

 

Aqui vai o código em AJAX manoaj:

 

$(function() {

            // obter formulário
            
            var form = $('#contactForm'); //aqui tá tudo ok
            var form = $('#contactFormOrcamento'); //não mostra a messageBox e redireciona para a página com URL do arquivo .php
            var form = $('#contactFormSuporte'); //não mostra a messageBox e redireciona para a página com URL do arquivo .php

            // obter mensagens da div.
            var formNotifications = $('#form-messages');

            // Configurar um ouvinte de eventos para o formulário de contato
            $(form).submit(function(e) {
                // Parar o navegador de enviar o formulário
                e.preventDefault();

                var formData = $(form).serialize();

                // Enviar o formulário usando AJAX.
                $.ajax({
                        type: 'POST',
                        url: $(form).attr('action'),
                        data: formData
                    })
                    .done(function(response) {
                        // Certificar-se de que a div formNotifications tenha a classe 'sucesso'.
                        $(formNotifications).removeClass('errorMsg');
                        $(formNotifications).addClass('successMsg');

                        // definir o texto na mensagem.
                        $(formNotifications).text(response);

                        // limpar o formulário após o envio
                        $('#formNome').val('');
                        $('#formDDD').val('');
                        $('#formTel').val('');
                        $('#formMail').val('');
                        $('#formEmpresa').val('');
                        $('#formWebsite').val('');
                        $('#formAssunto').val('');
                        $('#formMensagem').val('');
                    })
                    .fail(function(data) {
                        // Certificar-se de que a div formNotifications tenha a classe 'erro'.
                        $(formNotifications).removeClass('successMsg');
                        $(formNotifications).addClass('errorMsg');

                        // definir o texto na mensagem.
                        if (data.responseText !== '') {
                            $(formNotifications).text(data.responseText);
                        } else {
                            $(formNotifications).text('Oops! Um erro ocorreu e sua mensagem não pode ser enviada.');
                        }
                    });

            });

        });

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Humildemente peço desculpa por postar uma dúvida que tenho.

      Preciso salvar no MySql, os seguinte Registro:

      1 - Principal
      ====> minha dúvida começa aqui
      ==========> como faço para o Sistema Contar Automaticamente o que estiver despois do 1.____?
      1.01 - Matriz
      1.01.0001 - Estoque
      1.01.0002 - Oficina
      etc

      2 - Secundário
      2.01 - Loja_1
      2.01.0001 - Caixa
      2.01.0002 - Recepção
      etc
       
      Resumindo seria como se fosse um Cadastro de PLANO de CONTAS CONTÁBEIL.

      Grato,


      Cesar









       
×

Informação importante

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