Ação submit com ajax

[Lúcio Marques]

Boa Noite para todos.

estou com uma pequena dúvida com ajax no form. É o seguinte:

Meu site atualiza as página em um determinado lugar específico quando clico em algum menu do site.

Esta função eu usei ajax no lugar do iframe na substituição das páginas. Com isso está funcionando filé.

O que eu quero, é: que o botão do imput do formulário atualiza também no mesmo espaço, usando ajax.

Gostaria que a resposta do formulário substituisse a mesma página.

Antes com iframe era só eu colocar a função target mas agora com ajax estou meio perdido.

Fico no aguardo. muito obrigado.

[vini_loock]

beleza?

Você utiliza alguma biblioteca? Pelo que percebi você não manja muito de js, então acho interessante que você comesse com jquery, ela te da um conceito de js não obstrusivo.

Você vai ter que apenas pegar o value dos inputs e depois com sua função ajax vai carregar em uma div a página responsável por receber os valores.

Ex:

document.form.onsubmit = function(){
var valueNome = this.nome.value;
var valueMail = this.mail.value;
var valueMsg = this.msg.value;

ajax(aqui você envia os dados de acordo com sua função);

return false;
};

Não tem segredo.

[Lúcio Marques]

Oi vni_look, primeiro agradeço seu post.

Bom, como você disse, não entendo ainda de ajax, mas já estou estundo sobre.

Essa função que você me passou eu coloco dentro do ajax ou jquery?

Obrigado e fico no aguardo.

beleza?

Você utiliza alguma biblioteca? Pelo que percebi você não manja muito de js, então acho interessante que você comesse com jquery, ela te da um conceito de js não obstrusivo.

Você vai ter que apenas pegar o value dos inputs e depois com sua função ajax vai carregar em uma div a página responsável por receber os valores.

Ex:

document.form.onsubmit = function(){
var valueNome = this.nome.value;
var valueMail = this.mail.value;
var valueMsg = this.msg.value;

ajax(aqui você envia os dados de acordo com sua função);

return false;
};

Não tem segredo.

[vini_loock]

Você utiliza jquery?

Então fica muito mais fácil.

$('form input:submit').live('click', function(){
var nome = $('input[name=nome]').val();
var mail = $('input[name=mail]').val();
var ass = $('input[name=ass]').val();
var msg = $('input[name=msg]').val();
$('#status').html('<img src="loading.gif' widht="30" height="30" id="loadingGif" border="0" alt="" />');
$('#status').load('recebe.php', '?nome='+nome+'&mail='+mail+'&ass='+ass+'&msg='+msg);
return false;
});

E sua estrutura html:

<form>
<input type="text" name="nome" />
<input type="text" name="mail" />
<input type="text" name="ass" />
<textarea name="msg"></textarea>
<input type="submit" value="Enviar" />
</form>
<div id="status"></div>

Editado Março 19, 2011 por vini_loock

[www.sismobile.com.br]

Você utiliza prototype?

Então fica muito mais fácil.

CODE

$('proto').request({

onComplete: function(transport){ $('status').update(transport.responseText); }

})

HTML

<form id='proto' method="POST" action="/user/info">

<input type="text" name="nome" />

<input type="text" name="mail" />

<input type="text" name="ass" />

<textarea name="msg"></textarea>

<input type="submit" value="Enviar" />

</form>

<div id="status"></div>

erwin

www.sismobile.com.br