Prevent Javascript form use back data on Back click - php

Question

I create table using ajax. When i click on button it will read the row and create a form using ajax.
Everything is fine here. But when i click back button on browser, the data is somehow posted/display back as FORM. How to delete/prevent this when click on back.
Thing i have read:
1) Clear input for form. But where is reading input because form is created using function submitRowAsForm when button is clicked
2) Disable autocomplete. But this doesnt seem relevant and not work.
$(document).ready(function update(){
$.ajax({
url: 'getSchedule.php',
success: function(data,status)
{
createTableByForLoop(data);
},
async: true,
dataType: 'json'
}).then(function() { // on completion, restart
setTimeout(update, 30000); // function refers to itself
});;
});
function createTableByForLoop(data)
{
var table = "\
<div class='table-scrollable'>\
<table class=\"table table-responsive\">\
<thead >\
<tr>\
<th class=\"d-none\">ID</th>\
<th class=d-none>SHOWSCHEDULE_ID ID</th>\
<th>TITLE</th>\
<th>TIME</th>\
<th>ACTION</th>\
</tr>\
</thead>\
<tbody>"
for(var i=0; i<data.length;i++)
{
table += "<tr id=\""+i+"\">";
table += "<td class=d-none><input type=text class=\"form-control transparent-input\" name=SHOWSCHEDULE_ID value=\""+data[i]['SHOWSCHEDULE_ID']+"\" readonly></td>";
table += "<td><input type=text class=\"form-control transparent-input\" name=SHOWSCHEDULE_SHOWTITLE value=\""+data[i]['SHOWSCHEDULE_SHOWTITLE']+"\" readonly></td>";
table += "<td><input type=text class=\"form-control transparent-input\" name=SHOWBEGINTIME value=\""+data[i]['SHOWBEGINTIME']+"\" readonly> - <input type=text class=\"form-control transparent-input\" name=\""+data[i]['SHOWENDTIME']+"\" value=\""+data[i]['SHOWENDTIME']+"\" readonly></td>";
table += "<td><button onclick=submitRowAsForm("+i+") id=btnRoom class=\"btn btn-outline-success\" >Room</button>\
<button onclick=submitRowAsForm("+i+") id=btnBook class=\"btn btn-outline-warning\" >Book</button></td>";
table += "</tr>";
}
table +="</tbody></table></div>";
$('#idShowSchedule').html(table);
}
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='OrderTicket.php';
$("#"+id).children().each(function() {
$(this).children().each(function(){
$(this).clone().appendTo(form);
});
});
document.body.appendChild(form);
form.submit();
}

Answer 1

To protect against the back button I would set a dirty flag on your page. That way when it's set you know you have done this before. So
Check to see if your dirty flag is set
If not set your dirty flag
Load data because this is a fresh loading of the page.
Make sure that you do this after the DOM Content has Loaded otherwise this will fail in some browsers.
Here is an example of how I didn't this in one of my old projects
document.addEventListener("DOMContentLoaded", function (event) {
var dirty = 0;
var dirtyEl = document.getElementById('page_is_dirty')
if (!dirty && dirtyEl && (dirtyEl.value != "0" && dirtyEl.value != "")) {
dirty = 1;
}
else if (dirtyEl) {
dirtyEl.value = '1';
}
var el = document.getElementById('ClickApp');
if (el && !dirty)
el.innerHTML = "<div id='ClickApp' ng-view='' click-main><br /><br /><center><h2>Loading Calendar</h2><br /><span id='ErrorInstructions'></span><br /><div class='ui-progress-bar ui-container' id='progress_bar' style='width: 350px'><div id='progressBar' class='ui-progress' style='width: 0%; float: left'></div></div><br /><br /><small><span id='LastError'></span></small></center></div>";
else {
var dirtyMEl = document.getElementById('page_is_dirty_message');
var dirtyMSG = dirtyMEl ? dirtyMEl.value : "You arrived here by hitting the back button. Please start over.";
el.innerHTML = "<div><br /><br /><center><h2>" + dirtyMSG + "</h2><br /><span id='ErrorInstructions'></span><br /><div class='ui-progress-bar ui-container' id='progress_bar' style='width: 350px'><div id='progressBar' class='ui-progress' style='width: 0%; float: left'></div></div><br /><br /><small><span id='LastError'></span></small></center></div>";
}
if (!dirty) {
//Do your data loading. Page transformaions, whatever
...
}});