CODEWITHSUNDEEP
javascriptjqueryhtml
Conor606
Conor606

Reputation: 107

jQuery .hide() method not hiding div

I tried looking around on this site but none of the previous answers have worked in helping with this. I have a div that holds a header and form.

Basically I want once the form is submitted to hide everything that's in the div, so I've been trying to hide the div. But unfortunately nothing I do is getting this work. Here is my code: 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#shirtForm").submit(function(e){
      $("#question").hide();
    });
  });
</script>
</head>
<body>
  <div id="question">
      <h3>What colour shirt was Eamon wearing today?</h3>
      <form id="shirtForm" onsubmit="shirtValidator()">
        <input type="radio" name="shirtColour" id="redShirt"> Red <br>
        <input type="radio" name="shirtColour" id="blueShirt"> Blue <br>
        <input type="radio" name="shirtColour" id="yellowShirt"> Yellow <br>
        <input type="radio" name="shirtColour" id="noShirt"> He isn't wearing a shirt <br>
        <input type="submit" value="Enter" onclick="shirtValidator()">
      </form>
  </div>

</body>
</html>

Thanks in advance for any help at all.

Upvotes: 2

Views: 1892

Answers (3)

Miguel Ortiz
Miguel Ortiz

Reputation: 1482

The problem isn't your code, it is working, but things are happening too fast for you to notice them.

The hide() function is working, the thing is that probably your DOM is reloading after submitting the form and hide() happens so fast that the effect is only visible for an instant.

Try with this:

<script>
$(document).ready(function(){
    $("#shirtForm").submit(function(e){
      e.preventDefault()
      $("#question").hide();
      return false;
    });
  });
</script>

It worked for me.

I've found a cool example of using hide here.

Upvotes: 4

SilverSurfer
SilverSurfer

Reputation: 4368

$(document).ready(function(){
    $("#shirtForm").submit(function(e){
      e.preventDefault()
      $("#question").hide();
    });
  });
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div id="question">
      <h3>What colour shirt was Eamon wearing today?</h3>
      <form id="shirtForm">
        <input type="radio" name="shirtColour" id="redShirt"> Red <br>
        <input type="radio" name="shirtColour" id="blueShirt"> Blue <br>
        <input type="radio" name="shirtColour" id="yellowShirt"> Yellow <br>
        <input type="radio" name="shirtColour" id="noShirt"> He isn't wearing a shirt <br>
        <input type="submit" value="Enter">
      </form>
  </div>

</body>
</html>

Upvotes: 1

Mart&#237;n
Mart&#237;n

Reputation: 3125

In your code just add e.preventDefault():

$(document).ready(function(){
    $("#shirtForm").submit(function(e){
      e.preventDefault();
      $("#question").hide();
    });
});

The e.preventDefault() method stops the default action of an element from happening.

For example:

  • Prevent a submit button from submitting a form
  • Prevent a link from following the URL

Upvotes: 2

Related Questions