[Resolvido] mandar formulario por ajax

tony_lu · Março 9, 2012

Boa noite pessoal, tudo legal?

Estou criando um site que toda a passagem de conteudo é feito em ajax, ou seja, tenho apenas uma pagina index.php ...e pega o conteudo de outros links por ajax,peguei um tutorial na internet que funciona dessa forma:

nas tags HEAD da index

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"
type="text/javascript">
</script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"
type="text/javascript">
</script>

<script type="text/javascript" >
function abreURL(url,metodo,onde){
  if(metodo=='POST'){
     // metodo post
      $.post(url, function(data) {
     // página do carregador (loading)
      $("#carregador").show();
      $( "#"+onde).load(url);
     });
  }
  else if(metodo=='GET'){
     // metodo get
     $.get(url, function(data) {
    // página do carregador (loading)
     $("#carregador").show();
    $( "#"+onde).load(url);
   });
 }
}
</script>

Os links ficam dessa forma:

<li><a href="#" title="" onclick="abreURL('home.php','GET','conteudo');"><span>Home</span></a></li>
<li><a href="#" title="" onclick="abreURL('artistas.php','GET','conteudo');"><span>Artistas</span></a></li>
<li><a href="#" title="" onclick="abreURL('radios.php','GET','conteudo');"><span>Radios</span></a></li>

e a div que irá receber a página e os parâmetros

<div id="conteudo">
<div id="carregador">Carregando...</div>
Aqui irá carregar a pagina nova e os dados do banco.</div>

A passagem de conteudo por ajax esta perfeita, porem gostaria de passar informações por formulario, sem ocorrer refresh tbm, porem nao estou conseguindo, tentei adicionar no action do form mas não funcionou, segue a tentativa:

<form action="" method="post" action="abreURL('pagina_nova.php?id=10','POST','conteudo')">
<input name="" type="text" size="60" />
<select name="" style="color: #900; text-align:center">
 <option value="1">Artista</option>
 <option value="2">Música</option>
 <option value="3">Album</option>
 <option value="4" selected="selected">Geral</option>
</select>
<label>
 <input type="submit" name="button" id="button" value="Buscar" />

tentei também no botão submit do form, mas tambem nao funciona:

<input onclick="abreURL('pagina_nova.php?id=10','POST','conteudo')" type="submit" name="button" id="button" value="Buscar" style="background:#65150A; color:#FFF; width: 91px; height: 21px; padding-botton: 4px" />

Alguem sabe como faço para passar os campos de formulario por ajax, utilizando este metodo?

Obrigado!

William Bruno · Março 9, 2012

amigo, você está invocando a lib jQuery duas vezes. Não faça isso. O jquery.js é a mesma coisa que o jquery.min.js

deixe somente:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"
type="text/javascript">
</script>

Qnto ao formulário, veja:

http://wbruno.com.br/2012/01/20/enviar-formulario-para-php-sem-refresh-jquery-ajax/

tony_lu · Março 12, 2012

Obrigado pela dica amigo, eu consegui fazer o formulario funcionar, porem ainda tem um problema... quando o formulario esta em uma pagina que eu chamo pelo ajax nao funciona... só funciona o formulario na pagina index.php sem que eu chame e abra na div conteudo ... segue o codigo:

index.php

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function() {
   $("#button").click(function() {
          $("#conteudo").load("conteudo1.php", {
                  codigo: $("#codigo").val(),
                  categoria: $("#categoria").val()
          });
   });
});
</script>
</head>
<body>
<div id="form">
   Código: <input name="codigo" id="codigo" type="text" size="60" />
   <br />
   <select name="categoria" id="categoria" style="color: #900; text-align:center">
         <option value="Artista">Artista</option>
         <option value="Música">Música</option>
         <option value="Álbum">Album</option>
         <option value="Geral" selected="selected">Geral</option>
   </select>
   <br />
   <input type="submit" name="button" id="button" value="Buscar" />
</div>
<div id="conteudo">
</div>
</body>
</html>

CONTEUDO1.PHP

Carregado via Ajax:
<br />
<b>Codigo:</b>
<?php
echo $_POST['codigo'];
?>
<br />
<b>Categoria:</b>
<?php
echo $_POST['categoria'];

<div id="form">
   Código: <input name="codigo" id="codigo" type="text" size="60" />
   <br />
   <select name="categoria" id="categoria" style="color: #900; text-align:center">
         <option value="Artista">Artista</option>
         <option value="Música">Música</option>
         <option value="Álbum">Album</option>
         <option value="Geral" selected="selected">Geral</option>
   </select>
   <br />
   <input type="submit" name="button" id="button" value="Buscar" />
</div>
?>

Ou seja... o formulario que esta na index.php esta abrindo normalmente...porem o form que esta pagina conteudo1.php nao funciona ... pode me ajudar?

William Bruno · Março 12, 2012

é este problema aqui, leia:

http://wbruno.com.br/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

tony_lu · Março 13, 2012

Ola William Bruno, tudo bem?

obrigado pela ajuda, consegui com o .live, veja:

<script type="text/javascript" >
$(document).ready(function() {
   $("#botao").live('click',function() {
          $("#conteudo").load("home.php", {
                  nome: $("#nome").val(),
                  categoria: $("#buscar").val()
          });
   });
});
</script>

Obrigado pela ajuda e pela paciencia.

Abs!

rafaameendes · Maio 26, 2013

Esse é o jquery com ajax, que traz com post os valores inseridos no formulário. Um pedaço do código que utilizei pra fazer um sistema que calcula a data(quantidade de tempo) de criação do e-mail. Fazendo uma subtração da idade de criação pela idade atual.

<html>

<head>

<title>Enviando formulário com AJAX</title>

</script>

// evitando que os dados sejam submetidos pelo modo tradicional

jQuery(document).ready(function(){

jQuery("#form").submit(function(){

return false;

});

// carregando a função para o envio

jQuery("#envia").click(function(){

envia_form();

});

// limpando a div antes de um novo envio

function envia_form() {

jQuery("#resultado").empty();

// pegando os campos do formulário

var nome = jQuery("#nome").attr("value");

var idade_criacao = jQuery("#idade_criacao").attr("value");

var idade_atual = jQuery("#idade_atual").attr("value");

var email = jQuery("#email").attr("value");

// tipo dos dados, url do documento, tipo de dados, campos enviados

// para GET mude o type para GET

jQuery.ajax({

type: "POST",

url: "processar.php",

dataType: "html",

data: "nome=" + nome + "&idade_criacao=" + idade_criacao + "&idade_atual=" + idade_atual + "&email=" + email ,

// enviado com sucesso

success: function(response){

jQuery("#resultado").append(response);

},

// quando houver erro

error: function(){

alert("Ocorreu um erro durante a requisição");

}

});

}

});

</script>

</head>

<body>

// utilizo um action vazio

// o id do form tem que ser de acordo com o do código jquery acima

<tr><td>Idade Criação</td><td><input name="idade_criacao" id="idade_criacao" type="text"></td></tr>

<tr><td>Idade Atual</td><td><input name="idade_atual" id="idade_atual" type="text"></td></tr>

<tr><td>Email</td><td><input name="email" id="email" type="text"></td></tr>

// o id do type submit tem que ser de acordo com o do código jquery acima

</form>

</table>

// o id da div tem que ser de acordo com a do código jquery acima

</div>

</body>

</html>

Como receber o resultado:

<?php

echo $_POST['nome'];

echo $_POST['idade_criacao'];

echo $_POST['idade_atual'];

echo $_POST['email'];

?>

Entrar

Arquivado

[Resolvido] mandar formulario por ajax

Recommended Posts

tony_lu 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

tony_lu 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

tony_lu 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaameendes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeginiter - Orientação para Impressão

Ajuda com Extends e envio para o banco

Fixar div até atingir uma certa altura

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante