隱藏元素並在提交表單時顯示另一個元素
[英]Hide an element and show another element on submit a form
問題描述
在網頁中，我想在提交時隱藏表單（通過單擊或按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")
2 個解決方案
解決方案1
1 2019-09-08 21:13:51
我可能會完全不在這里，因為我不完全了解您的問題，但是您似乎正在嘗試提交此表單，然后顯示不帶該表單的結果部分。 我猜您的Go服務器正在以某種形式根據表單值准備這些結果。
如果真是這樣，那就是您提交了表單，您的JavaScript隱藏了該表單並顯示了空的結果部分，然后您的服務器准備了結果，然后再次顯示了該表單。 但是，這一次，它是一個全新的頁面，並且不了解在提交表單之前執行的Javascript。 這是一個全新的頁面，因此將顯示空白表格，而不顯示結果部分。
如果我理解的是正確的，那么您應該做的是更改模板，以使其知道它正在顯示結果，因此它將構建不display: none的結果部分display: none 。
解決方案2
1 2019-09-08 23:56:26
聽起來您應該使用ajax調用發送請求而不是表單提交，並根據響應顯示結果show / hide。
顯示或隱藏表單元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.