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

我有一个表单，在

div1

中有单选按钮，在

div2

中有一个要解决的验证码，还有另一个内容

div3

当用户检查div1中的单选按钮并单击submit时，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>

$（文档）.ready（函数（）{
$（“#3”）.css（'display'，'block'）；
$（“第2分部”）。替换为（$（“第3分部”）；
});
试试这个

<?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>


$（文档）.ready（函数（）{
$（“#3”）.css（'display'，'block'）；
$（“#1”）.css（'display'，'none'）；
$（“div#2”）.css（'display'，'none'）；
});
我认为曲奇饼或本地存储不起作用。我的方法是将每个用户会话的样式信息存储在服务器端数据库中。尽管node.js可以很好地与客户机的javascript交互，但我对node.js的熟悉程度表明了以下可能的解决方案

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 %} 

在此处输入代码
{%block body%}
{%if user.u经过身份验证%}
用户：{{User.get_username}
#用于根据渲染div样式的条件python代码
#用户偏好
{%endif%}
{%endblock%}
有人能帮我吗？我相信当你提交验证码时，页面正在重新加载，因此div1再次显示。如果您想为输入提供一个自定义提交处理程序，您可以使用jQuery这样做。为了防止页面被重新加载，请记住在提交处理程序中放入e.preventDefault（），就像在文档中一样。@JuusoLappalainen非常感谢。但是，我是新来的，如果这不是太多的要求，你能告诉我如何编辑它更详细一点。非常感谢。谢谢你的时间，但那也没用。它仍然会一直恢复为div1Yes。在完成验证码后，它仍然不断向我显示div1
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 %}