Exibir resultado de um formulario dentro de uma div

vini_loock · Janeiro 1, 2010

Olá... Feliz ano novo.

Eu tenho um formulario, e eu queria que quando a pessoa clicasse em enviar, abrisse o resultado dentro de uma div, tipo mensagen enviada com sucesso, só que não em outra página e sim dentro de uma div.

Lembrando que eu não sei quase nada de javascript. Se for algo mais que usar um onclick, pesso, se possivel que me mostrem um script pronto.

Vlw

Tesla · Janeiro 1, 2010

feliz 2010!

amigo, você pode usar ajax, e pra isso tem que sacar um pouquinho de java script:

vamos supor tenho a página form.php

<?php

if ($_POST["acao"] == 'pegar') {
echo utf8_encode('Parabéns '.utf8_decode($_POST["nome"].' '.$_POST["sobrenome"]).', formulário recebido com sucesso pelo PHP[*corta]');
} 

?>
<html>
<head>
<title>Formulário com Ajax</title>
</head>

<body>

<script language="javascript">

function ajaxInit(){
   var xmlhttp;

   try {
      xmlhttp = new XMLHttpRequest();
   } catch(ee) {
      try {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(E) {
         try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch(E) {
            xmlhttp = false;
         }
      }
   }

   return xmlhttp;

}

function carregar (lnk, varis, metodo, reel, carel) {//-Link, variáveis, método, id elementoque recebe aresposta,idelementodecarregar
var ajax;
ajax = ajaxInit();
if (ajax) {
    if (metodo == 'POST') {
        document.getElementById(carel).innerHTML = 'Carregando...';
        ajax.open ( 'POST' ,lnk, true );
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(varis);
        }
        else {
        document.getElementById(carel).innerHTML = 'Carregando...';
ajax.open ( 'GET' ,lnk+varis, true );

}
ajax.onreadystatechange = function ( ) {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
    
    document.getElementById(reel).innerHTML = ajax.responseText.substr(0,ajax.responseText.indexOf('[*corta]'));
        document.getElementById(carel).innerHTML = 'Carregado';
}
}
}
}
if (metodo == 'GET')
 ajax.send (null);
}


function envia () {

carregar (location.href, 'acao=pegar&nome='+document.getElementById('nome').value+'&sobrenome='+document.getElementById('sobrenome').value, 'POST', 'mensagem', 'status');

}

</script>

<div id="mensagem"></div>

Nome: <input type="text" id="nome" size="20"><br>
Sobrenome: <input type="text" id="sobrenome" size="20"><br>
<input type="button" value="enviar" onMouseDown="envia()">

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

</body>

</html>

coloque ele em uma página php, e rode no seu servidor... é fácil de entender o que o javascript faz... pesquise por "ajax" no google, é o que você vai usar.

Essa função "carregar" eu fiz quando estava começando a estudar ajax, creio que você possa usá-la bastante ainda.

Boa sorte.

Editado Janeiro 1, 2010 por Tesla

vini_loock · Janeiro 1, 2010

Aquele php que fica no topo é o que vai pegar o s dados do form?

e eu vi que no ajax ta aparecendo os metodos post e get, mas qual que vai enviar o formulario para o servidor?

Tesla · Janeiro 1, 2010

observe que quando chamo a minha função eu passo o parâmetro POST, se eu passasse GET, a mesma iria enviar pelo método GET

carregar (location.href, 'acao=pegar&nome='+document.getElementById('nome').value+'&sobrenome='+document.getElementById('sobrenome').value, 'POST', 'mensagem', 'status');

sim, aquele php lá em cima pega os dados em post... observe que na função eu passei o parâmetro:

'acao=pegar&nome='+document.getElementById('nome').value+'&sobrenome='+document.getElementById('sobrenome').value

ou seja: $_POST["acao"] vai receber o valor "pegar"

$_POST["nome"] recebe o valor do campo nome, assim como o sobrenome.

Editado Janeiro 1, 2010 por Tesla

Entrar

Exibir resultado de um formulario dentro de uma div

Pergunta

vini_loock

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

Tesla

Link para o comentário

Compartilhar em outros sites

vini_loock

Link para o comentário

Compartilhar em outros sites

Tesla

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades