php - 如何在 HTML 表单中输入文本后显示按钮？

Question

我正在编写一个 HTML 表单，我在其中实现了一个反垃圾邮件系统，其中生成两个随机数并要求用户将总和输入到文本字段中。如果答案正确，则会出现“提交”按钮，用户可以继续。如果答案不正确，则会显示“错误答案”的通知。 HTML 表单本身位于表格中。在最后一行单元格中，我将此代码放入:

<td>
<?php 
$firstnumber = rand(0, 5);
$secondnumber = rand(0,6);
echo 'Anti-spam: '.$firstnumber.' + '.$secondnumber.' = ?</td><td><input name="human" placeholder = "Do the math">'; 
?>
</td>
<tr>
<td colspan="2">
By submitting this form you are agreeing to the <a href="http://http://j2partners.net/index.php?site=tos" target="_blank">terms of service and agreements.</a><br><br>
<?php 
$answer = $_POST['human'];
if($answer == $firstnumber + $secondnumber) {
echo '<input id="submit" name="submit" type="submit" value="I Agree"> <input id="reset" name="reset" type="reset" value="Reset">'; } 
else {
echo '<font color=#ea596c>Incorrect answer</font>';
?>
</td>

但是当答案输入框中时，“提交”按钮不会重新出现:(

Answer 1

选项 1(不太安全)添加带有正确答案的隐藏输入

<input type="hidden" name="answer" value="<?=$firstnumber+$secondnumber;?"/>

提交后查看数据

if($_POST["anwer"]==$_POST["human"]) ...

选项 2 用 SESSION 记住正确答案。如果你想做服务器端检查，你必须显示提交按钮 - 数据必须发送到服务器。要显示/隐藏提交按钮，您必须执行客户端检查 并使用 javascript，请参阅选项 3。

<?
  session_start(); // necessary to use session vars
  $firstnumber = rand(0, 5);
  $secondnumber = rand(0, 6);
  if(!empty($_SESSION["answer"]) && $_SESSION["answer"]==@$_POST["human"]) {
    // the math was ok
  }
  $_SESSION["answer"] = $firstnumber + $secondnumber; // must be AFTER the check
?>
<form method="post">
  <?="$firstnumber + $secondnumber = ";?>
  <input name="human" type="text" placeholder="do the math"/>
  <input type="submit"/> <!-- can't be hidden without javascript -->
</form>

选项 3 客户端 javascript 解决方案，如 vasiljevski 推荐

<span id="first"></span> + <span id="first"></span>
<input oninput="check(this)" placeholder="do the math"/>
<input type="submit" id="submit" style="display: none"/>

<script>
  var first=Math.floor(Math.random()*10);
  var second=Math.floor(Math.random()*10);
  var gid = document.getElementById.bind(document);
  gid("first").innerHTML = first;
  gid("second").innerHTML = second;
  function check(input) {
    gid("submit").style.display = input.value==first+second ? "inline" : "none";
  }
</script>