By referring to Navbar that changes div contents all in one page I was trying to make user information page (with the help of xampp, mysql, html & php) using the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<style>
.header {
width:100%;
height:auto;
padding-bottom: 0px;
background-color: #ADD8E6;
overflow: hidden;
/*overflow: scroll;*/
text-overflow: ellipsis;;
}
#img1
{
float:left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 3px;
width:auto;
height:100px;
}
#img2
{
float:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 3px;
width:auto;
height:100px;
margin-left:5px;
}
#img3
{
position: absolute;
top: 6px;
right: 16px;
width:180px;
height:90px;
}
#header_text_1 {
padding-top: 10px;
padding-right: 200px;
text-align: center;
font-size:20px;
font-weight: bolder;
}
#header_text_2 {
padding-top: 2px;
padding-right: 200px;
font-size:20px;
text-align: center;
font-weight: bolder;
}
#header_text_3 {
padding-top: 2px;
padding-right: 200px;
font-size:20px;
text-align: center;
font-weight: bolder;
}
.header p { margin:0;
}
@media screen and (max-width: 750px) {
#img1 #img2 {
float: none;
display: block;
}
#img3 {
float: none;
}
#header_text_1 {
margin-top: 105px;
font-size: 2.8vw;
text-align: left;
margin-left: auto;
margin-right: auto;
}
#header_text_2 {
font-size: 2.8vw;
text-align: left;
}
#header_text_3 {
font-size: 2.8vw;
text-align: left;
}
}
.topnav {
overflow: hidden;
background-color: #ADD8E6;
padding-top: 5px;
}
.topnav a {
float: left;
display: block;
color: #000000;
font-weight: bolder;
text-align: center;
padding: 5px 16px;
text-decoration: none;
font-size: 17px;
}
/*.active {
background-color: #04AA6D;
color: white;
}*/
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
font-weight: bolder;
border: none;
outline: none;
color: black;
padding: 5px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 10px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: yellow;
color: black;
}
.dropdown-content a:hover {
background-color: #90EE90;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
#userid:hover {
background-color: none;
}
main div {
display: none;
padding: 20px;
}
.active {
display: block;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
width: 100px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
table, th, td {
border: 1px solid #000 !important;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=text], select, input[type=number], input[type=email] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-size: larger;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: large;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body style="margin: 0; font-family: Arial, Helvetica, sans-serif;">
<div class="header">
<img id="img1" src="images/img1.png" />
<img id="img2" src="images/img2.png" />
<div>
<p id="header_text_1">AAAAAAAAAAA</p>
<p id="header_text_2">BBBBBBBBBBB</p>
<p id="header_text_3">CCCCCCCCCCC</p>
</div>
<img id="img3" src="images/img3.png" />
</div>
<div class="topnav" id="myTopnav">
<a id="home" data-id="1" style="font-size: 18px; color: black;" href="#">Home</a>
<div class="dropdown">
<button class="dropbtn">Information1<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
<a href="#" data-id="2">Content 2</a>
<a href="#" data-id="3">Content 3</a>
<a href="#" data-id="4">Content 4</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Information2<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
<a href="#" data-id="5">Content 5</a>
<a href="#" data-id="6">Content 6</a>
<a href="#" data-id="7">Content 7</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Information3<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
<a href="#" data-id="8">Content 8</a>
<a href="#" data-id="9">Content 9</a>
<a href="#" data-id="10">Content 10</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Information4<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
<a href="#" data-id="11">Content 11</a>
<a href="#" data-id="12">Content 12</a>
</div>
</div>
<a id="logout" style="font-size: 18px; color: red;" href="test.html">LOGOUT</a>
<a href="javascript:void(0);" class="icon" onclick="resp_navbar()">
☰
</a>
</div>
<main>
<div class='active' style="padding-left: 20px; padding-right: 20px;">
<p style="font-size: 20px; font-weight: bolder">Welcome <a id="userid" style="font-weight: bolder; font-size: 20px; color: blue;"></a></p>
</div>
<div id="viewprof" style="overflow-x: auto; padding-left: 50px; padding-right: 50px; padding-top: 50px;">
<table id="tblProducts" border="1px" style="width:100%; line-height:20px;">
<tbody id="myTable">
</tbody>
</table>
</div>
<div id="updtprof">
<h2 style="padding-left: 20px; color: green; padding-bottom: 15px; text-align: center"><u>Update Profile</u></h2>
<div class="container">
<form id="formdata" action="signup_submit.php" method="post" onsubmit="return checkall();">
<div class="row">
<div class="col-25">
<label for="compname"><b>Company Name *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="compname" name="compname" placeholder="Your Company Name.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="compprof"><b>Company Profile *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="compprof" name="compprof" placeholder="Your Company Profile.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="cpname"><b>Contact Person Name *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="cpname" name="cpname" placeholder="Contact Person Name.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="cpdesig"><b>Contact Person Designation *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="cpdesig" name="cpdesig" placeholder="Contact Person Designation.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl1"><b>Address Line 1 *</b></label>
</div>
<div class="col-75">
<input type="text" id="addl1" name="addl1" placeholder="Enter Address.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl2"><b>Address Line 2</b></label>
</div>
<div class="col-75">
<input type="text" id="addl2" name="addl2" placeholder="Enter Address....">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl3"><b>Address Line 3</b></label>
</div>
<div class="col-75">
<input type="text" id="addl3" name="addl3" placeholder="Enter Address..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl4"><b>Address Line 4</b></label>
</div>
<div class="col-75">
<input type="text" id="addl4" name="addl4" placeholder="Enter Address..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country"><b>Country *</b></label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="India">India</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="state"><b>State *</b></label>
</div>
<div class="col-75">
<select id="state" name="state">
<option value="">Select State</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="city"><b>City *</b></label>
</div>
<div class="col-75">
<select id="city" name="city">
<option value="">Select City</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="pincode"><b>Pincode *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Pincode" name="pincode" id="pincode" onKeyPress="if(this.value.length==6) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="phone"><b>Phone No. (With STD Code) *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Phone Number" name="phone" id="phone" onKeyPress="if(this.value.length==15) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="mobile"><b>Mobile No. *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Mobile Number" name="mobile" id="mobile" onKeyPress="if(this.value.length==10) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="fax"><b>Fax No. *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Fax Number" name="fax" id="fax" onKeyPress="if(this.value.length==15) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email"><b>Email *</b></label>
</div>
<div class="col-75">
<input type="email" placeholder="Enter Email" name="email" id="email" onkeyup="checkemail();" required>
<span id="email_status" style="color: red; font-weight: bolder"></span>
</div>
</div>
<div class="row" style="padding-top: 10px">
<input type="submit" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div>Item 4 Content</div>
<div>Item 5 Content</div>
<div>Item 6 Content</div>
<div>Item 7 Content</div>
<div>Item 8 Content</div>
<div>Item 9 Content</div>
<div>Item 10 Content</div>
<div>Item 11 Content</div>
<div>Item 12 Content</div>
</main>
<script>
function showpwd() {
var x = document.getElementById("psw");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
$(document).ready(function(){
load_json_data('state');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('state_city.json', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'state')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
});
///////////////////////////////////////////////////////
document.querySelectorAll('.topnav a')
.forEach(e => e.addEventListener('click', _ => change(e.dataset.id)))
function change(n) {
if(n == 2){
$('#tblProducts tbody').empty();
var username = document.getElementById("userid").innerHTML;
$.ajax({
type: 'post',
url: 'viewprof.php',
dataType: "json",
data: {
user_name:username,
},
cache:false,
success:function(data){
buildTable(data);
},
});
}
if(n == 3){
document.getElementById("formdata").reset();
var username = document.getElementById("userid").innerHTML;
$.ajax({
type: 'post',
url: 'viewprof.php',
dataType: "json",
data: {
user_name:username,
},
cache:false,
success:function(data){
formfill(data);
},
});
}
let panels = document.querySelectorAll('main div');
panels.forEach(p => p.classList.remove('active'));
panels[n - 1].classList.add('active');
}
function formfill(data){
for (var i = 0; i < data.length; i++){
document.getElementById('compname').value = data[i].CompName;
document.getElementById('compprof').value = data[i].CompProf;
document.getElementById('cpname').value = data[i].ContPerName;
document.getElementById('cpdesig').value = data[i].ContPersDesig;
document.getElementById('addl1').value = data[i].Address;
document.getElementById('addl2').value = data[i].Address;
document.getElementById('addl3').value = data[i].Address;
document.getElementById('addl4').value = data[i].Address;
document.getElementById('country').value = data[i].Country;
document.getElementById('state').value = data[i].State;
document.getElementById('city').value = data[i].City;
document.getElementById('pincode').value = data[i].Pincode;
document.getElementById('phone').value = data[i].PhoneNum;
document.getElementById('mobile').value = data[i].MobileNum;
document.getElementById('fax').value = data[i].FaxNum;
document.getElementById('email').value = data[i].Email;
}
}
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td colspan="2"><h2 style="color: green; text-align: center"><u>Personal Information</u></h2></td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Company Name</td>
<td>${data[i].CompName}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Company Profile</td>
<td>${data[i].CompProf}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Contact Person Name</td>
<td>${data[i].ContPerName}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Contact Person Designation</td>
<td>${data[i].ContPersDesig}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Address</td>
<td>${data[i].Address}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Country</td>
<td>${data[i].Country}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">State</td>
<td>${data[i].State}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">City</td>
<td>${data[i].City}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Pincode</td>
<td>${data[i].Pincode}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Phone Number</td>
<td>${data[i].PhoneNum}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Mobile Number</td>
<td>${data[i].MobileNum}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Fax Number</td>
<td>${data[i].FaxNum}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Email ID</td>
<td>${data[i].Email}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Date Modified</td>
<td>${data[i].ModifiedDate}</td>
</tr>`
table.innerHTML += row
}
}
$(document).ready(function() {
var url = window.location.href;
var id = url.slice(url.indexOf('=') + 1, url.lastIndexOf('#'),);
document.getElementById("userid").innerHTML = id;
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
function resp_navbar() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
The above code was working fine till the time I have not inserted the 'container' having 'form' inside the div having "id='updtprof'". Post insertion of this container inside the div (bearing "id='updtprof'"), when I am clicking on 'Home', 'Content2' & 'LOGOUT' the code is working fine and displaying the correct corresponding divs. But when I am clicking on other content's (i.e. content 4 to 12) of the navbar, the above code doesn't throw any error and is also not displaying the respective divs. Also when I am clicking on Content3 of navbar only header is being displayed but not the form.
Can someone tell me how to resolve this issue.
