Ir para conteúdo
Fórum CódigoFonte.net
Entre para seguir isso  
tony_lu

Ajuda para mandar formulario por ajax

Recommended Posts

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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'];

?>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ola amigo, mto obrigado pela ajuda... esta quase tudo funcionando... só tem um problema... quando por exemplo este formulario esta em uma pagina que foi carregada pelo ajax, nao esta funcionando ... por exemplo&amp;nbsp; esta pagina que você simulou... CONTEUDO1.PHP ...&amp;nbsp; vamo supor que nesta pagina tem um formulario, o mesmo não funciona ... só funciona quando o form esta na pagina principal INDEX.PHP .... segue a codificação que fiz:

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

<div id="buscador">

<input name="categoria" type="text" id="categoria" style="color: #CCC; background: #ffffff url(imagens/lupa.jpg) no-repeat right" size="60" />

<select name="buscar" id="buscar" 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" style="background:#65150A; color:#FFF; width: 71px; height: 27px; padding-botton: 4px" />

</label>

</div>

Quando eu utilizei este mesmo formulario na pagina index.php, funcionou perfeitamente, mas carregando pelo ajax, o formulario nem carrega na pagina CONTEUDO1.PHP ...mesmo clicando no botão nada acontece...pode me ajudar?

Mais uma vez agradeço sua ajuda!

Abs

Compartilhar este post


Link para o post
Compartilhar em outros sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Processando...
Entre para seguir isso  

×
×
  • Criar Novo...