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>

Answer 2

您正在每次加载页面时生成新的随机数。因此，当用户进行数学运算并提交表单时，会发生新的请求，并且您的随机数会生成新的，因此计算无法匹配（随机可能是相同的结果）。

您必须将会议中的数学结果或隐藏的输入字段（编码或其他内容）存储在提交表单后您知道结果。

或者您想在JavaScript中查看结果以显示按钮，但我不会在客户端上进行人性化检查。

Answer 3

您需要在表单中添加一些JavaScript才能实现这一目标。在输入上添加按键事件并检查条目是否有效。

<input id="antispam" name="human" onkeyup="checkEntry" placeholder = "Do the math">'; 
?>

<script>
function checkEntry()
{
var x=document.getElementById("antispam");
if (x=={correct answare})
  {
    [add submite button]
  }
else
{
   [add incorrect text]
}
</script>

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

3 个答案: