Ir para conteúdo

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

Por , em Javascript

Recommended Posts

denialos404    1

denialos404
Postado

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

manoaj    12

manoaj
Postado

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

denialos404    1

denialos404
Postado
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
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • violin101
      PHP - Agradecimento e uma Dúvida
      Por violin101
      Caros amigos,  saudações. 
       
      Primeiramente agradeço ao auxílio e ajuda que os amigos têm me dado. 
       
      Minha dúvida:
      - para emissão de nota fiscal eletrônica precisa de um CERTIFICADO e SENHA.
      Como ou onde consigo esses dois itens, para fazer teste de emissão de nota fiscal  ?
       
      Grato, 
       
      Cesar
    • violin101
      PHP - Agradecimento e uma Dúvida
      Por violin101
      Caros amigos,  saudações. 
       
      Primeiramente agradeço ao auxílio e ajuda que os amigos têm me dado. 
       
      Minha dúvida:
      - para emissão de nota fiscal eletrônica precisa de um CERTIFICADO e SENHA.
      Como ou onde consigo esses dois itens, para fazer teste de emissão de nota fiscal  ?
       
      Grato, 
       
      Cesar
    • violin101
      PHP - Abrir e Fechar janela
      Por violin101
      Caros amigos, saudações.
       
      Estou com uma pequena dúvida.
       
      Estou escrevendo um Sistema que tem vários Módulos.
       
      O módulo principal tem:
      Estoque | Compras | Expedição | Vendas

      Minha dúvida:
      como faço após Acessar o Módulo Principal e Escolher o Módulo que quero trabalhar,
      eu possa fechar o Módulo aberto por exemplo: Estoque, sem alterar o Módulo principal e outros se estiver aberto ?


      Grato,
       
      Cesar
    • douglas79
      Problemas com a última versão do MYSQL
      Por douglas79
      Bom dia,

      Há alguns dias que venho instalar o apache, o php, mysql e o phpmyadmin manualmente e sem obter sucesso. Até consegui rodar o php, porém, quando vou baixar a úitima versão do MYSQL, não tem todos os pacotes nele instalados, inclusive no completo, só encontro o Router.
      Alguém pode me dizer o porquê que isso está ocorrendo?
      Desde já agradeço a ajuda de vocês, que será bem vinda!
      No aguardo!

      Uso a versão 8.3.9 do PHP
      Meu SO é o Windows 10 32 bits
    • violin101
      PHP + Codeigniter - Instalar Biblioteca NFephp
      Por violin101
      Caros amigos, saudações.
       
      Por favor, me perdoa em postar mais uma dúvida minha.

      Através de ajuda e orientação dos membros do Grupo, tenho conseguido resolver muitos problemas que tenho encontrado.
       
      Gostaria de saber dos amigos do grupo, se tem algum vídeo aula, orientando a Instalação das Biblioteca para Emissão de Nota Fiscal Eletrônica.
       
      Tenho feito várias busca e tenho encontrado a maioria das vezes tudo em LARAVEL.

      Sei que para instalar as Biblioteca, precisa do Composer, até aqui tudo bem.

      Minha dúvida: 
      após fazer o download da  sped-nfe  e  sped-da, essas biblioteca devem ser gravada em qual pasta ?  ----   na C:\  ou dentro da pasta do Sistema ?
      quando dou o comando: COMPOSER INSTALL esse comando já instala todas as bibliotecas, ou 1 por 1 ?

      Grato,
       
      Cesar
       
×

Informação importante

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

  Aceito