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, saudações.
       
      Por favor, me permita tirar uma dúvida com os amigos.

      Tenho um Formulário onde o Usuário digita todos os Dados necessários.

      Minha dúvida:
      --> como faço após o usuário digitar os dados e salvar, o Sistema chamar uma Modal ou mensagem perguntando se deseja imprimir agora ?

      Grato,
       
      Cesar
    • Por Carcleo
      Tenho uma abela de usuarios e uma tabela de administradores e clientes.
      Gostaria de uma ajuda para implementar um cadastro
       
      users -> name, login, passord (pronta) admins -> user_id, registratiom, etc.. client -> user_id, registratiom, etc...
      Queria ajuda para extender de user as classes Admin e Client
      Olhem como estáAdmin
      <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Admin extends User {     use HasFactory;            protected $fillable = [         'name',         'email',         'password',         'registration'     ];      private string $registration;     public function create(         string $name,          string $email,          string $password,         string $registration     )     {         //parent::create(['name'=>$name, 'email'=>$email, 'password'=>$password]);         parent::$name = $name;         parent::$email = $email;         parent::$password = $password;         $this->registration = $registration;     } } User
      <?php namespace App\Models; // use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\Relations\BelongsToMany; class User extends Authenticatable {     /** @use HasFactory<\Database\Factories\UserFactory> */     use HasFactory, Notifiable;     static string $name;     static string $email;     static string $password;     /**      * The attributes that are mass assignable.      *      * @var list<string>      */     protected $fillable = [         'name',         'email',         'password',     ];          /**      * The attributes that should be hidden for serialization.      *      * @var list<string>      */     protected $hidden = [         'remember_token',     ];     /**      * Get the attributes that should be cast.      *      * @return array<string, string>      */     protected function casts(): array     {         return [             'email_verified_at' => 'datetime',             'password' => 'hashed',         ];     }          public function roles() : BelongsToMany {         return $this->belongsToMany(Role::class);     }       public function hasHole(Array $roleName): bool     {                 foreach ($this->roles as $role) {             if ($role->name === $roleName) {                 return true;             }         }         return false;     }         public function hasHoles(Array $rolesName): bool     {                 foreach ($this->roles as $role) {             foreach ($rolesName as $rolee) {             if ($role->name === $rolee) {                 return true;             }          }         }         return false;     }         public function hasAbility(string $ability): bool     {         foreach ($this->roles as $role) {             if ($role->abilities->contains('name', $ability)) {                 return true;             }         }         return false;     }     } Como gravar um Admin na tabela admins sendo que ele é um User por extensão?
      Tentei assim mas é claro que está errado...
      public function store(Request $request, Admin $adminModel) {         $dados = $request->validate([             "name" => "required",             "email" => "required|email",             "password" => "required",             "registration" => "required"         ]);         $dados["password"] =  Hash::make($dados["password"]);                  $admin = Admin::where("registration",  $dados["registration"])->first();                  if ($admin)              return                    redirect()->route("admin.new")                             ->withErrors([                                 'fail' => 'Administrador já cadastrados<br>, favor verificar!'                   ]);                            $newAdmin = $adminModel->create(                                    $dados['name'],                                    $dados['email'],                                    $dados['password'],                                    $dados['registration']                                 );         dd($newAdmin);         $adminModel->save();         //$adminModel::create($admin);                  return redirect()->route("admin.new")->with("success",'Cadastrado com sucesso');     }  
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de tirar uma dúvida com os amigos, referente a PDV.
       
      Estou escrevendo um Sistema com Ponto de Vendas, a minha dúvida é o seguinte, referente ao procedimento mais correto.

      Conforme o caixa vai efetuando a venda, o Sistema de PDV já realiza:
      a baixa direto dos produtos no estoque
      ou
      somente após concretizar a venda o sistema baixa os produtos do estoque ?
       
      Grato,
       
      Cesar
       
    • 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
       
       
×

Informação importante

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