Publicado em 14 de ago.

Limpando Campo do Formulário e Resultado da pesquisa juntos.

Bem, o meu professor de programação web solicitou que eu realizasse a limpeza do formulário juntamente com o valor do produto que é impresso na tela, segue o código para melhor entendimento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"

<html>
<head>
<script type="text/javascript" src="bibliotecaAjax.js"></script>
<script type="text/javascript" src="exemplo1.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Web Interativa com Ajax e PHP</title>
<script type="text/javascript">
 function limparFormulario()
 {
 document.getElementById('codigo').value = '';
 }
 </script>
</head>
<h2>Consulta de preços</h2>
<form id="formu" action="javascript:void%200" onSubmit="obtemPreco(this.codigo.value); return false">

<p>Digite o código do produto:
<p>Escolha o código entre: p1, p2, p3, p4 e p5</p>
<input name="codigo" type="text" id="codigo" size="5" maxlength="5">
<span id="precoProduto"></span>
<p><input type="submit" name="Consultar" value="Consultar"></p>
<input type="button" value="Limpar" id="limpar" onclick="limparFormulario();"/>
</form>
</body>
</html>

function obtemPreco(cod){

if (cod){
var url="exemplo1.php?cod="+cod;
requisicaoHTTP("GET", url, true);
}
}
function trataDados(){
var preco = ajax.responseText; // obtem a resposta como string
if (preco == "0.00")
var info = "Preço não encontrado";

else

var info = "O preço é R$"+ preco;

document.getElementById("precoProduto").style.backgroundColor="white";

document.getElementById("precoProduto").innerHTML=info;
}

<?php
$gmtDate = gmdate("D, d M Y H:i:S");
header("Expires:{$gmtDate} GMT");
header("Last-Modified: {$gmtDate} GMT");
header("Cache-Control: no-cache, must-revalidade");
header("Pragma: no-cache");

// array de preços

$produtos = array (
"p1" => "29.90",
"p2" => "35.00",
"p3" => "40.50",
"p4" => "50.90",
"p5" => "120.00"

);

$codigo = $_GET["cod"];

if (isset($produtos[$codigo]))
echo $produtos[$codigo];
else

echo "0.00";
?>

 

Eu sei que é possível utilizar um refresh através de um botão reset no html, mas o professor quer que a limpeza do campo "codigo" e do <span id="precoProduto"></span> sejam feitas simultaneamente para que o usuário possa realizar uma nova busca sem a atualização de uma nova página.

 

Já tentei criar uma função remove, mas ela acaba removendo a tag <span>, inviabilizando uma nova busca do usuário.

Gostaria de saber se alguém possui alguma solução para meu problema, e agradeço desde já.

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<html> <head> <script type="text/javascript" src="bibliotecaAjax.js"></script> <script type="text/javascript" src="exemplo1.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Interativa com Ajax e PHP</title> <script type="text/javascript"> function limparFormulario() { document.getElementById('codigo').value = ''; } </script> </head> <h2>Consulta de preços</h2> <form id="formu" action="javascript:void%200" onSubmit="obtemPreco(this.codigo.value); return false"> <p>Digite o código do produto: <p>Escolha o código entre: p1, p2, p3, p4 e p5</p> <input name="codigo" type="text" id="codigo" size="5" maxlength="5"> <span id="precoProduto"></span> <p><input type="submit" name="Consultar" value="Consultar"></p> <input type="button" value="Limpar" id="limpar" onclick="limparFormulario();"/> </form> </body> </html>

function obtemPreco(cod){ if (cod){ var url="exemplo1.php?cod="+cod; requisicaoHTTP("GET", url, true); } } function trataDados(){ var preco = ajax.responseText; // obtem a resposta como string if (preco == "0.00") var info = "Preço não encontrado";

echo "0.00"; ?> Eu sei que é possível utilizar um refresh através de um botão reset no html, mas o professor quer que a limpeza do campo "codigo" e do <span id="precoProduto"></span> sejam feitas simultaneamente para que o usuário possa realizar uma nova busca sem a atualização de uma nova página. Já tentei criar uma função remove, mas ela acaba removendo a tag <span>, inviabilizando uma nova busca do usuário.