Is there a way to maintain the form displayed on a webpage created in HTML5 and JavaScript for logging calls across three different departments? With buttons assigned to each department, clicking on them reveals the respective HTML form. That said, every time a form is submitted, the page reverts back to the blank default. How can I ensure that the last used department's form remains visible upon submission?
For instance, if a user is using Department 1's form and submits it, the page should reload Department 1's form accordingly. The same logic applies to Department 2 and Department 3 as well.
The current issue requires users to reclick their department to reload the form. Attempts to use triggers like onsubmit or onclick have proven unsuccessful so far.
Below is the provided code:
HTML
<div class="department">
<input type="button" class="DeptTitle" value="Department 1" onClick="return changeDept1()" />
<input type="button" class="DeptTitle" value="Department 2" onClick="return changeDept2()" />
<input type="button" class="DeptTitle" value="Department3" onClick="return changeDept3()" />
</div>
<div class="body" id="default"></div>
<div class="body" id="Dept1"><form id="calllog" action="" method="post"><input type="Submit" value="Submit" /></form></div>
<div class="body" id="Dept2"><form id="calllog" action="" method="post"><input type="Submit" value="Submit" /></form></div>
<div class="body" id="Dept3"><form id="calllog" action="" method="post"><input type="Submit" value="Submit" /></form></div>
CSS used to hide and show the departments:
/* Different Departments, hides all but default */
#default {display: block;}
#Dept1 {display: none;}
#Dept2 {display: none;}
#Dept3 {display: none;}
Finally, the JavaScript code facilitating switching between forms:
function changeDept1() {
document.getElementById('default').style.display = "none"; // hide default div tag
document.getElementById('Dept1').style.display = "block"; // show Dept1 Form div tag
document.getElementById('Dept2').style.display = "none"; // hide Dept2 Form div tag
document.getElementById('Dept3').style.display = "none"; // hide Dept3 div tag
}
function changeDept2() {
document.getElementById('default').style.display = "none"; // hide default div tag
document.getElementById('Dept1').style.display = "none"; // hide Dept1 Form div tag
document.getElementById('Dept2').style.display = "block"; // show Dept2 Form div tag
document.getElementById('Dept3').style.display = "none"; // hide Dept3 div tag
}
function changeDept3() {
document.getElementById('default').style.display = "none"; // hide default div tag
document.getElementById('Dept1').style.display = "none"; // hide Dept1 Form div tag
document.getElementById('Dept2').style.display = "none"; // hide Dept2 Form div tag
document.getElementById('Dept3').style.display = "block"; // show Dept3 div tag
}
While the above functions switch forms successfully, maintaining the display post-submission proves challenging. Additional attempts with onsubmit triggers did not resolve this issue effectively.
function showDept1 () {
document.getElementById('Dept1').style.display = "block"; // show Dept1 Form div tag
}
A separate concern involves resetting the form whenever switching departments. If a user fills out one form, then shifts to another department and back, the initial form retains previous input. Is there a relationship between these two issues?
Thank you in advance for your assistance!