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

时间:2017-02-22 12:14:49

标签: javascript php forms captcha

我在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>

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

1 个答案:

答案 0 :(得分:0)

我认为Cookie或本地存储不起作用。我的方法是将每个用户会话的样式信息存储在服务器端db上。尽管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 %}