In a web page, I would like to hide the form on submit (either by clicking or pressing enter) and shows the results. It does not work when the Go web server is run.

When I check the HTML file (without running the Go file), it works. But, when I run the Go code, it shows it quickly and goes to the initial state.

The HTML (Bootstrap) code is here:

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="" />
    <meta name="google" value="notranslate">

    <title>TEST</title>
    <!-- favicon -->
    <link rel="icon" type="image/png" href="../static/images/favicon.png">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="../static/css/style.css" />

    <!-- scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <style>
        body {
            background-color: #2f3b5a
        }

        .table thead th,
        .table td,
        .table th {
            border: 0px;
            text-align: center;
            background-color: #c83660;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <!-- background particles -->
    <canvas class="background" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;"></canvas>

    <div class="d-flex align-items-center flex-column justify-content-center text-white" style="width:100%;">
        <h1 class="display-4">TOOL</h1>

        <div class="container">
            <div class="row">
                <div class="col">
                </div>
                <div class="col-6">
                    <form class="forms">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <select class="selectpicker forms" name="query">
                                    <option selected>Query Type</option>
                                    <option value="any">Any</option>
                                    <option value="aaaa">A Record</option>
                                </select>
                            </div>
                            <input type="text" class="form-control forms" name="host" placeholder="Type here...">
                            <div class="input-group-append">
                                <button type="button forms" class="btn"><i class="fas fa-search"
                                        aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </form>
                    <div id="result" style="display:none;">
                        <table class="table table-borderless">
                            <thead>
                                <tr>
                                    <th scope="col">Record</th>
                                    <th scope="col">Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>A</td>
                                    {{range .Arecord}}
                                    <td>{{.}}</td>
                                    {{end}}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col">
                </div>
            </div>
        </div>
    </div>

    <!--scripts loaded here-->
    <script src="https://kit.fontawesome.com/80c543b9b1.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js"></script>

    <script>
        window.onload = function () {
            Particles.init({
                selector: '.background',
                // red, blue, yellow
                color: ['#f76262', '#216583', '#f6d365'],
                maxParticles: 130,
                connectParticles: true,
                responsive: [
                    {
                        breakpoint: 768,
                        options: {
                            maxParticles: 80
                        }
                    }, {
                        breakpoint: 375,
                        options: {
                            maxParticles: 50
                        }
                    }
                ]
            });
        };

        $("form").on("submit", function (e) {
            //e.preventDefault();
            $("form").remove();
            $("#result").show("slow");
        });
    </script>

</body>
</html>

```

I expect removing the form on submit and shows the results table but as long as I run the code in Go, it just restarts the page (quickly shows the results but) the form value is empty.

```
url := r.FormValue("host")

```