首页 > Golang > Go问答

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

来源：stackoverflow

时间：2024-03-15 12:54:28 458浏览收藏

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">
                                &lt;select class=&quot;selectpicker forms&quot; name=&quot;query&quot;&gt;
                                    <option selected>query type</option>
                                    <option value="any">any</option>
                                    <option value="aaaa">a record</option>
                                &lt;/select&gt;
                            </div>
                            &lt;input type=&quot;text&quot; class=&quot;form-control forms&quot; name=&quot;host&quot; placeholder=&quot;type here...&quot;&gt;
                            <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")

解决方案

我可能完全不在这儿，因为我认为我不完全理解你的问题，但是看起来你正在尝试提交此表单，然后在没有表单的情况下显示结果部分。我猜你的 Go 服务器正在以某种方式根据表单值准备这些结果。

如果情况确实如此，那么发生的情况是您提交表单，您的 JavaScript 隐藏表单并显示空结果部分，然后您的服务器准备结果，然后您再次显示表单。但这一次，它是一个全新的页面，并且它不知道表单提交之前执行的 JavaScript。这是一个全新的页面，因此它将显示空表单，而不是结果部分。

如果我的理解是正确的，那么您应该做的是更改模板，以便它知道它正在显示结果，因此它会构建没有 display: none 的结果部分。

终于介绍完啦！小伙伴们，这篇关于《在提交表单时切换元素的显示状态》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布Golang相关知识，快来关注吧！

声明：本文转载于：stackoverflow 如有侵犯，请联系study_golang@163.com删除