javascript - 隐藏一个元素并在提交表单时显示另一个元素

问题描述

在网页中，我想在提交时隐藏表单（通过单击或按 Enter）并显示结果。Go Web 服务器运行时它不起作用。

当我检查 HTML 文件（不运行 Go 文件）时，它可以工作。但是，当我运行 Go 代码时，它会快速显示并进入初始状态。

HTML（引导程序）代码在这里：

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

我希望在提交时删除表单并显示结果表，但只要我在 Go 中运行代码，它只会重新启动页面（快速显示结果但）表单值为空。

url := r.FormValue("host")

标签： javascriptjqueryajaxgo

javascript - 隐藏一个元素并在提交表单时显示另一个元素

问题描述

解决方案

推荐阅读