CODEWITHSUNDEEP
javascript
CPhillips
CPhillips

Reputation: 59

Javascript hide form

I'm trying to hide a form after some input has been given, but when I use the .style.display = "none"; command, all that happens is clear the boxes.

Here is the context that I have, the JS is at the bottom. Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form class = "input">
        <label for = "name" required>Please enter your name</label>
        <input type="text" id="name"><br><br>
        <label for = "age" required>Please enter your age</label>
        <input type="text" id="age"><br><br>
        <label for = "colour">Please select a colour: </label>
        <select id="colour" required>
            <option value="Yellow">Yellow</option>
            <option value="Blue">Blue</option>
            <option value="Red">Red</option>
            <option value="Green">Green</option>
        </select><br><br>
        <label for="">Select your difficulty:</label>
        <select id="difficulty">
            <option value = "1">1. Easy</option>
            <option value = "2">2. Medium</option>
            <option value = "3">3. Hard</option>
        </select>
        <br><br>
        <input type="submit" onclick="clearScreen()">
    </form>
    <script>
        function clearScreen() {
            var x = document.getElementsByID("input");
            x.style.display = none;
        }
    </script>
</body>
</html>

Upvotes: 1

Views: 176

Answers (3)

korzhyk
korzhyk

Reputation: 166

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id = "input">
        <label for = "name" required>Please enter your name</label>
        <input type="text" id="name"><br><br>
        <label for = "age" required>Please enter your age</label>
        <input type="text" id="age"><br><br>
        <label for = "colour">Please select a colour: </label>
        <select id="colour" required>
            <option value="Yellow">Yellow</option>
            <option value="Blue">Blue</option>
            <option value="Red">Red</option>
            <option value="Green">Green</option>
        </select><br><br>
        <label for="">Select your difficulty:</label>
        <select id="difficulty">
            <option value = "1">1. Easy</option>
            <option value = "2">2. Medium</option>
            <option value = "3">3. Hard</option>
        </select>
        <br><br>
        <input type="submit" onclick="clearScreen(event)">
    </form>
    <button onclick="toggleForm()">Toggle</button>
    <script>
        function clearScreen(e) {
            var x = document.getElementById("input");
            x.style.height = 0;
            x.style.overflow = 'hidden'
        }
        function toggleForm() {
            var x = document.getElementById("input");
            if (x.style.height) {
              x.style.height = '';
              x.style.overflow = '';
            } else {
              x.style.height = 0;
              x.style.overflow = 'hidden'
            }
        }
    </script>
</body>
</html>

Upvotes: 1

RobertFrenette
RobertFrenette

Reputation: 627

Try this:

HTML

  <form id="theForm">
        <!-- your form elements -->
        <input type="submit" />
  </form>

CSS

.hide {
  visibility: hidden;
}

JavaScript

var theForm = document.getElementById("theForm");
theForm.addEventListener('submit', function(e) {
  e.preventDefault();
  this.classList.add("hide");
});

See this Fiddle: https://jsfiddle.net/dxwLr581/

Upvotes: 1

symlink
symlink

Reputation: 12209

I made three simple changes here. I changed form class="input" to id="input", I added onsubmit="return false" to the form element for the purposes of testing, and I changed the function call in the first line of your function to getElementById()

function clearScreen() {
  var x = document.getElementById("input");
  x.style.display = "none";
}
<form id="input" onsubmit="return false">
  <label for="name" required>Please enter your name</label>
  <input type="text" id="name"><br><br>
  <label for="age" required>Please enter your age</label>
  <input type="text" id="age"><br><br>
  <label for="colour">Please select a colour: </label>
  <select id="colour" required>
    <option value="Yellow">Yellow</option>
    <option value="Blue">Blue</option>
    <option value="Red">Red</option>
    <option value="Green">Green</option>
  </select><br><br>
  <label for="">Select your difficulty:</label>
  <select id="difficulty">
    <option value="1">1. Easy</option>
    <option value="2">2. Medium</option>
    <option value="3">3. Hard</option>
  </select>
  <br><br>
  <input type="submit" onclick="clearScreen()">
</form>

Upvotes: 1

Related Questions