Elements not hiding when other element's style display:none is removed upon form submission

Question

I'm trying to hide an element once element has 'style="display:none"' removed.

My jQuery:

jQuery(document).ready(function(){

  if (jQuery(".progressally-quiz-result-container").is(':visible')) {

    jQuery(".progressally-quiz").css("display", "none");

  } else {

    jQuery(".progressally-quiz").css("display", "block");

  }

});

I've also tried this, and it still fails:

jQuery(document).ready(function(){

    if (jQuery(".progressally-quiz-result-container").is(":visible")) {

      jQuery(".progressally-quiz").hide();

    }

});

When a user subits on the final step 6 of the quiz), the .progressally-quiz element doesn't get hidden like I'm trying to make it do.

Site: https://learn.lolapickett.com/empath-quiz/

UPDATE

I am able to now hide the quiz section using the following:

jQuery(document).ready(function(){
    jQuery('.progressally-quiz-submit-button').click(function(){
        jQuery('.progressally-quiz').css("display", "none");
    });
    jQuery('.progressally-quiz-reset-button').click(function(){
        jQuery('.progressally-quiz').css("display", "block");
    });
});

Unfortunately, it still hides the form if a user doesn't select an image answer on step 6. Not sure how to only hide the form element if the form validates.

Thanks!

Possible duplicate of [How do I check if an element is hidden in jQuery?](https://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery) — Udhay Titus, Apr 25 '19 at 06:55
The problem is that you code will only run once and it is when the page is loaded, you need to make a function that listens for submit and the do the check `if :visible`. — Zorken17, Apr 25 '19 at 07:03
Not a duplicate question as I already know it's hidden... issue is that the conditional if doesn't then apply the visibility change. — Tigre222, Apr 25 '19 at 07:04
@Zorken17 I tried this and failed: jQuery( ".progressally-quiz" ).submit(function( event ) { if (jQuery(".progressally-quiz-result-container").is(":visible")) { jQuery(".progressally-quiz").hide(); } }); — Tigre222, Apr 25 '19 at 07:10

Zorken17 · Answer 1 · 2019-04-25T07:27:40.153

0

You need to check for a button click, and you can do it like this:

jQuery('.progressally-quiz-button').click(function() {
  if (jQuery('#progressally-quiz-current-page-1').val() === '6') {


    if (jQuery(".progressally-quiz-result-container").is(':visible')) {
      jQuery(".progressally-quiz").css("display", "none");
    } else {
      jQuery(".progressally-quiz").css("display", "block");
    }


  }
});

edited Apr 25 '19 at 07:27

answered Apr 25 '19 at 07:19

Zorken17

1,856
1
8
16

thanks, @Zorken17. I did drop that in, but it's still leaving the form element up and not applying the display:none. I then commented out the .val section and targeted the submit button class and still no luck. :/ – Tigre222 Apr 25 '19 at 07:33
Then you are probably missing something, because I tried it on the page you linked and I can get it to work. – Zorken17 Apr 25 '19 at 08:03
Thanks for the second try, @Zorken17, I'll test it again. :) – Tigre222 Apr 25 '19 at 13:12
Still not working with what you've got here. Found another, simpler solution, but doesn't work if a user doesn't click an image on step 6 – Tigre222 Apr 25 '19 at 19:35

Elements not hiding when other element's style display:none is removed upon form submission

UPDATE

1 Answers1