当前位置：首页 > 文章列表 > Golang > Go问答 > 在提交表单时切换元素的显示状态

在提交表单时切换元素的显示状态

来源：stackoverflow 2024-03-15 12:54:28 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《在提交表单时切换元素的显示状态》，聊聊，我们一起来看看吧！

问题内容

在网页中，我想在提交时隐藏表单（通过单击或按 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 中运行代码，它就会重新启动页面（快速显示结果，但）表单值为空。