Ir para conteúdo

Arquivado

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

Felipe Evangelista

Enviando Email Utilizando JQuery Ajax sem Refresh

Recommended Posts

Estou tendo problemas tentando utilizar esse método de envio de formulário por email, sem dar refresh na página. Ainda não tenho muitos conhecimentos com Ajax, então não sei bem se o código está correto, até tentei por outros métodos, copiando e colando o código e só mudando algumas coisas pra ver se ia, mas não consegui. O problema é que ao clicar no botão de enviar, não ocorre nenhuma ação. A função não é chamada.

 

Código em js:

 

$(function($) {

        $("#form1").submit(function() {

            var nome = $("#nome").val();
            var email = $("#email").val();
            var mensagem = $("#mensagem").val();

            $("#status").html("<img src='loader.gif'/>");

            $.post('email.php', {nome: nome, email: email, mensagem: mensagem }, function(envia) {

                    $("#status").slideDown();

                    if (envia != false) {

                        $("#status").html(envia);
                    } 

                    else {

                        $("#status").html("Mensagem enviada com sucesso!");

                        $("#nome").val("");
                        $("#email").val("");
                        $("#mensagem").val("");
                    }
            });
        });
       });

Código PHP:

 

<?php

require_once("class/class.phpmailer.php");
date_default_timezone_set('America/Sao_Paulo');
$ip = getenv("REMOTE_ADDR");

$mail = new PHPMailer(true);
$mail->SetLanguage("br");
// $mail->IsSMTP();
$mail->SMTPDebug = 0;   
$mail->SMTPAuth = true; 
$mail->SMTPSecure = 'ssl';

$nomeusuario = utf8_decode($_POST['nome']);
$emailusuario = utf8_decode($_POST['email']);
$mensagem = utf8_decode($_POST['mensagem']);

$mail->Host = 'email-ssl.com.br';
$mail->SMTPAuth = true;
$mail->Port = 465;
$mail->Username = '';
$mail->Password = '';

$mail->From = $emailusuario;
$mail->FromName = $nomeusuario;
$mail->AddAddress('', '');
$mail->Subject = "";
$mail->AddBcc($emailusuario);
$mail->Body = $mensagem;

    if(!$mail->Send()) {
      echo "Mensagem de erro: " . $mail->ErrorInfo;
    } else {
      echo "Mensagem enviada!";
    }

?>

HTML:

 

<form id="form1" class="row" method="post" action="javascript:function()">
        <input type="text" placeholder="Nome:" class="form-control" name="nome"/>
        <input type="email" placeholder="E-mail:" class="form-control" name="email"/>
        <textarea placeholder="Mensagem:" class="form-control" name="mensagem"></textarea>
        <input type="submit" class="btn btn-default btn-link" name="submit">
</form>

Se, ao invés de usar o action, eu usar onsubmit, sou redirecionado ao seguinte erro anexado:

 

P8x28.png

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 minuto atrás, Felipe Evangelista disse:

Ainda não tenho muitos conhecimentos com Ajax,

Recomendo a leitura:

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#guia-definitivo-ajax

 

 

Sobre o seu problema....

A primeira coisa qnd vou efetuar um ajax é confimar que o servidor está efetuando/funcionando.
Tenta isolar o problema....
 Ex:

Tenta criar um Mockzin para teste...

Substitui o conteudo do email.php:

/*
$nomeusuario = utf8_decode($_POST['nome']);
$emailusuario = utf8_decode($_POST['email']);
$mensagem = utf8_decode($_POST['mensagem']);
*/
$nomeusuario = 'Nome Test';
$emailusuario = 'User Test';
$mensagem = 'teste@teste.com.br'; // Ou um E-mail valido...

chama a url, etc etc.

 

Confirmou que dispara?

Volta pro ajax...

é aquela velha historia dividir para conquistar

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
4 minutos atrás, gabrieldarezzo disse:

A primeira coisa qnd vou efetuar um ajax é confimar que o servidor está efetuando/funcionando.

Não sei se é exatamente o que você quis dizer, mas os e-mails eram disparados normalmente antes de eu tentar usar o Ajax, redirecionava à outra página e retornava a pagina inicial.

Citar

Pelo jeito minha dúvida é beeem recorrente por aqui, até um guia você acabou criando! haha De qualquer forma, vou ler e ver se consigo resolver, aí dou um retorno aqui.

Compartilhar este post


Link para o post
Compartilhar em outros sites

haha é sim .

Mas tentai ai qlq dificuldade retorna.

 

Se tudo funcionava (e ainda funciona após o teste sugerido acima)

 

Só acompanhar o fluxo de parametros/URL que é enviado pela propria ferramenta de dev do Google Chrome

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#5---acompanhar-oq-foi-enviado

 

Provavelmente não está enviando.

 

 

Leitura complementar:

https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading#visao_geral_do_painel_network

Compartilhar este post


Link para o post
Compartilhar em outros sites
Citar

Provavelmente não está enviando.

Exatamente haha Tentei usar o método mais ou menos como está no guia com serialize e tal, mas acontece o mesmo problema, sendo redirecionado para aquela página com erro de HTTP, "HTTP Error 405.0 - Method Not Allowed", que na verdade não sei o que é. Vou dar uma olhada sobre o que é esse erro, vai que me dá uma luz também

Compartilhar este post


Link para o post
Compartilhar em outros sites

Provavelmente junto com o Ajax está realizando o submit do form.

 

Faz o seguinte, cria um action que só recebe um texto e retorna outro texto e faz o ajax chamar este action, quando esta parte estiver OK, aí você começa a alterar para o ajax enviar os dados do email e por ultimo altera o action para realizar o envio do email propriamente dito

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, Felipe Evangelista disse:

 

Bom, consegui resolver, na verdade o jquery estava sendo chamado no fim da tag body, mas era pra estar na tag head, erro bem besta mesmo!

 

Não faz sentido isso.

 

o jQuery deveria ser realmente o ultimo a ser carregado (antes do fechamento da tag body), inclusive melhora na performace por não ser auto blocante.

 

 

Ex: de um carregamento correto:

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
<div>
	<p>Nome</p>
	<input type="text" name="" id="" />
	<p>Email</p>
	<input type="text" name="" id="" />
	<button id="btn-action">Disparar!</button>
</div>      
	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script src="meuScritpQueUsajQuery.js" type="text/javascript"></script>
</body>
</html>

PS: ordem importa aqui, deve ser carregador primeiramente o jQuery e só após isso os demais.

 

E para garantir que o escopo não vai vazar/aquele bloco de jQuery só vai ser executado depois que o jQuery estiver pronto.

 

Um exexemplo do conteúdo da meuScritpQueUsajQuery.js:

$(document).ready(function() {
	//Funções jQuery aqui... por exemplo o monitoramento
	
	
	$( "#btn-action" ).bind( "click", function() {
		//Chamar ajax, limpar campos, chamar API, chamar a mamãe, etc
	});
	
});

 

 

 

 

5 horas atrás, Felipe Evangelista disse:

O único problema agora, é que os inputs não estão sendo limpos após o envio.

Como está o seu código que 'limpa'?

 

Exemplo de como limpar campos com o jQuery:

$( "#btn-action" ).bind( "click", function() {
	
	
	//ajax
	
		//success
			$( "#meuCampo" ).val('')
});

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Citar

Não faz sentido isso.

 

o jQuery deveria ser realmente o ultimo a ser carregado (antes do fechamento da tag body), inclusive melhora na performace por não ser auto blocante.

Então, eu nem tinha tentado colocar na head por causa disso, na verdade quem deu essa ideia foi um amigo da faculdade

 

Citar

Como está o seu código que 'limpa'?

 

 else {

                        $("#status").html("Mensagem enviada com sucesso!");

                        $("#nome").val("");
                        $("#email").val("");
                        $("#mensagem").val("");
                    }

Está dessa forma. Não sei o que aconteceu, mas não consegui acessar minha conta pelo facebook e acabei criando outra, e não é só nesse forum que deu esse problema kk 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Citar

Agora está tudo resolvido, demorei pra vir responder, mas ontem o que eu fiz foi aí do jeito que você exemplificou, e com o jquery no lugarzinho dele lá perto do fim do body, já tinha tentado fazer mais ou menos dessa forma e não tinha dado certo, mas ontem deu, não sei porque, do jeito que eu fiz deveria ter algo errado que eu não vi, mas enfim, pelo menos deu tudo certo com a sua ajuda!

Valeu mesmo :D 

 

Em 29/03/2017 at 11:38, gabrieldarezzo disse:

Vou assistir hoje!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por gersonab
      Bom dia a todos, estou usando o datatable com uma consulta mysql e funciona 100% , meu único problema é na hora que eu exporto para pdf, este não vem com sua largura da tabela exportada em 100%, dependendo da situação ocupa apenas 30% da página, infelizmente após varias pesquisas ainda não encontrei uma forma de fazer.
      segue meu código de forma simples:
      $('#exportar').DataTable( { language: { url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/pt-BR.json', }, dom: 'Bfrtip', order: [[ 0, 'desc' ]], buttons: [ 'pdfHtml5' ] } ); desde já agradeço toda ajuda possível
×

Informação importante

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