<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<script type="text/javascript" language="javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.js"></script>
<script type="text/javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/json2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="<c:url value='/resources/css/bootstrap.min.css' />" rel="stylesheet">
<link href="<c:url value='/resources/css/style.css' />" rel="stylesheet">
<script type="text/javascript">
var company = [] ;
var from = [] ;
var to = [] ;
var year =[];
var organization =[];
var topic =[];
var duration =[];
jQuery(document).ready(function($) {
var exp = $('input:radio[name=exp]:checked').val();
var training = $('input:radio[name=training]:checked').val();
$("#pexp").hide();
$("#fieldexp").hide();
$("#ptrain").hide();
$("#fieldtrain").hide();
$('input[type=radio][name=exp]').change(function() {
if (this.value == 'Yes') {
$("#pexp").show();
$("#fieldexp").show();
addExp();
}
else if (this.value == 'No') {
$("#pexp").hide();
$("#fieldtrain").hide();
}
});
$('input[type=radio][name=train]').change(function() {
if (this.value == 'Yes') {
$("#ptrain").show();
$("#fieldtrain").show();
addTrain();
}
else if (this.value == 'No') {
$("#ptrain").hide();
$("#fieldtrain").hide();
}
});
});
function addExp(){
var scntDiv = $('#addmorefieldexp');
$('#pexp').live('click', function() {
$( ' <br><br>'
+'<label for="inputPassword3" class="col-sm-2 control-label">Company Name</label>'
+'<div class="col-sm-2">'
+'<input type="text" class="form-control" name="field_company[]">'
+'</div>'
+'<label for="inputPassword3" class="col-sm-1 control-label">From</label>'
+'<div class="col-sm-2">'
+'<input type="text" class="form-control" name="field_from[]">'
+'</div>'
+'<label for="inputPassword3" class="col-sm-1 control-label">To</label>'
+'<div class="col-sm-2">'
+'<input type="text" class="form-control" name="field_to[]">'
+'</div>'
+'<label for="inputPassword3" class="col-sm-1 control-label">Year</label>'
+'<div class="col-sm-1">'
+'<input type="text" class="form-control" name="field_year[]">'
+'</div>').appendTo(scntDiv);
return false;
});
}
function addTrain(){
var scntDiv = $('#addmorefieldtrain');
$('#ptrain').live('click', function() {
$( '<div class="form-group text-center" id="fieldtrain">'
+'<label for="inputPassword3" class="col-sm-2 control-label">Organization</label>'
+'<div class="col-sm-2">'
+'<input type="text" class="form-control" name="field_organization[]">'
+'</div>'
+'<label for="inputPassword3" class="col-sm-2 control-label">Topic</label>'
+'<div class="col-sm-2">'
+'<input type="text" class="form-control" name="field_topic[]">'
+'</div>'
+'<label for="inputPassword3" class="col-sm-2 control-label">Duration</label>'
+'<div class="col-sm-2">'
+'<input type="text" class="form-control" name="field_duration[]">'
+'</div>'
+'</div>').appendTo(scntDiv);
return false;
});
}
function array(){
var inps = document.getElementsByName('field_company[]');
for (var i = 0; i <inps.length; i++) {
var inp=inps[i];
company.push(inp.value);
}
var inps = document.getElementsByName('field_from[]');
for (var i = 0; i <inps.length; i++) {
var inp=inps[i];
from.push(inp.value);
}
var inps = document.getElementsByName('field_to[]');
for (var i = 0; i <inps.length; i++) {
var inp=inps[i];
to.push(inp.value);
}
var inps = document.getElementsByName('field_year[]');
for (var i = 0; i <inps.length; i++) {
var inp=inps[i];
year.push(inp.value);
}
var inps = document.getElementsByName('field_organization[]');
for (var i = 0; i <inps.length; i++) {
var inp=inps[i];
organization.push(inp.value);
}
var inps = document.getElementsByName('field_topic[]');
for (var i = 0; i <inps.length; i++) {
var inp=inps[i];
topic.push(inp.value);
}
var inps = document.getElementsByName('field_duration[]');
for (var i = 0; i <inps.length; i++) {
var inp=inps[i];
duration.push(inp.value);
}
}
var isJpg = function(name) {
return name.match(/jpg$/i)
};
var isPng = function(name) {
return name.match(/png$/i)
};
function onuploadCall(){
var file = $('[name="file"]');
// var filename = $.trim(file.val());
var imgContainer = $('#imgContainer');
var formData = new FormData();
formData.append('file', jQuery('input[type=file]')[0].files[0]);
$.ajax({
url: "http://localhost:8080/EmployeeRegistrationForm/echofile",
type: "POST",
data: formData,
enctype: "multipart/form-data",
processData: false,
modelAttribute:'uploadedFile',
contentType: false
}).done(function(data) {
// imgContainer.html('');
var img = '<img src="data:' + data.contenttype + ';base64,'
+ data.base64 + '"/>';
// imgContainer.append(img);
}).fail(function(jqXHR, textStatus) {
//alert(jqXHR.responseText);
alert('File upload failed ...');
});
}
function madeAjaxCall(){
array();
var gender = $('#gender').val();
var blood = $('#blood').val();
$.ajax({
type: "post",
url: "http://localhost:8080/EmployeeRegistrationForm/employee",
cache: false,
data:'name=' + $("#name").val()
+"&fname=" + $("#fname").val()
+"&mname=" + $("#mname").val()
+"&nid=" + $("#nid").val()
+"&age=" + $("#age").val()
+"&blood=" + blood
+"&gender=" + gender
+"&caddress=" + $("#caddress").val()
+"&paddress=" + $("#paddress").val()
+"&paddress=" + $("#paddress").val()
+"&pdegree=" + $("#pdegree").val()
+"&puniversity=" + $("#puniversity").val()
+"&pyear="+ $("#pyear").val()
+"&presult=" + $("#presult").val()
+"&mdegree=" + $("#mdegree").val()
+"&muniversity=" + $("#muniversity").val()
+"&mresult=" + $("#mresult").val()
+"&myear=" + $("#myear").val()
+"&bdegree=" + $("#bdegree").val()
+"&buniversity=" + $("#buniversity").val()
+"&bresult=" + $("#bresult").val()
+"&byear=" + $("#byear").val()
+"&hdegree=" + $("#hdegree").val()
+"&college=" + $("#college").val()
+"&hresult=" + $("#hresult").val()
+"&hyear=" + $("#hyear").val()
+"&sdegree=" + $("#sdegree").val()
+"&school=" + $("#school").val()
+"&sresult=" + $("#sresult").val()
+"&syear=" + $("#syear").val()
+"&date=" + $("#date").val()
+"&department=" + $("#department").val()
+"&location=" + $("#location").val()
+"&company=" + company
+"&from=" + from
+"&to=" + to
+"&year=" + year
+"&organization=" + organization
+"&topic=" + topic
+"&duration=" + duration,
success: function(response){
var obj = JSON.parse(response);
alert(response);
},
error: function(){
alert('Error while request..');
}
});
}
</script>
</head>
<body>
<div class="container main">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name" placeholder="Name" value="">
</div>
</div>
<div class="col-sm-6 ownPic">
<div class="row">
<input type="file" name="file" id="image"/><br><br>
<input type="button" value="Upload" name="upload" onclick="onuploadCall();" id="up"/>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Father's Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="fname" placeholder="Father Name" value="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Mother's Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="mname" placeholder="Mother's Name" value="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">National ID</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="nid" placeholder="National ID" value="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Age</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="age" placeholder="Age" value="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Blood Group</label>
<div class="col-sm-3">
<select id="blood" >
<option value="None">Select your Blood Type</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-3">
<select id="gender">
<option value="None">Select your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Address (Current)</label>
<div class="col-sm-6">
<textarea id="caddress" class="form-control" name="cadd" rows="4" cols="80"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Address (Permarent)</label>
<div class="col-sm-6">
<textarea id="paddress" class="form-control" name="padd" rows="4" cols="80"></textarea>
</div>
</div>
<div class="form-group text-center">
<label for="inputPassword3" class="col-sm-2 control-label">PGT/PHD</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="pdegree" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">University</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="puniversity" value="">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="pyear" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">Result</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="presult" value="">
</div>
</div>
<div class="form-group text-center">
<label for="inputPassword3" class="col-sm-2 control-label">Master's Degree</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="mdegree" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">University</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="muniversity" value="">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="myear" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">Result</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="mresult" value="">
</div>
</div>
<div class="form-group text-center">
<label for="inputPassword3" class="col-sm-2 control-label">Bacholor's Degree</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="bdegree" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">University</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="buniversity" value="">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="byear" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">Result</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="bresult" value="">
</div>
</div>
<div class="form-group text-center">
<label for="inputPassword3" class="col-sm-2 control-label">HSC</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="hdegree" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">College Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="college" value="">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="hyear" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">Result</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="hresult" value="">
</div>
</div>
<div class="form-group text-center">
<label for="inputPassword3" class="col-sm-2 control-label">SSC</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="sdegree" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">School Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="school" value="">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="syear" value="">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">Result</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="sresult" value="">
</div>
</div>
<div class="form-group text-center">
<label for="inputPassword3" class="col-sm-2 control-label">Joining Date</label>
<div class="col-sm-2">
<input type="date" class="form-control" id="date" value="">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Department</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="department" value="">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Location</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="location" value="">
</div>
</div>
<div class="form-group" id="experience">
<label class="col-sm-2 control-label">Employment Experience</label>
<div class="col-sm-4" id="checkbox" value="">
<input type="radio" name="exp" class="expp" value="Yes">Yes
<input type="radio" name="exp" class="expp" value="No">No
<button class="btn btn-lg btn-sm btn-primary btn-circle" id="pexp" ><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="form-group text-center" id="addmorefieldexp">
<p>
</p>
</div>
<!-- <div class="form-group text-center" id="fieldexp">
<label for="inputPassword3" class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-2">
<input type="text" class="form-control">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">From</label>
<div class="col-sm-2">
<input type="text" class="form-control">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">To</label>
<div class="col-sm-2">
<input type="text" class="form-control">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">Year</label>
<div class="col-sm-1">
<input type="text" class="form-control">
</div>
</div> -->
<div class="form-group">
<label class="col-sm-2 control-label">Training</label>
<div class="col-sm-4">
<input type="radio" name="train" value="Yes">Yes
<input type="radio" name="train" value="No">No
<button class="btn btn-sm btn-primary btn-circle" id="ptrain"><i class="fa fa-plus"></i></button>
</div>
</div>
<!-- <div class="form-group text-center" id="fieldtrain">
<label for="inputPassword3" class="col-sm-2 control-label">Organization</label>
<div class="col-sm-2">
<input type="text" class="form-control">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Topic</label>
<div class="col-sm-2">
<input type="text" class="form-control">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Duration</label>
<div class="col-sm-2">
<input type="text" class="form-control">
</div>
</div> -->
<div class="form-group text-center" id="addmorefieldtrain">
<p>
</p>
</div>
<div class="col-md-12 text-center">
<button class="btn btn-success btn-lg" type="button" name="button" onclick="madeAjaxCall();">Save</button>
<button class="btn btn-reset btn-lg" type="button" name="button">Reset</button>
</div>
</div>
</div>
</form>
</body>
</html>