隐藏元素并在提交表单时显示另一个元素
[英]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.