I want to change the whole content of the webpage based on uploading file.
Dynamically alter the webpage and display in that page and we have inputs for that new page.
While uploading the new page we need to convert the inputs into json file later.
Is it possible to change entire content of the webpage by adding the file?
I tried it but it comes like append the new content in the web page.
I want remove the old content based on the file. We dynamically create the new webpage with tree structure.
My code:
function openForm(formId) {
var forms = document.getElementsByClassName('form-container');
for (var i = 0; i < forms.length; i++) {
forms[i].style.display = 'none';
}
document.getElementById(formId).style.display = 'block';
}
document.addEventListener("DOMContentLoaded", function() {
const parentNodes = document.querySelectorAll('.parent-node');
parentNodes.forEach(parentNode => {
parentNode.addEventListener('click', function() {
const childMenu = this.querySelector('.child-menu');
if (childMenu) {
childMenu.style.display = childMenu.style.display === 'none' ? 'block' : 'none';
}
});
});
const childNodes = document.querySelectorAll('.child-node');
childNodes.forEach(childNode => {
childNode.addEventListener('click', function(event) {
event.stopPropagation(); // Prevent the click event from bubbling up to the parent nodes
const subchildMenu = this.querySelector('.subchild-menu');
if (subchildMenu) {
subchildMenu.style.display = subchildMenu.style.display === 'none' ? 'block' : 'none';
}
});
});
});body {
font-family: Arial, sans-serif;
display: flex;
}
.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #333;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar-menu,
.child-menu,
.subchild-menu{
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-menu > .parent-node{
cursor:pointer;
padding:10px;
margin-bottom: 5px;
}
.child-node,
.subchild-node{
cursor: pointer;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.child-menu,
.subchild-menu{
display: none;
}
.sidebar a, .tree span {
padding: 10px 15px;
text-decoration: none;
font-size: 18px;
color: #f2f2f2;
display: block;
}
.sidebar a:hover, .tree span:hover {
background-color: #575757;
color: white;
}
.main-content {
margin-left: 250px;
padding: 20px;
width: 100%;
}
.tree ul {
list-style-type: none;
padding-left: 20px;
}
.tree li {
padding: 8px;
cursor: pointer;
}
.form-container {
display: none;
padding: 20px;
border: 1px solid #ccc;
margin-top: 20px;
}
.form-container.active {
display: block;
} <h2>Demo Webpage</h2>
<div class="sidebar">
<div class="tree">
<ul class="sidebar-menu">
<li class="parent-node">
<button onclick="openForm('vehicleForm')">Vehicle</button>
<ul class="child-menu">
<li class="child-node">
<button onclick="openForm('Type1Form')">Type1</button>
<ul class="subchild-menu">
<li class="subchild-node">
<span onclick="openForm('Motor1Form')">Motor1</span>
</li>
<li class="subchild-node">
<span onclick="openForm('Motor2Form')">Motor2</span>
</li>
</ul>
</li>
<li class="child-node">
<button onclick="openForm('Type2Form')">Type2</button>
<ul class="subchild-menu">
<li class="subchild-node">
<span onclick="openForm('Motor1Form')">Motor1</span>
</li>
<li class="subchild-node">
<span onclick="openForm('Motor2Form')">Motor2</span>
</li>
<li class="subchild-node">
<span onclick="openForm('Motor3Form')">Motor3</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<input type="file">Change the content
</div>
<div class="main-content">
<h2>Input Form</h2>
<div id="vehicleForm" class="form-container">
<h3>Vehicle</h3>
<label for="Vehiclename">Vehicle Name:</label>
<input type="text" id="Vehiclename" name="Vehiclename"><br><br>
<input type="submit" value="Submit">
</div>
<div id="Type1Form" class="form-container">
<h3>Type1</h3>
<label for="Type1Name">Type1 Name:</label>
<input type="text" id="Type1Name" name="Type1Name"><br><br>
<input type="submit" value="Submit">
</div>
<div id="Motor1Form" class="form-container">
<h3>Motor1</h3>
<label for="Motor1Name">Motor1 Name:</label>
<input type="text" id="Motor1Name" name="Motor1Name"><br><br>
<input type="submit" value="Submit">
</div>
<div id="Type2Form" class="form-container">
<h3>Type2</h3>
<label for="Type2Name">Type2 Name:</label>
<input type="text" id="Type2Name" name="Type2Name"><br><br>
<input type="submit" value="Submit">
</div>
<div id="Motor2Form" class="form-container">
<h3>Motor2</h3>
<label for="Motor2Name">Motor2 Name:</label>
<input type="text" id="Motor2Name" name="Motor2Name"><br><br>
<input type="submit" value="Submit">
</div>
<div id="Motor3Form" class="form-container">
<h3>Motor3</h3>
<label for="Motor3Name">Motor3 Name:</label>
<input type="text" id="Motor3Name" name="Motor3Name"><br><br>
<input type="submit" value="Submit">
</div>
</div>
New contributor
Sanjay A is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3