Javascript hide form

Question

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>

Does this answer your question? [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) — Ivar, Jun 27 '20 at 22:15
Your `onclick` is on a submit button. If you hit a submit button within a form, it will submit the form, reloading the page. — Ivar, Jun 27 '20 at 22:16
put the form in a div and hide the div. your x's are a collection, you can't hide like that - iterate over them - but that's not what you want anyways... — iAmOren, Jun 27 '20 at 22:29

score 1 · Answer 1 · answered Jun 27 '20 at 22:22

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>

score 1 · Accepted Answer · answered Jun 27 '20 at 22:28

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/

score 1 · Answer 3 · answered Jun 27 '20 at 22:29

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

Javascript hide form

3 Answers3