Carregar resultado de um form dentro de uma div (jQuery + Ajax) [Javascript]

Carregar resultado de um form dentro de uma div (jQuery + Ajax)

Publicado por Fábio Berbert de Paula (última atualização em 15/01/2015)

[ Hits: 19.154 ]

Homepage: https://fabio.automatizando.dev

Download form-jquery-ajax.zip

2 0

Denuncie Favoritos Indicar

Este código demonstra de forma simples como combinar jQuery com Ajax para carregar o resultado do processamento de um formulário dentro de uma div.

Esconder código-fonte

index.html: 

<html>

<body>

<form>
Nome: <input type="text" name="nome"><br/>
E-mail: <input type="text" name="email"><br/>
<button type="button" id="butEnviar">Enviar</button>
</form>

<br/><br/>
<div id="saida"></div>

<!-- bibliotecas do jquery -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- bibliotecas do jquery -->

<script>
$(document).ready(function() {
   //definir evento "onclick" do elemento (botao) ID butEnviar 
   $("#butEnviar").click(function() {

      //capturar o valor dos campos do fomulario
      var nome  = $("input[name=nome]").val();
      var email =  $("input[name=email]").val();

      //usar o metodo ajax da biblioteca jquery para postar os dados em processar.php
      $.ajax({
         "url": "processar.php",
         "dataType": "html",
         "data": {
            "nome" : nome,
            "email":email 
         },
         "success": function(response) {
            //em caso de sucesso, a div ID=saida recebe o response do post
            $("div#saida").html(response);
         }

      });
   });
});
</script>


</body>
</html>

processar.php:

<?php
$nome  = $_REQUEST['nome'];
$email = $_REQUEST['email'];

echo "Seu nome &eacute; <strong>$nome</strong>, teu email <strong>$email</strong> e...<br/><br/>VIVA O LINUX!!!";
?>

Scripts recomendados

Desmarcando input radio com jQuery

acessar cpf

dadadada

Máscara de celular com 8 ou 9 dígitos

Trocar imagem quando o mouse estiver em cima da imagem

Comentários

[1] Comentário enviado por FellipePeixoto em 01/01/2017 - 19:05h

Olá!

É possível colocar esse script em um .js?
Se sim como faço isso?
Já tentei usar "<script src="DivLoader.js" />" no lugar de onde o script é implementado, porém não obtive sucesso.

Desde já agradeço, abraços!

0 0