我有一个页面，我必须填写学生的详细信息，例如姓名、电子邮件和部门。一旦我填写了详细信息并单击submit my button，它就会进入下一页，并在下一页中显示输入的学生详细信息。
在这里，我已经一步一步地展示了代码。
输入详细信息并单击提交按钮后的以下代码。
<div class="top-space-20">
<input class="btn btn-info" type="button" onclick="submitEvent()" class="btn" value="submit my details">
</div>
这是用于单击"提交我的详细信息"按钮的脚本代码。
function submitEvent() {
form = document.createElement("form");
form.method = "POST";
form.action = "/confirmation";
}
单击按钮后，它将转到后端并获取一些详细信息，然后显示confirmation.html页面。
@app.route("/confirm",methods=['GET','POST'])
def confirm():
"Confirming the event message"
response_value = request.args['value']
return render_template("confirmation.html", value=json.loads(response_value))
@app.route("/confirmation", methods=['GET', 'POST'])
def ssubmit_and_confirm():
"submit an event and display confirmation"
if request.method == 'POST':
return redirect(url_for('confirm', value=value))
下面的代码是confirmation.html页面
<body style="background-color:powderblue;">
<div class="panel panel-default" style="max-width:1000px;max-height: 800px;margin-left:auto;margin-right:auto;">
<div class="panel-heading " style="text-align: center;">submit student details</div>
<div class="panel-body" id="resultDiv">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<label class="col-md-8" for="Date:">Date:
{{ value }}</br> Time :{{value}}</label>
<label class="col-md-8" for="dateApplied"></label>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<label class="col-md-8" for="student email:">
student email id:{{value}}</label>
</div>
</div>
</div>
</div>
</body>
因此，这里的问题是，一旦我来到confirmation.html，如果我单击浏览器返回按钮，它就会转到表单，并允许我添加相同的详细信息。
为了避免这种情况，我尝试将这些行包含在confirmation.html中
</div>
<div><input type="hidden" id="reloadPage" /></div>
<script type="text/javascript">
$(document).ready(function() {
function reloadPage(){
location.reload(true); ; // RELOAD PAGE ON BUTTON CLICK EVENT.
// SET AUTOMATIC PAGE RELOAD TIME TO 5000 MILISECONDS (5 SECONDS).
var timerId = setInterval('refreshPage()', 5000);
}
});
function refreshPage() { clearInterval(timerId); location.reload(); }
</script>
但它不起作用。我又尝试了一个链接中给出的方法如何在点击返回按钮后停止重新提交表格
这也不起作用。
所以我需要的是，如果我点击浏览器中的后退按钮，我应该只显示确认页面，或者它应该告诉我这不是授权页面。
步骤1：在表单提交页面上，最初将表单提交值设置为false。
sessionStorage.setItem('form-submit', false)
第2步：在上一页提交表格时，请检查：
function submitEvent() {
formSubmitted = sessionStorage.getItem('form-submit')
if (!formSubmitted){
// Write your code here
}
}
步骤3：在confirmation.html页面上，您可以在sessionStorage中存储提交值。
sessionStorage.setItem('form-submit', true)
您可以添加HTML5历史api。使用以下代码。
name = document.title
history.pushState(null,name,name)//add this code in your configuration.html file in document ready block
$(window).on("popstate",()=>{
//....Do whatever you want
/*If you want to display unauthorized page then
$(document).html("Unauthorized page")
*/
})
存储表单数据，并在表单数据发送到服务器之前重置表单。假设您使用$.ajax((提交表单.
function submitEvent() {
form = document.createElement("form");
form.method = "POST";
form.action = "/confirmation";
// Add id attribute to the form
form.id = "student_details_form";
// Collect form data
// reset your form just before calling $.ajax() or $.post()
document.getElementById('student_details_form').reset();
// call $.ajax() or $.post()
$.ajax({
url: form.action,
// snipps
};
}