JAVASCRIPT/PHP How to show a hidden div on page reload?

uwrp 15 hours ago.

I'm creating a registration form and I'm having some issues.
After you submit the form, you get either a success message or the errors will be displayed per field.

Users are required to fill in security questions on registration to secure their account for additional steps on password recovery. For this password recovery, users can select premade questions or add a custom question.

When a custom question is selected, the html value is /other/:
<select class="form-control <?php echo $xclass; ?>" onchange="QuestionCheck1(this);" name="Q1">
-snip-
<option value="def3">What was the name of your first pet?</option>
        <option value="other">Custom security question</option>

Now when this option is selected, another field pops up using this javascript function:
  function QuestionCheck1(that) {
    if (that.value == "other") {
        document.getElementById("ifYes").style.display = "block";
    } else {
        document.getElementById("ifYes").style.display = "none";
    }
    $(that).removeClass('form-control is-invalid');
    $(that).addClass('form-control');
  }

This is working correctly, however. After the form is submitted, I want it to automatically show the hidden field inside the ifyes div. But this is not working..

This is the code I'm using i'm using to attempt to re-show it on page reload:
document.addEventListener("DOMContentLoaded", function(event) { 
    if(window.location.hash == "#reload"){
      var xv = <?php echo(json_encode($Q1_Is_custom)); ?>;
      if(xv) document.getElementById("ifYes").style.display = "block";
    }
  });

And finally this is the div:
  <div id="ifYes" style="display: none;">
    <div class="input-group mb-3">
      <input type="text" class="form-control <?php echo $xclass; ?>" placeholder="Custom security question" name="SEC1Q" onchange="DefaultCheck(this);" <?php if($_SERVER["REQUEST_METHOD"] == "POST") echo 'value="'.$SEC1Q.'"'; ?>>
      <div class="input-group-append">
        <div class="input-group-text">
          <span class="fas fa-lock"></span>
        </div>
      </div>
    </div>
  </div>

It's not working sadly, it just doesn't show the field. Any one has an idea on how to get it working or maybe some one could point out my errors? I'm quite new to javascript but I am an experienced php developer.

Author: admin

Leave a Reply

Your email address will not be published.