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: 16.776 ]

Homepage: https://youtube.com/c/cotidianohackeado

Download form-jquery-ajax.zip




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

as bastes do papa

Var_dump

Display animado

Scrool Marquee Java


  

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!

[2] Comentário enviado por acsduda em 02/01/2017 - 17:32h

poderia dar um exemplo trocando os inputs por um jumpmenu por ex.?


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts