Change divs twice on different form submissions

问题:

I have a form with radio buttons in div1 and a captcha code to be solved in div2 and another content div3 Once the person checks a radio button in div1 and clicks submit, div1 is replaced by div2 and when a person completes the captcha in div2, I want div2 to be replaced by div3. But, once I am on div2 and complete the captcha, on submit, div1 is shown again with no signs of div3. Any way to achieve that?

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

I am sorry if I am doing a silly mistake here. I am new to coding. Please help me out.

回答1:

try this .....

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

EDIT Try this

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