[Resolvido] Como dar submit em formulario com ajax sem refresh?

[joaofla123 3]

Sei que é possível mas sou iniciante e não consegui entender a sintaxe para usar no meu projeto.

 

Exemplo:

 

Formulario: id="form"

Campo: name="nome" id="nome"

Banco de dados: "banco" / tabela "clientes" / coluna "nome"

Pagina php de envio: "cadastrando.php" (com conexao com o banco e insert)

Botao submit: id="submit"

 

Como ficaria montada essa estrutura?

[William Bruno 1501]

exemplo:

 

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

[joaofla123 3]

obrigado!

[Gleyson Abreu 49]

Ajudou ainda muito até agora, tava precisando desse código :)

[sirmedina 0]

E se não tivesse botão submit? Se eu estivesse usando um script como:

onclick="this.form.submit()"

Eu ja tentei e não consegui

[Gedalias dos Santos 0]

Para o envio de formulário sem dar refresh na página, eu aconselho que se faça uso da biblioteca jquery, pois a mesma é uma ferramenta muito boa e bem utilizada no mundo web...

Ex: a primeira coisa a se fazer é baixar a biblioteca no site do jquery e importa-la para a sua própria página web.

<script type="text/javascript" src="jquery.js"></script>

o formulário html ficaria assim...

<form action="" method="post">

<input type="text" name="nome" id="nome"><br>

<input type="button" name="env" id="env" value="Enviar">

</form>

<div id="pont">

</div>

Vale ressaltar que para fazer isso você não pode usar o botão submit, pois por mais que sua ação seja nula ele irá atualizara página...

o script utilizando jquery ficaria assim...

<script type="text/javascript">

$(function(){

$("#env").click(function(){

var nome = $(this).parent().find("#nome").val();

$.post("cadastrando.php",{nome:nome},function(data){

$("#point").load(data);

});

});

});

</script>

Explicação: Será iniciado um função anônima quando a página estiver totalmente carregada - function() -

nome vai receber o valor contido no campo de id nome... foi usado parent(), pois no html exite uma arvore, e supomos que "foi necessário subir um galho para chegar a uma determinada folha"....

find() faz busca nesse "galho" pelo campo que possui o id nome e val() pega o seu valor.

$.post é usado quando for necessário mandar um postagem a alguma página extrena, no caso será php,é o metodo de post no jquery. O mesmo recebe três parâmetros: a página para onde será mandado o post, o que será mandado e pode-se usar uma função com uma variável de retorno que demos o nome de data

Data vai retornar tudo aquilo que foi exposto através de echo ou print na sua página html e será exibido dentro da div point...

Espero que entenda e que tenha que ajudado em alguma coisa.

[lpgrafites 0]

Para o envio de formulário sem dar refresh na página, eu aconselho que se faça uso da biblioteca jquery, pois a mesma é uma ferramenta muito boa e bem utilizada no mundo web...

Ex: a primeira coisa a se fazer é baixar a biblioteca no site do jquery e importa-la para a sua própria página web.

<script type="text/javascript" src="jquery.js"></script>

o formulário html ficaria assim...

<form action="" method="post">

<input type="text" name="nome" id="nome"><br>

<input type="button" name="env" id="env" value="Enviar">

</form>

<div id="pont">

</div>

Vale ressaltar que para fazer isso você não pode usar o botão submit, pois por mais que sua ação seja nula ele irá atualizara página...

o script utilizando jquery ficaria assim...

<script type="text/javascript">

$(function(){

$("#env").click(function(){

var nome = $(this).parent().find("#nome").val();

$.post("cadastrando.php",{nome:nome},function(data){

$("#point").load(data);

});

});

});

</script>

Explicação: Será iniciado um função anônima quando a página estiver totalmente carregada - function() -

nome vai receber o valor contido no campo de id nome... foi usado parent(), pois no html exite uma arvore, e supomos que "foi necessário subir um galho para chegar a uma determinada folha"....

find() faz busca nesse "galho" pelo campo que possui o id nome e val() pega o seu valor.

$.post é usado quando for necessário mandar um postagem a alguma página extrena, no caso será php,é o metodo de post no jquery. O mesmo recebe três parâmetros: a página para onde será mandado o post, o que será mandado e pode-se usar uma função com uma variável de retorno que demos o nome de data

Data vai retornar tudo aquilo que foi exposto através de echo ou print na sua página html e será exibido dentro da div point...

Espero que entenda e que tenha que ajudado em alguma coisa.

Olá amigo e se eu tivesse vários botões na mesma página como ficaria a identificação e organização dos mesmos???

Usava muito o flash para criar esses formulários, mas como vê não se usa mais.