Ir para conteúdo

POWERED BY:

Arquivado

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

Juliana Mesquita

Ocultar "refresh" de formulário

Por , em Javascript

Recommended Posts

Juliana Mesquita    0

Juliana Mesquita
Postado

Boa tarde,

 

Gostaria de ajuda!!!  :tired:

 

Para  ocultar do usuário o refresh que está no arquivo "envio_pesquisa.php",

pois ele direciona para pagina, só que não sei como vincular o submit que está no "contato_pesquisa.php" com o arquivo "ajax_pesquisa.js",

teria como alguém me ajudar??

 

 

OBS: Gostaria apenas que o formulário desse um reset deixando os campos em branco e não saísse da pagina.

 

 

 

ajax_pesquisa.js

contato_pesquisa.php

envio_pesquisa.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

quimera    13

quimera
Postado

você vai usar algum framework javascript um exemplo usando jquery:

  

$(function(){
    $('#formulario').submit(function(){
		$.post( "pasta/pagina.php", function(e) {
 			$( "#resultado" ).html(e);
		});
      	//aqui impede do formulário ser postado
      	return false;
    });
});

//Api post Jquery:
//https://api.jquery.com/jquery.post/

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Juliana Mesquita    0

Juliana Mesquita
Postado

Boa tarde, obrigada me ajudar, já consegui aki rsrsr... 

Faltava uma função no código js.... 

 

Os arquivos funcionando estão em anexo. 

 

 

Arquivo do formulário em html. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
	<head>
		<title>Formulário de contato</title>
	</head>
	
	
	
	<body>
		<form id="simples-formulario-ajax">	
			<table class="contato">
				<tr>          <br><br><br>
					<td><label  for="nome" >Nome </label></td>
					<td><input  type="text" name="nome" id="nome" class="  " placeholder="Digite seu nome" required autofocus></td>
				</tr>
				<tr>
					<td><label class="contato" for="email">Email</label></td>
					<td><input class="contato" type="text" name="email" id="email" class=" " placeholder="seu@email.com.br" required></td>
				</tr>
				<tr>
					<td><label class="contato" for="assunto" id="assunto">Assunto:</label></td>
					<td><select class="contato" name="assunto" id="assunto">
								<option value="Sala de Pesquisa"> Sala de Pesquisa </option>
						</select></td>
				</tr>
				<tr>
					<td><label class="contato"    for="mensagem">Mensagem:</label></td>
					<td><textarea class="contato" name="mensagem" id="mensagem" cols="30" rows="10"></textarea></td>
				</tr>
			</table>
			<button class="contato btn btn-red"  type="submit" id="enviar">Enviar</button>

			<input type="hidden" id="metodo" value="formulario-ajax">
		</form>
		
		
		<!-- JAVASCRIPT -->
			<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
			<script src="http://culturaniteroi.com.br/macniteroi/cod/contato/formulario.js"></script>
		<!-- JAVASCRIPT -->
	</body>
</html>

 

Arquivo PHP, que faz envio da mensagem para o e-mail. 

<?php
	
//Variáveis
$nome = $_POST['nome'];
$email = $_POST['email'];
$assunto = $_POST['assunto'];
$mensagem = $_POST['mensagem'];
$data_envio = date('d/m/Y');
$hora_envio = date('H:i:s');

// Corpo E-mail
  $arquivo = "
    <html>
    <b>Nome:</b>$nome
    <br><br>   
    <b>E-mail:</b><b>$email</b>
    <br><br>
	<b>Assunto:</b>$assunto
	<br><br>
    <b>Mensagem:</b>$mensagem
    <br><br>
    Este e-mail foi enviado em <b>$data_envio</b> às <b>$hora_envio</b>
    <br><br>
    </html>
  ";

  // emails para quem será enviado o formulário
  $emailenviar = "email@gmail.com";
  $destino = $emailenviar;
  $assunto = "Contato via site ...";

  // É necessário indicar que o formato do e-mail é html
  $headers  = 'MIME-Version: 1.0' . "\r\n";
  $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
  $headers .= 'From: ' . $nome;
  
  $enviaremail = mail($destino, $assunto, $arquivo, $headers);
  if($enviaremail){
  $mgm = "E-MAIL ENVIADO COM SUCESSO! <br> O link será enviado para o e-mail fornecido no formulário";
 
   } else {
  $mgm = "ERRO AO ENVIAR E-MAIL!";
  echo "";
  }
	if(strcasecmp('formulario-ajax', $_POST['metodo']) == 0){
	
		$html = 'Nome: '.$_POST['nome'];
		$html .= "\n";
		$html .= 'Email: '.$_POST['email'];
		$html .= "\n\n Mensagem enviada com Sucesso!.";
		
		echo $html;
	}


?>

 

Arquivo em Javascript que limpa os campos da pagina e não sai da pagina. 

	$('#simples-formulario-ajax').submit(function(e){
		e.preventDefault();
		
		if($('#enviar').val() == 'Enviando...'){
			return(false);
		}
		
		$('#enviar').val('Enviando...');
		
		$.ajax({
			url: 'formulario.php',
			type: 'post',
			dataType: 'html',
			data: {
				'metodo': $('#metodo').val(),
				'nome': $('#nome').val(),
				'email': $('#email').val(),
				'assunto': $('#assunto').val(),
				'mensagem': $('#mensagem').val()
			}
		}).done(function(data){
			
			alert(data);
			
			$('#enviar').val('Enviar');
			$('#metodo').val('formulario-ajax');
			$('#nome').val('');
			$('#email').val('');
			$('#mensagem').val('');
			
		});
		
	});

 

valida-formulario.php

formulario.js

formulario.php

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Rafael_Ferreira
      Não consigo carregar imagem do captcha no meu formulário
      Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • luiz monteiro
      Evitar que o navegador limpe os campos de input quando a guia perde o foco
      Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • belann
      Navbar no Nextjs
      Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
×

Informação importante

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

  Aceito