I am storing pages as divs as the following
<div id="page-1" class="page db">
<!-- Page Contents -->
<button id="get-page2">Go To Page 2</button>
</div>
<div id='page-2' class="page dn">
<!-- Page Contents -->
<button id="back-page-1">Back Page One</button>
</div>
I give the div an id to define the page name and the class .page to tell JavaScript that this is a page div to switch between them later, and the class db stands for display block, the class dn stands for display none, my JavaScript code has a function (getPage(pageId)) that switches between pages, in case needed:
function getPage(pageId) {
let pages = $('.page'); // get all pages
for (i = 0; i < pages.length; i++) {
let currentClass = $(`#${pages[i].id}`) // get current class id
if (currentClass.attr('id') == pageId) {
currentClass.attr('class', 'page db'); // if the div id matches the argument pageId it will switch the class dn with db to show the div
}
else {
currentClass.attr('class', 'page dn'); // otherwise it will hide it because it is not the needed page
}
}
}
dn and db in CSS file:
.db {display: block;}
.dn {display: none;}
Anyway I had this HTML code which is about a report page with a form
<div id="report" class="page dn">
<div class="center top-margin">
<form method="POST" data-netlify="true" name="report">
<textarea placeholder="describe your problem here" name="problem"></textarea><br>
<button type="submit" class="textarea-width">Submit</button>
<button class="back-home textarea-width">Back</button>
</form>
</div>
</div>
and my problem is that when I click the back button it is directing me to a page that says
This page isn’t working
If the problem continues, contact the site owner.
HTTP ERROR 405
Even if I did not submit the form, it shows me that
NOTE: I put data-netlify="true" because it is a website that allows me to get submitted forms, I add this to receive the form there later, I tried to host the website there, and the form is also being submitted but without the error code 405, where is the problem why is it being submitted on clicking back? if there is no way to fix this please recommend me any other solutions.
EDIT: I have tried to put the back button out of the form and put it in the div that is within the classes center and margin-top but the same thing is happening