EMPDATABASE

without validation

by PRAGADEESH S

HTML

<header>
    <h3>
EMPLOYEE DATABASE
	</h3>
  </header>
  	<div class="buttons1">
		
		<input type="button"  id="perm" onclick="permEmps()" value="Permanent">
		<input type="button"  id="temp" onclick="tempEmps()" value="Temporary"><br>
	</div>	
		<div id="addemp">
			<input type="button" id="add" onclick="hide()" value="Add Employee">
		</div>	
	
		<p id ="para"></p>
		<div id="showtable">
			<div class="grid">
				<table id ="table"></table>
			</div>
		</div>	
		
		
		<div id="showform">
			<div class="forms">
				<form name="inputform" id="form" action="#" method="post" onSubmit="return validate()">
					<input type="hidden" id="pid" name="Pid" placeholder="Pid" value="1002">
					<input type="hidden" id="tid" name="Tid" placeholder="Tid" value="2002">
					
					<input type="text" id="name" name="name" placeholder="Name" required>
					<br>
					<input type="text" id="email" name="email" placeholder="E-mail" >
					<br>				
					<input type="text" id="dept" name="dept" placeholder="Department"> 
					<br>
					<input type="text" id="package" name="packagevalue" placeholder="Package"> 
					<br>
					<div class="buttons">
						<input type="button" id="sub" value="Submit" onclick="addRow()" >
						<input type="reset" id="res" value="Cancel" onclick="cancel()">
					</div>
				</form>
			</div>

		</div>


<script>
	window.onload = permEmps();
			
</script>

CSS

body{
   background-color:#6699ff;
}
header{
  background-color:white;
}
h3 {
  text-align: center;
  
}

table,
th,
td {
  background-color:white;
  border: 1px solid black;
  border-collapse: collapse;
  width: 60%;
  margin: auto;					/*************previously 10%*/
  padding: 15px;
  text-align: left;
  table-layout : fixed;
}
.grid{
	
	float:right;

	margin:auto;
	
}


input[type=text], input[type=email] {

  width: auto;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
}
input[type=button],input[type=reset]
 {
    background-color: grey; 
    border: 2px solid black;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}
#sub,#res,#add
 {
    background-color: #012868; 
    border: 2px solid black;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}
.buttons1{
		margin-left:40%
	
}
#sub:hover ,#res:hover,#add:hover,#perm:hover,#temp:hover{
    
	border:2px solid white;
    
}



.addemp{

	margin:0%;
	float:left;
}

JavaScript

//th and fv :tableFormVisibility = 1 true; tv and fh: tableFormVisibility = 2 false
					//perm-->Permanent;temp-->temporary					
				
				var tableFormVisibility = false;
				var permtDataArrayLength;
				var tempDataArrayLength;
				var permClickCount = 0;		
				var termpClickCount = 0;
				var permTempActive;
				var permData = [];
				var permHtml = "<tr><th>Id</th><th>Name</th><th>Email</th><th>Dept</th><th>Package</th></tr>";
				
				var tempData = [];
				var tempHtml = "<tr><th>Id</th><th>Name</th><th>Email</th><th>Dept</th><th>Package</th></tr>";
					
				
				//*********object**********************
				function employee(id,name, email, dept, salary){
					
					this.id = id;
					this.name = name;
					this.email = email;
					this.dept = dept;
					this.salary = salary;
				}
				
				//***************addRow*****************
				function addRow(){
					
					 
					permClickCount++;
					
					var namevalue = document.getElementById("name").value;
					var emailvalue = document.getElementById("email").value;
					var deptvalue = document.getElementById("dept").value;
					var packagevalue = document.getElementById("package").value;							
					
						document.getElementById("para").innerHTML = "";
						tableFormVisibility = false;
						hide();
						
						if(permTempActive == 1){
							permAddRow();
						}
						else {
							tempAddRow();
						}
					}
					
					
					
					
					
				  

				//******add perm emp*******
				function permAddRow(){
					idvalue = incrementPValue();
					var namevalue = document.getElementById("name");
					var emailvalue = document.getElementById("email");
					var deptvalue = document.getElementById("dept");
					var packagevalue = document.getElementById("package");
					
					var genEmployee = new employee(idvalue,namevalue.value,emailvalue.value,deptvalue.value,packagevalue.value);
					permData.push(genEmployee);
					permtDataArrayLength = permData.length;
					permtDataArrayLength--;
					permHtml +=...