在不同的表单提交上更改 div 两次答案

【问题标题】：Change divs twice on different form submissions在不同的表单提交上更改 div 两次
【发布时间】：2017-07-12 11:37:26
【问题描述】：

我在div1 中有一个带有单选按钮的表单，在div2 和另一个内容div3 中有一个要解决的验证码一旦该人检查了 div1 中的单选按钮并单击提交，div1 将替换为 div2 和当一个人在 div2 中完成验证码时，我希望将 div2 替换为 div3。但是，一旦我在 div2 上并完成验证码，在提交时，div1 再次显示，没有 div3 的迹象。有什么方法可以实现吗？

<?php
require_once("solvemedialib.php");
$privkey="My_Private_key";
$hashkey="My_Hash_key";
$solvemedia_response = solvemedia_check_answer($privkey,
                $_SERVER["REMOTE_ADDR"],
                $_POST["adcopy_challenge"],
                $_POST["adcopy_response"],
                $hashkey);
if (!$solvemedia_response->is_valid) {
$errCaptcha = '<div class="alert">Please enter the Captcha!</div><br />';
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#3").css('display', 'block');
$("div#2").replaceWith( $( "#3" ) );
});
</script>
<?php   
}
$genderErr = $gender = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["gender"])) {
$genderErr = "<div class='alert'>Please select a gender.</div>";
} else {
?>
<script type="text/javascript">
  $(document).ready(function(){
  $("#2").css('display', 'block');
  $("div#1").replaceWith( $( "#2" ) );
  });
</script>
<?php }}
?>
<div id="1">
<h1>Step 1: Choose your gender</h1>
  <div>
    <form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
    <input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
    <input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
    <input form="genderform" id="submit" name="submit" type="submit" value="Submit">
    <?php echo $genderErr;?>
    </form> 
  </div>
</div>

<div id="2" style="display:none">
<h1>Step 2: Enter captcha to verify you are not a bot!</h1>
<div align="center">
    <form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
    <?php echo solvemedia_get_html("My-C-Key"); //outputs the widget ?><br />
    <input id="submit" name="submit" type="submit" value="Submit">
    </form>
    <?php echo $errCaptcha;?>
</div>
</div>

<div id="3" style="display:none;"><h1>Step3</h1></div>

如果我在这里犯了一个愚蠢的错误，我很抱歉。我是编码新手。请帮帮我。

【问题讨论】：

谁能帮帮我？
我相信当您提交验证码时页面正在重新加载，因此 div1 再次显示。如果您想为输入提供自定义提交处理程序，您可以使用例如jQueryapi.jquery.com/submit。并且要阻止页面重新加载，请记住将 e.preventDefault() 放入您的提交处理程序中，就像它们在文档中一样。
@JuusoLappalainen 非常感谢。但是，我对此很陌生，如果问的不是太多，你能告诉我如何更详细地编辑它。将不胜感激。

标签： javascript php forms captcha

【解决方案1】：

试试这个.....

<?php
  require_once("solvemedialib.php");
  $privkey="My_Private_key";
  $hashkey="My_Hash_key";
  $solvemedia_response = solvemedia_check_answer($privkey,
                                                  $_SERVER["REMOTE_ADDR"],
                                                  $_POST["adcopy_challenge"],
                                                  $_POST["adcopy_response"],
                                                  $hashkey);
  if (!$solvemedia_response->is_valid) {
    $errCaptcha = '<div class="alert">Please enter the Captcha!</div><br />';
  } else {
    ?>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#3").css('display', 'block');
        $("#1").css('display', 'none');
        $("div#2").css('display', 'none');
      });
    </script>
    <?php
  }

  $genderErr = $gender = "";
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["gender"])) {
      $genderErr = "<div class='alert'>Please select a gender.</div>";
    } else {
      ?>
      <script type="text/javascript">
        $(document).ready(function(){
          $("#2").css('display', 'block');
          $("#3").css('display', 'none');
          $("div#1").css('display', 'none');
        });
      </script>
      <?php 
    }
  }
?>

<div id="1">
  <h1>Step 1: Choose your gender</h1>
    <div>
      <form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
        <input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
        <input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
        <input form="genderform" id="submit" name="submit" type="submit" value="Submit">
        <?php echo $genderErr;?>
      </form> 
    </div>
</div>

<div id="2" style="display:none">
  <h1>Step 2: Enter captcha to verify you are not a bot!</h1>
  <div align="center">
    <form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
      <?php echo solvemedia_get_html("My-C-Key"); //outputs the widget ?><br />
      <input id="submit" name="submit" type="submit" value="Submit">
    </form>
    <?php echo $errCaptcha;?>
  </div>
</div>

<div id="3" style="display:none;"><h1>Step3</h1></div>

编辑试试这个

<?php
  require_once("solvemedialib.php");
  $privkey="My_Private_key";
  $hashkey="My_Hash_key";
  $solvemedia_response = solvemedia_check_answer($privkey,
                                                  $_SERVER["REMOTE_ADDR"],
                                                  $_POST["adcopy_challenge"],
                                                  $_POST["adcopy_response"],
                                                  $hashkey);
  if (!$solvemedia_response->is_valid) {
    $errCaptcha = '<div class="alert">Please enter the Captcha!</div><br />';
  } else {
    ?>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#3").css('display', 'block');
        $("div#2").replaceWith( $( "#3" ) );
      });
    </script>
    <?php
  }

  $genderErr = $gender = "";
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["gender"])) {
      $genderErr = "<div class='alert'>Please select a gender.</div>";
    } else {
      ?>
      <script type="text/javascript">
        $(document).ready(function(){
          $("#2").css('display', 'block');
          $("div#1").replaceWith( $( "#2" ) );
        });
      </script>
      <?php 
    }
  }
?>
<?php  if (!$solvemedia_response->is_valid && !isset($_POST["gender"])) { ?>
<div id="1">
  <h1>Step 1: Choose your gender</h1>
    <div>
      <form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
        <input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
        <input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
        <input form="genderform" id="submit" name="submit" type="submit" value="Submit">
        <?php echo $genderErr;?>
      </form> 
    </div>
</div>
<?php } ?>

<?php  if (!$solvemedia_response->is_valid  && isset($_POST["gender"])) { ?>
<div id="2" style="display:none">
  <h1>Step 2: Enter captcha to verify you are not a bot!</h1>
  <div align="center">
    <form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
      <?php echo solvemedia_get_html("My-C-Key"); //outputs the widget ?><br />
      <input id="submit" name="submit" type="submit" value="Submit">
    </form>
    <?php echo $errCaptcha;?>
  </div>
</div>
<?php } ?>
<?php  if ($solvemedia_response->is_valid  && !isset($_POST["gender"])) { ?>
<div id="3" style="display:none;"><h1>Step3</h1></div>
<?php } ?>

【讨论】：

感谢您的宝贵时间，但这也没有用。它仍然不断恢复到 div1
是的。完成验证码后，它仍然不断向我显示 div1

【解决方案2】：

我认为 cookie 或本地存储不会起作用。我的方法是将每个用户会话的样式信息存储在服务器端数据库中。尽管 node.js 可以很好地与客户端 javascript 配合使用，但我对 Python Django 的熟悉建议了以下可能的解决方案。

enter code here

{% block body %}
    {% if user.is_authenticated %}
        <div id="container">User: {{ user.get_username }}
        # conditional python code to render the div styles according to 
        # user preferances
        </div>
    {% endif %}
{% endblock %}

【讨论】：