Quando comecei a fazer o site, em minha ingênua ignorância, pensei que seria possível fazer um recurso de comentários somente usando JavaScript. Por isso, fui até onde podia com o código de exemplo desta página. Apesar de ser inútil para seu propósito inicial, ela acabou se tornando um bom exemplo do uso de um formulário simples que aparece e desaparece.
Segue abaixo o texto original, como o escrevi nos primórdios de minhas brincadeiras com HTML e JavaScript.
Estou chegando cada vez mais à conclusão que é impossível fazer uma página de comentários sem um banco de dados. O link a seguir acessa a página em que eu trabalhei na noite do dia 5/Agosto (até faltei à academia para isso), e com o qual passei muita raiva.
O objeto "texto" aceita a inclusão dos dados do formulário mas, quando a função JavaScript é encerrada, ele volta ao que era antes! Que merda! O motivo disso estar acontecendo é porque a página é recarregada após o formulário ser escondido.
É, tá difícil, acho que não vou conseguir fazer o que quero...
<head>
<style type='text/css'>
#formul {position: relative; visibility: hidden; display: none}
#texto {position: relative; visibility: visible; display: inline}
q {color: #f00; font-weight: bold}
</style>
<script type='text/javascript'>
function show_form() {
document.getElementById('formul').style.display = 'inline'
document.getElementById('formul').style.visibility = 'visible'
}
function add_comment(){
var d = new Date()
document.getElementById('texto').innerHTML+='<span style="background-color: #c0cfff"><strong> Comentário postado por <q>'+document.forms[0].txt_name.value+'</q> - '+ d.toLocaleString()+' </strong></span><br /><br /> \
<pre><strong>"</strong>'+document.forms[0].txt_comment.value+'<strong>"</strong></pre><br /> \
<hr />'
document.getElementById('formul').style.visibility = 'hidden'
document.getElementById('formul').style.display = 'none'
alert('Conteúdo do objeto texto (Olha ele aparecendo aí, debaixo de "Posts da galera"):\n \n '+document.getElementById('texto').innerHTML)
}
</script>
</head>
<body>
...
<div style='margin: 15px 0'>
<button onclick="alert(document.getElementById('texto').innerHTML)">
Ver texto do id texto
</button>
</div>
<div
id='texto'>
<strong>Posts da galera:</strong><br /><br />
</div>
<div style='display: run-in; position: relative'>
<button
onclick='show_form()'>
Acionar Formulário
</button>
</div>
<div
id='formul'>
<form name="entradas" method="get" action="#">
<table border="0">
<tr>
<td><strong>Nome:</strong></td>
<td><input type="text" name="txt_name" /></td>
</tr>
<tr>
<td><strong>Email:</strong></td>
<td><input type="text" name="txt_email" /></td>
</tr>
<tr>
<td valign="top"><strong>Comentário:</strong></td>
<td><textarea name="txt_comment" cols="40" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type='submit' value='OK'
onclick='add_comment()' name='cmd_submit' />
<input type='reset' value='Limpar' name='cmd_reset' />
<input type='button' value='Cancelar' onClick="forms[0].reset();document.getElementById('formul').style.visibility = 'hidden';document.getElementById('formul').style.display = 'none'" name='cmd_cancel' />
</td>
</tr>
</table>
</form>
</div>
</body>