Bootstrap Password Revealer Got Into Bug - javascript

A Bootstrap password revealer that makes my PC hang when I hover the eye button. It adds automatically an input even though there's no codes to add an input.
The input has automatically increase, it makes my bowser hang on and then my whole PC next.
What is the possible reason and solution for this? This causes my PC hang.
JSFIDDLE: https://jsfiddle.net/aice09/76b99w4m/
//Password Revealer
$(".reveal").mousedown(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'text'));
})
.mouseup(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
})
.mouseout(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
});
.btn-primary {
color: #0275d8;
background-image: none;
background-color: transparent;
border-color: #0275d8;
}
.btn-primary:hover {
background-color: #0275d8;
color: white;
border-color: #0275d8;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.jshttps://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
<!-- // Modal -->


I would just set the type of the password input to text when you click on .reveal
//Password Revealer
$(".reveal").on('click',function() {
$('#em_password').attr('type','text');
})
.btn-primary {
color: #0275d8;
background-image: none;
background-color: transparent;
border-color: #0275d8;
}
.btn-primary:hover {
background-color: #0275d8;
color: white;
border-color: #0275d8;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
.btn-success:hover {
color: #fff;
background-color: #449d44;
border-color: #419641;
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de;
}
.btn-info:hover {
color: #fff;
background-color: #31b0d5;
border-color: #2aabd2;
}
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.btn-warning:hover {
color: #fff;
background-color: #ec971f;
border-color: #eb9316;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d9534f;
}
.btn-danger:hover {
color: #fff;
background-color: #c9302c;
border-color: #c12e2a;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="navigation"></div>
<!-- Content Section -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Employee</h1>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="pull-right">
<button class="btn btn-success addnewemployee" data-toggle="modal" data-target="#add_new_record_modal">Add New Job</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sales_individual_tb">
<div class="records_content"></div>
</div>
</div>
</div>
<!-- /Content Section -->
<!-- Bootstrap Modals -->
<!-- Modal - Add New Record/User -->
<div class="modal fade bs-example-modal-lg" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Employee</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_firstname">First Name</label>
<input type="text" id="em_firstname" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_middlename">Middle Name</label>
<input type="text" id="em_middlename" placeholder="Middle Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_lastname">Last Name</label>
<input type="text" id="em_lastname" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_id">System ID</label>
<input type="text" id="em_id" placeholder="System ID" class="form-control" readonly />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="form-group">
<label for="em_email">Email</label>
<input type="text" id="em_email" placeholder="Email" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_position">Position</label>
<select name="em_position" id="em_position" class="form-control" required="required">
<option value="Position 1">Position 1</option>
<option value="Position 2">Position 2</option>
<option value="Position 3">Position 3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_department">Department</label>
<select name="em_department" id="em_department" class="form-control" required="required">
<option value="Department 1">Department 1</option>
<option value="Department 2">Department 2</option>
<option value="Department 3">Department 3</option>
<option value="Department 4">Department 4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button>
</div>
</div>
</div>
</div>
<!-- // Modal -->
<!-- Modal - Update User details -->
<div class="modal fade bs-example-modal-lg" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Update</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_firstname">First Name</label>
<input type="text" id="update_em_firstname" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_middlename">Middle Name</label>
<input type="text" id="update_em_middlename" placeholder="Middle Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_lastname">Last Name</label>
<input type="text" id="update_em_lastname" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_id">System ID</label>
<input type="text" id="update_em_id" placeholder="System ID" class="form-control" readonly />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="form-group">
<label for="em_email">Email</label>
<input type="text" id="update_em_email" placeholder="Email" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_position">Position</label>
<select name="update_em_position" id="update_em_position" class="form-control" required="required">
<option value="Position 1">Position 1</option>
<option value="Position 2">Position 2</option>
<option value="Position 3">Position 3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_department">Department</label>
<select name="update_em_department" id="update_em_department" class="form-control" required="required">
<option value="Department 1">Department 1</option>
<option value="Department 2">Department 2</option>
<option value="Department 3">Department 3</option>
<option value="Department 4">Department 4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="update_em_password" name="update_em_password" type="password" class="form-control pwd" maxlength="8" value="11">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="UpdateUserDetails()">Save Changes</button>
<input type="hidden" id="hidden_user_id">
</div>
</div>
</div>
</div>
Here's how I would do it with your original events.
//Password Revealer
$passwd = $('#em_password');
$(".reveal").mousedown(function() {
$passwd.attr('type', 'text');
})
.mouseup(function() {
$passwd.attr('type', 'password');
})
.mouseout(function() {
$passwd.attr('type', 'password');
});
.btn-primary {
color: #0275d8;
background-image: none;
background-color: transparent;
border-color: #0275d8;
}
.btn-primary:hover {
background-color: #0275d8;
color: white;
border-color: #0275d8;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
.btn-success:hover {
color: #fff;
background-color: #449d44;
border-color: #419641;
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de;
}
.btn-info:hover {
color: #fff;
background-color: #31b0d5;
border-color: #2aabd2;
}
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.btn-warning:hover {
color: #fff;
background-color: #ec971f;
border-color: #eb9316;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d9534f;
}
.btn-danger:hover {
color: #fff;
background-color: #c9302c;
border-color: #c12e2a;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="navigation"></div>
<!-- Content Section -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Employee</h1>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="pull-right">
<button class="btn btn-success addnewemployee" data-toggle="modal" data-target="#add_new_record_modal">Add New Job</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sales_individual_tb">
<div class="records_content"></div>
</div>
</div>
</div>
<!-- /Content Section -->
<!-- Bootstrap Modals -->
<!-- Modal - Add New Record/User -->
<div class="modal fade bs-example-modal-lg" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Employee</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_firstname">First Name</label>
<input type="text" id="em_firstname" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_middlename">Middle Name</label>
<input type="text" id="em_middlename" placeholder="Middle Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_lastname">Last Name</label>
<input type="text" id="em_lastname" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_id">System ID</label>
<input type="text" id="em_id" placeholder="System ID" class="form-control" readonly />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="form-group">
<label for="em_email">Email</label>
<input type="text" id="em_email" placeholder="Email" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_position">Position</label>
<select name="em_position" id="em_position" class="form-control" required="required">
<option value="Position 1">Position 1</option>
<option value="Position 2">Position 2</option>
<option value="Position 3">Position 3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_department">Department</label>
<select name="em_department" id="em_department" class="form-control" required="required">
<option value="Department 1">Department 1</option>
<option value="Department 2">Department 2</option>
<option value="Department 3">Department 3</option>
<option value="Department 4">Department 4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button>
</div>
</div>
</div>
</div>
<!-- // Modal -->
<!-- Modal - Update User details -->
<div class="modal fade bs-example-modal-lg" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Update</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_firstname">First Name</label>
<input type="text" id="update_em_firstname" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_middlename">Middle Name</label>
<input type="text" id="update_em_middlename" placeholder="Middle Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_lastname">Last Name</label>
<input type="text" id="update_em_lastname" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_id">System ID</label>
<input type="text" id="update_em_id" placeholder="System ID" class="form-control" readonly />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="form-group">
<label for="em_email">Email</label>
<input type="text" id="update_em_email" placeholder="Email" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_position">Position</label>
<select name="update_em_position" id="update_em_position" class="form-control" required="required">
<option value="Position 1">Position 1</option>
<option value="Position 2">Position 2</option>
<option value="Position 3">Position 3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_department">Department</label>
<select name="update_em_department" id="update_em_department" class="form-control" required="required">
<option value="Department 1">Department 1</option>
<option value="Department 2">Department 2</option>
<option value="Department 3">Department 3</option>
<option value="Department 4">Department 4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="update_em_password" name="update_em_password" type="password" class="form-control pwd" maxlength="8" value="11">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="UpdateUserDetails()">Save Changes</button>
<input type="hidden" id="hidden_user_id">
</div>
</div>
</div>
</div>

Related

bootstrap modal doesn't close issue on my one linux server but it works on another linux server

My code is working on local server as well as my demo server which is of linux server but its not working on my another linux server I have checked both versions heapsize but still issue occures.
<div id="multiPatDetails" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel" style="text-align:center;">PATIENT DETAIL</h4>
</div>
<div class="modal-body">
<input type="hidden" id="apptPatientID1">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" id="patientDetailsListID" style="padding:15px;">
</div>
</div>
<input type="hidden" id="firstNameID">
<input type="hidden" id="middleNameID">
<input type="hidden" id="lastNameID">
<input type="hidden" id="clinicRegNoID">
<input type="hidden" id="patMobileNoID">
<div class="row" style="margin-top:15px;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-3 col-sm-3 col-xs-6">
<font style="font-size: 14px;">Appointment Date</font>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<input type="text" id="apptDateID2" class="form-control" placeholder="Appointment Date">
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<font style="font-size: 14px;">Appt. Start Time</font>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<select id="hhID3" class="form-control" style="display: inline-block;width: 48%; padding: 7px;"
onchange="getTimeVal(hhID3.value, mmID3.value, 'apptStartTimeID2', apptDateID2.value, 'startTimeID2');">
<option value="">HH</option>
<%
for(String hours : hoursList){
%>
<option value="<%=hours%>"><%=hours%></option>
<%
}
%>
</select>
<select id="mmID3" class="form-control" style="display: inline-block;width: 48%; padding: 7px;"
onchange="getTimeVal(hhID3.value, mmID3.value, 'apptStartTimeID2', apptDateID2.value, 'startTimeID2');">
<option value="">MM</option>
<option value="00">00</option>
<option value="05">05</option>
</select>
<input type="hidden" id="apptStartTimeID2" class="form-control" placeholder="Appt Start Time" readonly="readonly">
</div>
</div>
</div>
<div class="row" style="margin-top:15px;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-3 col-sm-3 col-xs-6">
<font style="font-size: 14px;">Appointment Type</font>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<select id="apptTypeID2" class="form-control" onchange="getAppointmentDuration(apptTypeID2.value, startTimeID2.value);">
<option value="000">Select Appt. Type</option>
<%
for(Integer key: map.keySet()){
%>
<option value="<%=key%>"><%=map.get(key)%></option>
<%
}
%>
</select>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<font style="font-size: 14px;">Appointment By</font>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<select id="apptByID2" class="form-control">
<option value="-1">Select Appt. By</option>
<%
for(Integer key: clinicianMap.keySet()){
%>
<option value="<%=key%>"><%=clinicianMap.get(key)%></option>
<%
}
%>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top:15px;">
<div class="col-md-12 col-sm-12 col-xs-12" align="center">
<div class="col-md-3 col-sm-3 col-xs-6">
<font style="font-size: 14px;">Appt. End Time</font>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<input type="text" id="apptEndTimeID2" class="form-control" placeholder="Appt End Time" readonly="readonly">
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<font style="font-size: 14px;">Walk In?</font>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<input type="checkbox" name="walkIn" id="walkInID1" value="1" style="zoom: 1.8;">
</div>
</div>
</div>
<input type="hidden" name="" id="startTimeID2">
<input type="hidden" name="" id="endTimeID2">
<input type="hidden" name="" id="agendaID2">
<input type="hidden" name="" id="systemStartTimeID2">
</div>
<div class="modal-footer" align="center">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" onclick="addNewPatient(firstNameID.value, middleNameID.value, lastNameID.value, clinicRegNoID.value, patMobileNoID.value, apptDateID2.value, apptStartTimeID2.value, systemStartTimeID2.value);">Add New Patient</button>
<button type="button" class="btn btn-primary" id="multiplePatSubmtBtnID" onclick="registerAppointment3(startTimeID2.value, endTimeID2.value, agendaID2.value, apptPatientID1.value, apptDateID2.value, apptStartTimeID2.value, apptTypeID2.value, apptEndTimeID2.value, '', '', '', '', '', apptByID2.value, systemStartTimeID2.value);" data-dismiss="modal">Add Appointment</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="UTF-8">
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function registerAppointment(startDate, endDate, agenda, patientID, apptDate, apptStartTime, visitTypeID, apptEndTime, fName, mName, lName, mobileNo, regNo, apptByID, walkIn, currentSystemDateTime) {
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var array = JSON.parse(xmlhttp.responseText);
var statuMsg = "";
for ( var i = 0; i < array.Release.length; i++) {
statuMsg = array.Release[i].Msg;
}
console.log("status msg :: "+statuMsg);
if(statuMsg == "Success"){
//Retrieving patient details based on patientID
//retrievePatientDetails(patientID, startDate, endDate, agenda);
//location.reload();
window.location.assign("Welcome.jsp");
//Calling createEvent function in order to display event added into Calendar
//createEvent(startDate, endDate, agenda, "Booked");
//$('#singlePatDetails').modal('hide');
$('#singlePatDetailsCloseID').click();
$('#multiPatDetails').modal('hide');
$('#multiPatDetails').removeClass('in');
$('#newPatietModal').modal('hide');
}else{
//$('#singlePatDetails').modal('hide');
$('#singlePatDetailsCloseID').click();
$('#newPatietModal').modal('hide');
$('#multiPatDetails').modal('hide');
$("#apptErrorMsgModal").modal('show');
}
}
};
xmlhttp.open("GET", "AddAppointment?visitTypeID="+visitTypeID+"&patientID="+patientID+
"&apptDate="+apptDate+"&apptStartTime="+apptStartTime+"&apptEndTime="+apptEndTime+"&walkIn="+walkIn+
"&firstName="+fName+"&middleName="+mName+"&lastName="+lName+"&mobileNo="+mobileNo+"&regNo="+regNo+"&cliniciaID="+apptByID+"&startDate="+currentSystemDateTime, true);
xmlhttp.send();
}
</script>

Buttons floating on page and serving as anchors

I'm putting floating buttons on my form to serve as anchors (the page is extensive), but only 1 button appears, but 3 buttons should be displayed.
The goal was when to slide the mouse scroll, to appear one button below the other with Unit 1, Unit 2 and Unit 3, respectively. And by clicking on them, go to their respective sessions. I'm not getting this with the 3 buttons, only with one and this is going to the top of the page.
Move the mouse and see the button (only one that appears)
$(document).ready(function(){
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao1").style.display = "block";
} else {
document.getElementById("navegacao1").style.display = "none";
}
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao2").style.display = "block";
} else {
document.getElementById("navegacao2").style.display = "none";
}
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao3").style.display = "block";
} else {
document.getElementById("navegacao3").style.display = "none";
}
}
function anconrau1() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function anconrau2() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function anconrau3() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
});
.sessao-unidade {
padding-top: 11px;
height: 45px;
display: block;
width: 100%;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.42857143;
text-align: center;
color: #fff;
background-color: rgb(66, 139, 202);
border: 0px solid rgb(177, 177, 177);
margin-bottom: 10px;
}
.sessao-titulos {
display: block;
width: 100%;
color: rgb(27, 80, 124);
background-color: #b4d5f1;
border-color: #357ebd;
padding: 6px 12px;
margin-bottom: 10px;
margin-top: 2px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border-radius: 2px;
overflow: visible;
text-transform: uppercase;
}
.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
text-decoration: none;
}
.flutuante{
display: none;
position: fixed;
z-index: 9999;
background-color: #e82222;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 2px;
border: none;
font-size: 12px;
}
#navegacao1 {
bottom: 15px;
right: 15px;
}
#navegacao2 {
bottom: 30px;
right: 15px;
}
#navegacao3 {
bottom: 60px;
right: 15px;
}
#navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
background-color: #164b79;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="flutuante" onclick="anconrau1()" id="navegacao1" title="Ir ao topo">Unity 1</a>
<a class="flutuante" onclick="anconrau2()" id="navegacao2" title="Ir ao topo">Unity 2</a>
<a class="flutuante" onclick="anconrau3()" id="navegacao3" title="Ir ao topo">Unity 3</a>
<div id="div-unidades">
<div id="unidade1">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 1
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u1-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Class number:</label>
<input type="number" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-tipo-aula">Classroom Type:</label>
<select name="" id="u1-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<div class="u1-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u1-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u1-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u1-objetivo-forum" id="u1-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u1-ativacao-forum" id="u1-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-avaliacao-forum">Evaluation:</label>
<select name="u1-avaliacao-forum" id="u1-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u1-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u1-peso-forum" id="u1-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u1-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u1-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u1-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 2 -->
<div id="unidade2">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 2
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u2-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Class number:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-tipo-aula">Classroom Type:</label>
<select name="" id="u2-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u2-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u2-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u2-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u2-objetivo-forum" id="u2-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u2-ativacao-forum" id="u2-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-avaliacao-forum">Evaluation:</label>
<select name="u2-avaliacao-forum" id="u2-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u2-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u2-peso-forum" id="u2-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<!-- Other tools -->
<div class="u2-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u2-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u2-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u2-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 3 -->
<div id="unidade3">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 3
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u3-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Class number:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-tipo-aula">Classroom Type:</label>
<select name="" id="u3-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u3-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u3-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u3-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u3-objetivo-forum" id="u3-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u3-ativacao-forum" id="u3-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-avaliacao-forum">Evaluation:</label>
<select name="u3-avaliacao-forum" id="u3-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u3-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u3-peso-forum" id="u3-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u3-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u3-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u3-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u3-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

The problem here is you are overriding the funcion scrollfunction three times, so the only one which is used is the last defined.
Also you should check the scrollTop value depending on each element as you are comparing for all three functions if the scrollTop value is greater than 20.

Try using $('#navegacao1,#navegacao2,#navegacao3').click(function(){ rather than using separate functions
$(document).ready(function(){
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao1").style.display = "block";
document.getElementById("navegacao2").style.display = "none";
document.getElementById("navegacao3").style.display = "none";
} else if ((document.body.scrollTop > 20 && document.body.scrollTop > 20 )|| (document.body.scrollTop < 30 && document.body.scrollTop < 30)) {
document.getElementById("navegacao2").style.display = "block";
document.getElementById("navegacao1").style.display = "none";
document.getElementById("navegacao3").style.display = "none";
}
else if ((document.body.scrollTop < 30 && document.body.scrollTop > 30 )|| (document.body.scrollTop <50 && document.body.scrollTop <50)) {
document.getElementById("navegacao3").style.display = "block";
document.getElementById("navegacao1").style.display = "none"; document.getElementById("navegacao2").style.display = "none";
}
}
$(function(){
$('#navegacao1,#navegacao2,#navegacao3').click(function(){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
});
});
.sessao-unidade {
padding-top: 11px;
height: 45px;
display: block;
width: 100%;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.42857143;
text-align: center;
color: #fff;
background-color: rgb(66, 139, 202);
border: 0px solid rgb(177, 177, 177);
margin-bottom: 10px;
}
.sessao-titulos {
display: block;
width: 100%;
color: rgb(27, 80, 124);
background-color: #b4d5f1;
border-color: #357ebd;
padding: 6px 12px;
margin-bottom: 10px;
margin-top: 2px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border-radius: 2px;
overflow: visible;
text-transform: uppercase;
}
.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
text-decoration: none;
}
.flutuante{
display: none;
position: fixed;
z-index: 9999;
background-color: #e82222;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 2px;
border: none;
font-size: 12px;
}
#navegacao1 {
bottom: 15px;
right: 15px;
}
#navegacao2 {
bottom: 30px;
right: 15px;
}
#navegacao3 {
bottom: 60px;
right: 15px;
}
#navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
background-color: #164b79;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="flutuante" id="navegacao1" title="Ir ao topo">Unity 1</a>
<a class="flutuante" id="navegacao2" title="Ir ao topo">Unity 2</a>
<a class="flutuante" id="navegacao3" title="Ir ao topo">Unity 3</a>
<div id="div-unidades" style="height:1000px">
<div id="unidade1">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 1
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u1-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Class number:</label>
<input type="number" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-tipo-aula">Classroom Type:</label>
<select name="" id="u1-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<div class="u1-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u1-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u1-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u1-objetivo-forum" id="u1-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u1-ativacao-forum" id="u1-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-avaliacao-forum">Evaluation:</label>
<select name="u1-avaliacao-forum" id="u1-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u1-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u1-peso-forum" id="u1-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u1-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u1-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u1-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 2 -->
<div id="unidade2">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 2
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u2-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Class number:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-tipo-aula">Classroom Type:</label>
<select name="" id="u2-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u2-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u2-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u2-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u2-objetivo-forum" id="u2-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u2-ativacao-forum" id="u2-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-avaliacao-forum">Evaluation:</label>
<select name="u2-avaliacao-forum" id="u2-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u2-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u2-peso-forum" id="u2-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<!-- Other tools -->
<div class="u2-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u2-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u2-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u2-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 3 -->
<div id="unidade3">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 3
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u3-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Class number:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-tipo-aula">Classroom Type:</label>
<select name="" id="u3-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u3-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u3-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u3-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u3-objetivo-forum" id="u3-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u3-ativacao-forum" id="u3-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-avaliacao-forum">Evaluation:</label>
<select name="u3-avaliacao-forum" id="u3-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u3-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u3-peso-forum" id="u3-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u3-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u3-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u3-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u3-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to remove side bar and place panel at center

I have designed a page where I no need side bar need to remove that and I need place a panel at center
I have designed tabs at panel heading when I do mouse over to each tab, the mouse over color not fit to the row below all tabs
on mouse over there is some background color at each tab name I need to avoid
as a beginner I developed please give suggestion to clear this out
https://jsfiddle.net/ym3yk38m/4/
.nav-tabs { border-bottom: 6px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus,.nav-tabs > li.active > a:focus {border: none;background:#f8f8f8; } .nav-tabs > li.active > a:hover { border-width: 0;background:#f8f8f8;}
.nav-tabs > li > a { border: none; color: #666; padding:10px 95px; width:500px; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none;background:#f8f8f8; }
.nav-tabs > li > a::after { content: ""; background: #00a8a8; height: 7px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<!--bootstrapValidator-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Date picker css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">
<b>Student Self Enrollment</b>
</h3>
</div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" role="tablist">
<li class="col-lg-4 role="presentation" class="active">Personal Info</li>
<li class="col-lg-4 role="presentation">Contact Info</li>
<li class="col-lg-4 role="presentation">Previous Educational Info</li>
</ul>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-body">
<form class="form-horizontal" method="post">
<div class="tab-content">
<!--Personal info tab div -->
<div role="tabpanel" class="tab-pane active" id="home">
<h3 style="color: red">Student Details</h3>
<div class="form-group">
<label class="col-xs-2 control-label">Student Name</label>
<!--<div class="group">-->
<div class="col-xs-3">
<input name="student.studentFirstName" type="text" class="form-control" id="studentFirstName" placeholder="First Name" />
</div>
<div class="col-xs-3">
<input name="student.studentMiddleName" type="text" class="form-control" id="studentMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input name="student.studentLastName" type="text" class="form-control" id="studentLastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Date-of-birth</label>
<div class="col-xs-3 ">
<div class="input-group input-append date" id="studentDOB">
<input name="student.studentDOB" type="text" class="form-control" placeholder="Date-Of-Birth" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-3">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="optradio">Male</label>
<label class="btn btn-default">
<input type="radio" name="optradio">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Place of Birth </label>
<div class="col-xs-3">
<input name="student.studentBirthPlace" type="text" class="form-control" id="studentBirthPlace" placeholder="Place of Birth" />
</div>
<label class="col-xs-3 control-label">Mother Toungue</label>
<div class="col-xs-3">
<input name="student.studentMotherTounge" type="text" class="form-control" id="studentMotherTounge" placeholder="Mother Toungue" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Blood Group </label>
<div class="col-xs-3">
<input name="student.studentBloodGroup" type="text" class="form-control" id="studentBloodGroup" placeholder="Blood Group" />
</div>
<label class="col-xs-3 control-label">Class Name</label>
<div class="col-xs-3">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Image</label>
<div class="col-xs-9">
<input type="file" class="form-control" name="student.studentImage"/>
</div>
</div>
<h3 style="color: red">Parent Details</h3>
<div class="form-group">
<label class="col-xs-2 control-label">Father Name</label>
<div class="group">
<div class="col-xs-3">
<input name="parent.fatherFirstName" type="text" class="form-control" id="fatherFirstName" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input name="parent.fatherMiddleName" type="text" class="form-control" id="fatherMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input name="parent.fatherLastName" type="text" class="form-control" id="fatherLastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Mother Name</label>
<div class="group">
<div class="col-xs-3">
<input name="parent.motherFirstName" type="text" class="form-control" id="motherFirstName" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input name="parent.motherMiddleName" type="text" class="form-control" id="motherMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input name="parent.motherLastName" type="text" class="form-control" id="motherLastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Gaurdian Name</label>
<div class="group">
<div class="col-xs-3">
<input name="parent.gaurdianFirstName" type="text" class="form-control" id="gaurdianFirstName" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input name="parent.gaurdianMiddleName" type="text" class="form-control" id="gaurdianMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input name="parent.gaurdianLastName" type="text" class="form-control" id="gaurdianLastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Occupation</label>
<div class="col-xs-9">
<input name="parent.occupation" type="text" class="form-control" id="occupation" placeholder="Occupation" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Qualification</label>
<div class="col-xs-3">
<input name="parent.qualification" type="text" class="form-control" id="qualification" placeholder="Qualification" />
</div>
<label class="col-xs-3 control-label">Income</label>
<div class="col-xs-3">
<input name="parent.income" type="text" class="form-control" id="income" placeholder="Income" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Nationality</label>
<div class="col-xs-3">
<input name="student.nationality" type="text" class="form-control" id="nationality" placeholder="Ex: Indian"/>
</div>
<label class="col-xs-3 control-label">Religion</label>
<div class="col-xs-3">
<input name="student.religion" type="text" class="form-control" id="religion" placeholder="EX: Hindhu Muslim..."/>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Caste</label>
<div class="col-xs-3">
<input name="student.caste" type="text" class="form-control" id="caste" placeholder="Ex:Okkaliga,Lingayath"/>
</div>
<label class="col-xs-3 control-label">Category</label>
<div class="col-xs-3">
<input name="student.category" type="text" class="form-control" id="category" placeholder="Ex:3a,2a...."/>
</div>
</div>
<div class="form-group">
<label class="col-xs-11 control-label"></label>
<div class="col-xs-20 ">
<button type="button" class="btn btn-primary">Next</button>
</div>
</div>
</div>
<!--Contact info tab div -->
<div role="tabpanel" class="tab-pane" id="profile">
<div class="form-group">
<label class="col-xs-2 control-label">Phone Number</label>
<div class="col-xs-3">
<input name="parent.phoneNumber" type="text" class="form-control" id="phoneNumber" placeholder="Phone Number"/>
</div>
<label class="col-xs-3 control-label">Emergency Contact</label>
<div class="col-xs-3">
<input name="parent.emergencyContact" type="text" class="form-control" id="emergencyContact" placeholder="Emergency Contact" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Email</label>
<div class="col-xs-9">
<input name="parent.emailID" type="text" class="form-control" id="email" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Permanent Address</label>
<div class="col-xs-3">
<textarea class="form-control" name="student.permanentAddress" rows="5" cols="30" />
</div>
<label class="col-xs-3 control-label">Present Address</label>
<div class="col-xs-3">
<textarea class="form-control" name="student.presentAddress" rows="5" cols="30" />
</div>
</div>
<div class="form-group">
<label class="col-xs-11 control-label"></label>
<div class="col-xs-20 ">
<button type="button" class="btn btn-primary">Next</button>
</div>
</div>
</div>
<!--Previous Educational info tab div -->
<div role="tabpanel" class="tab-pane" id="messages">
<div class="form-group">
<label class="col-xs-2 control-label">School Name</label>
<div class="col-xs-9">
<input name="student.previousSchoolName" type="text" class="form-control" id="schoolName" placeholder="Previous School Name"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">From</label>
<div class="col-xs-3 ">
<div class="input-group input-append date" id="from">
<input name="student.fromYear" type="text" class="form-control" id="from" placeholder="From Year"/>
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<label class="col-xs-3 control-label">To</label>
<div class="col-xs-3 ">
<div class="input-group input-append date" id="to">
<input name="student.toYear" type="text" class="form-control" id="to" placeholder="To Year"/>
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Reason for Change</label>
<div class="col-xs-9">
<input name="student.reasonForChange" type="text" class="form-control" id="reasonForChange" placeholder="Reason for Change"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Tc Document</label>
<div class="col-xs-9">
<input type="file" class="form-control" name="student.tcDocument" />
</div>
</div>
<div class="form-group">
<label class="col-xs-11 control-label"></label>
<div class="col-xs-20 ">
<button type="Submit" class="btn btn-success">Finish</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- /.form-body -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>

Page center solution:
Your #page-wrapper element has margin-right of 250px, removing this will centre the element:
#page-wrapper {
...
margin-right: 0;
...
}
Tab overflow solution:
The overflow problem of your tabs occurs because you have set a width of 500px their child a element using in the following rule:
.nav-tabs > li > a {
...
width:500px;
}
In code you have a rule that targets the following elements .nav>li>a and specifies that they should be displayed as block elements, with this being the case, you can remove the width on the above selector and it should fix the overflowing problem because block elements will take 100% of the width of their container by default.
View the working demo below:
#page-wrapper {
margin-left: 0 !important;
}
.nav-tabs {
border-bottom: 6px solid #DDD;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:focus {
border: none;
background: #f8f8f8;
}
.nav-tabs>li.active>a:hover {
border-width: 0;
background: #f8f8f8;
}
.nav-tabs>li>a {
border: none;
color: #666;
padding: 10px 95px;
/*width: 500px;*/
}
.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
border: none;
background: #f8f8f8;
}
.nav-tabs>li>a::after {
content: "";
background: #00a8a8;
height: 7px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
.nav-tabs>li.active>a::after,
.nav-tabs>li:hover>a::after {
transform: scale(1);
}
.tab-nav>li>a::after {
background: #21527d none repeat scroll 0% 0%;
color: #fff;
}
.tab-pane {
padding: 15px 0;
}
.tab-content {
padding: 20px
}
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<!--bootstrapValidator-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Date picker css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">
<b>Student Self Enrollment</b>
</h3>
</div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" role="tablist">
<li class="col-lg-4 role=" presentation " class="active ">Personal Info</li>
<li class="col-lg-4 role="presentation">Contact Info</li>
<li class="col-lg-4 role=" presentation ">Previous Educational Info</li>
</ul>
</div>
<!-- /.panel-heading -->
<div class="panel-body ">
<div class="form-body ">
<form class="form-horizontal " method="post ">
<div class="tab-content ">
<!--Personal info tab div -->
<div role="tabpanel " class="tab-pane active " id="home ">
<h3 style="color: red ">Student Details</h3>
<div class="form-group ">
<label class="col-xs-2 control-label ">Student Name</label>
<!--<div class="group ">-->
<div class="col-xs-3 ">
<input name="student.studentFirstName " type="text " class="form-control " id="studentFirstName " placeholder="First Name " />
</div>
<div class="col-xs-3 ">
<input name="student.studentMiddleName " type="text " class="form-control " id="studentMiddleName " placeholder="Middle name " />
</div>
<div class="col-xs-3 ">
<input name="student.studentLastName " type="text " class="form-control " id="studentLastName " placeholder="Last name " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Date-of-birth</label>
<div class="col-xs-3 ">
<div class="input-group input-append date " id="studentDOB ">
<input name="student.studentDOB " type="text " class="form-control " placeholder="Date-Of-Birth " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
</div>
<label class="col-xs-3 control-label ">Gender</label>
<div class="col-xs-3 ">
<div class="btn-group " data-toggle="buttons ">
<label class="btn btn-default ">
<input type="radio " name="optradio ">Male</label>
<label class="btn btn-default ">
<input type="radio " name="optradio ">Female</label>
</div>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Place of Birth </label>
<div class="col-xs-3 ">
<input name="student.studentBirthPlace " type="text " class="form-control " id="studentBirthPlace " placeholder="Place of Birth " />
</div>
<label class="col-xs-3 control-label ">Mother Toungue</label>
<div class="col-xs-3 ">
<input name="student.studentMotherTounge " type="text " class="form-control " id="studentMotherTounge " placeholder="Mother Toungue " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Blood Group </label>
<div class="col-xs-3 ">
<input name="student.studentBloodGroup " type="text " class="form-control " id="studentBloodGroup " placeholder="Blood Group " />
</div>
<label class="col-xs-3 control-label ">Class Name</label>
<div class="col-xs-3 ">
<select class="form-control " id="sel1 ">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Image</label>
<div class="col-xs-9 ">
<input type="file " class="form-control " name="student.studentImage "/>
</div>
</div>
<h3 style="color: red ">Parent Details</h3>
<div class="form-group ">
<label class="col-xs-2 control-label ">Father Name</label>
<div class="group ">
<div class="col-xs-3 ">
<input name="parent.fatherFirstName " type="text " class="form-control " id="fatherFirstName " placeholder="First name " />
</div>
</div>
<div class="col-xs-3 ">
<input name="parent.fatherMiddleName " type="text " class="form-control " id="fatherMiddleName " placeholder="Middle name " />
</div>
<div class="col-xs-3 ">
<input name="parent.fatherLastName " type="text " class="form-control " id="fatherLastName " placeholder="Last name " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Mother Name</label>
<div class="group ">
<div class="col-xs-3 ">
<input name="parent.motherFirstName " type="text " class="form-control " id="motherFirstName " placeholder="First name " />
</div>
</div>
<div class="col-xs-3 ">
<input name="parent.motherMiddleName " type="text " class="form-control " id="motherMiddleName " placeholder="Middle name " />
</div>
<div class="col-xs-3 ">
<input name="parent.motherLastName " type="text " class="form-control " id="motherLastName " placeholder="Last name " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Gaurdian Name</label>
<div class="group ">
<div class="col-xs-3 ">
<input name="parent.gaurdianFirstName " type="text " class="form-control " id="gaurdianFirstName " placeholder="First name " />
</div>
</div>
<div class="col-xs-3 ">
<input name="parent.gaurdianMiddleName " type="text " class="form-control " id="gaurdianMiddleName " placeholder="Middle name " />
</div>
<div class="col-xs-3 ">
<input name="parent.gaurdianLastName " type="text " class="form-control " id="gaurdianLastName " placeholder="Last name " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Occupation</label>
<div class="col-xs-9 ">
<input name="parent.occupation " type="text " class="form-control " id="occupation " placeholder="Occupation " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Qualification</label>
<div class="col-xs-3 ">
<input name="parent.qualification " type="text " class="form-control " id="qualification " placeholder="Qualification " />
</div>
<label class="col-xs-3 control-label ">Income</label>
<div class="col-xs-3 ">
<input name="parent.income " type="text " class="form-control " id="income " placeholder="Income " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Nationality</label>
<div class="col-xs-3 ">
<input name="student.nationality " type="text " class="form-control " id="nationality " placeholder="Ex: Indian "/>
</div>
<label class="col-xs-3 control-label ">Religion</label>
<div class="col-xs-3 ">
<input name="student.religion " type="text " class="form-control " id="religion " placeholder="EX: Hindhu Muslim... "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Caste</label>
<div class="col-xs-3 ">
<input name="student.caste " type="text " class="form-control " id="caste " placeholder="Ex:Okkaliga,Lingayath "/>
</div>
<label class="col-xs-3 control-label ">Category</label>
<div class="col-xs-3 ">
<input name="student.category " type="text " class="form-control " id="category " placeholder="Ex:3a,2a.... "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-11 control-label "></label>
<div class="col-xs-20 ">
<button type="button " class="btn btn-primary ">Next</button>
</div>
</div>
</div>
<!--Contact info tab div -->
<div role="tabpanel " class="tab-pane " id="profile ">
<div class="form-group ">
<label class="col-xs-2 control-label ">Phone Number</label>
<div class="col-xs-3 ">
<input name="parent.phoneNumber " type="text " class="form-control " id="phoneNumber " placeholder="Phone Number "/>
</div>
<label class="col-xs-3 control-label ">Emergency Contact</label>
<div class="col-xs-3 ">
<input name="parent.emergencyContact " type="text " class="form-control " id="emergencyContact " placeholder="Emergency Contact " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Email</label>
<div class="col-xs-9 ">
<input name="parent.emailID " type="text " class="form-control " id="email " placeholder="Email "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Permanent Address</label>
<div class="col-xs-3 ">
<textarea class="form-control " name="student.permanentAddress " rows="5 " cols="30 " />
</div>
<label class="col-xs-3 control-label ">Present Address</label>
<div class="col-xs-3 ">
<textarea class="form-control " name="student.presentAddress " rows="5 " cols="30 " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-11 control-label "></label>
<div class="col-xs-20 ">
<button type="button " class="btn btn-primary ">Next</button>
</div>
</div>
</div>
<!--Previous Educational info tab div -->
<div role="tabpanel " class="tab-pane " id="messages ">
<div class="form-group ">
<label class="col-xs-2 control-label ">School Name</label>
<div class="col-xs-9 ">
<input name="student.previousSchoolName " type="text " class="form-control " id="schoolName " placeholder="Previous School Name "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">From</label>
<div class="col-xs-3 ">
<div class="input-group input-append date " id="from ">
<input name="student.fromYear " type="text " class="form-control " id="from " placeholder="From Year "/>
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
</div>
<label class="col-xs-3 control-label ">To</label>
<div class="col-xs-3 ">
<div class="input-group input-append date " id="to ">
<input name="student.toYear " type="text " class="form-control " id="to " placeholder="To Year "/>
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Reason for Change</label>
<div class="col-xs-9 ">
<input name="student.reasonForChange " type="text " class="form-control " id="reasonForChange " placeholder="Reason for Change "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Tc Document</label>
<div class="col-xs-9 ">
<input type="file " class="form-control " name="student.tcDocument " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-11 control-label "></label>
<div class="col-xs-20 ">
<button type="Submit " class="btn btn-success ">Finish</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- /.form-body -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>

get values from group and radio buttons and remove on change or deselect.?

I want to achieve goal to add multiple input values total in single input using javascript only but how far i tried i can get it working but on change radio button instead it removes previous value and add new like rest inputs from total input field getting values it is not doing same it is adding another value to same input as previous.
get_template_part('content-parts/page', 'banner');
?>
<style type="text/css">
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 13px 13px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.border {
border-bottom-color: azure;
border-style: groove;
}
</style>
<div id="container_full">
<h1 class="heading_order_now">Please complete the order form</h1>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<P><h4 style="color:red">IMPORTANT ORDERING INFORMATION:</h4>
After submitting your order, an account manager will call you between the
hours of 9 am to 7 pm Mondays to Saturday to get payment information(Visa,
MasterCard, Amex or Discover). The order comes with a 10 Day Trial Refund
Window. If you are not satisfy with the performance, just return the
package to us within the 10 Day Trial period for a full refund. <br> <br>
Thanks!<br>
</P>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-top:30px; background-color:#f3f3f3">
<!-- content -->
<form method="post" enctype="multipart/form-data"
action="https://www.evdodepotusa.com/orderformprocess.php" id="affreg">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> First Name:</label>
<input type="text" class="form-control" name="fname" id="fname" aria-
describedby="nameHelp" placeholder="Enter First Name" required="required">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> Last Name:</label>
<input type="text" class="form-control" name="lname" id="lname" aria-
describedby="nameHelp" placeholder="Enter Last Name" required="required">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> Address:</label>
<input type="text" class="form-control" name="address" id="address" aria-describedby="addressHelp" placeholder="Enter Address" >
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> City:</label>
<input type="text" class="form-control" name="city" id="city" aria-describedby="cityHelp" placeholder="Enter City" required="required" >
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> State:</label>
<input type="text" class="form-control" name="state" id="state" aria-describedby="StateHelp" placeholder="Enter State" required="required" >
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> Zip Code:</label>
<input type="text" class="form-control" name="zipcode" id="zipcode" aria-describedby="ZipCodeHelp" placeholder="Enter Zip Code" required="required" >
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> Phone Number:</label>
<input type="number" class="form-control" name="phone" id="phone" aria-describedby="phoneHelp" placeholder="Enter Phone" required="required">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> Email Address:</label>
<input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="Enter email" required="required">
</div>
</div>
<h1 style="font-size: 25px; color: #1294c7;">Select Wireless Router and Subscription Package(Network 1 Works w/Routers Only):</h1>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-top:10px; background-color:#f3f3f3">
<!----------- PACKAGE 1 START ---------------------------------------------------->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center; padding-top:15px;">3G Unlimited Plan</h3>
<h4 style="text-align: center; width:100%;">$<span id="3g">119.00</span>
<br><span style="font-size:12px">Monthly</span></h4>
<p>
Upload: 1.5 Mbps<br>
Download: 4.5 Mbps<br>
</p>
<label class="btn btn-info btn-circle btn-lg">
<input id="first" checked="checked" name="package" type="radio" value="3G
Unlimited Plan (network_price=$119, download_speed=4.5 Mbps,
upload_speed=1.5 Mbps)" onclick="getElementById('dekhao').value =+ 119;
findTotal();
" /> <i class="glyphicon glyphicon"></i></label>
</div>
<!----------- PACKAGE 1 END & PACKAGE 2 START ----------------------
------------------------------>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center;
padding-top:15px;">4G LTE 75 Gig Plan</h3>
<h4 style="text-align: center; width:100%;">$<span id="4g">119.00</span>
<br><span style="font-size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>
<label class="btn btn-info btn-circle btn-lg">
<input id="141" checked="checked" name="package" type="radio" value="4G LTE
75 Gig Plan (network_price=$119,download_speed=16.5 Mbps,upload_speed=4.5
Mbps)" onclick="getElementById('dekhao').value =+ 120;
findTotal();
" /> <i class="glyphicon glyphicon"></i></label>
</div>
<!----------- PACKAGE 2 END & PACKAGE 3 START ----------------------
------------------------------>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center;
padding-top:15px;">Truly Unlimited 4G LTE Plan</h3>
<h4 style="text-align: center; width:100%;">$<span id="lte">139.00</span>
<br><span style="font-size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>
<label class="btn btn-info btn-circle btn-lg">
<input id="142" checked="checked" name="package" type="radio" value="Truly
Unlimited 4G LTE Plan (network_price=$139, download_speed=16.5 Mbps,
upload_speed=4.5 Mbps)" /> <i class="glyphicon glyphicon" checked></i>
</label>
</div>
<!----------- PACKAGE 3 END ------------------ ---------------------------
------------------------->
<div class="clearfix"></div>
<!--------------------------------------------------------------------------
----------------------------------NEW 3 PACKAGES START----------------------
----->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-
top:10px; background-color:#f3f3f3">
<!----------- PACKAGE 4 START ---------------------------------------
------------->
div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center;
padding-top:15px;">4G Lte 30 Gig+ Plan</h3>
<h4 style="text-align: center; width:100%;">$59.00 <br><span style="font-
size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>
Only on Wireless Network 1<br>
<label class="btn btn-info btn-circle btn-lg">
<input id="140" name="package" type="radio" value="4G Lte 30 Gig+ Plan
(network_price=$59,download_speed=16.5 Mbps,upload_speed=4.5 Mbps)" /> <i
class="glyphicon glyphicon"></i></label>
</div>
<!----------- PACKAGE 4 END & PACKAGE 5 START ----------------------
------------------------------>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center;
padding-top:15px;">4G Lte 40 Gig+ Plan</h3>
<h4 style="text-align: center; width:100%;">$69.00 <br><span style="font-
size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>
Only on Wireless Network 1<br>
<label class="btn btn-info btn-circle btn-lg">
<input id="140" name="package" type="radio" value="4G Lte 40 Gig+ Plan
(network_price=$69,download_speed=16.5 Mbps,upload_speed=4.5 Mbps)" /> <i
class="glyphicon glyphicon"></i></label>
</div>
<!----------- PACKAGE 5 END & PACKAGE 6 START ----------------------
------------------------------>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center;
padding-top:15px;">4G Lte 50 Gig+ Plan</h3>
<h4 style="text-align: center; width:100%;">$79.00 <br><span style="font-
size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>
Only on Wireless Network 1<br>
<label class="btn btn-info btn-circle btn-lg">
<input id="140" name="package" type="radio" value="4G Lte 50 Gig+ Plan
(network_price=$79,download_speed=16.5 Mbps,upload_speed=4.5 Mbps)" /> <i
class="glyphicon glyphicon"></i></label>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 border" style="
margin-top:30px; background-color:#f3f3f3; padding: 5px;" >
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<div >
<input type="checkbox" name="router" value="139"><span class="font"
style="font-size: 16px !important;">Router Activation: $199</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<div>
<input type="checkbox" name="hotspot" value="139"><span class="font"
style="font-size: 16px !important;">Or Hotspot Activation: $139</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<div>
<input type="checkbox" name="staticIp" value="15.00"><span class="font"
style="font-size: 16px !important;">Static IP(Optional): $15.00
Monthly</span>
</div>
</div>
</div>
<div class="clearfix"></div><br><br>
<!----------- PACKAGE 6 END 2 new products ------------------ ------------
---------------------------------------->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-
top:10px; background-color:#f3f3f3">
<h2 style="font-size: 25px; color: #1294c7;"> Wireless Booster Antennas
Increases Signal and Speeds::</h2>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-
align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center;
padding-top:15px;">MIMO Booster Antenna</h3>
<h4 style="text-align: center; width:100%;">$179.00</h4>
<center><img src="https://www.evdodepotusa.com/wp-
content/uploads/2017/07/p2-300x300.png" alt="" width="150" height="150" />
</center>
<center><p>MiMo & Diversity 2G/3G/4G/LTE Wideband Wall Mount/Desk Mount
Hybrid 698-960/1710-2700 Mhz Antenna</p></center>
<label class="btn btn-info btn-circle btn-lg"><input id="140"
name="boosterantena" type="radio" value="MIMO Booster Antenna
(network_price=$179)" onclick="getElementById('dekhao2').value =+ 200;
findTotal();" /> <i class="glyphicon glyphicon"></i></label></div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-
align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center;
padding-top:15px;">Super Dual Yagi Antenna</h3>
<h4 style="text-align: center; width:100%;">$199.00</h4>
<center><img src="https://www.evdodepotusa.com/wp-
content/uploads/2017/07/p4-1-173x170.jpg" alt="" width="150" height="150" />
</center>
<center><p>For fair coverage, better signal, faster speeds,to connect to a
cellular tower located up to 15 miles away</p></center>
<label class="btn btn-info btn-circle btn-lg"><input id="140"
name="boosterantena" type="radio" value="Super Dual Yagi Antenna
(network_price=$199)" /> <i class="glyphicon glyphicon"></i></label></div>
</div>
<!----------- END of 2 new products ------------------ -------------------
--------------------------------->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-
top:10px; background-color:#f3f3f3">
<h2 style="font-size: 25px; color: #1294c7;">Select Shipping Method:</h2>
<input id="140" checked="checked" name="shipping" type="radio" value="USPS
Priority ($20.00)" /> USPS Priority: $20.00</label><br>
<input id="140" checked="checked" name="shipping" type="radio" value="USPS
Overnight($55.00)" /> USPS Overnight: $55.00</label>
<input type="number" value="0" class="qty1" name="qty" id="dekhao">
<input type="hidden" value="0" class="qty1" name="qty" id="dekhao2">
<input type="hidden" value="0" class="qty1" name="qty" id="dekhao3">
<input type="number" value="0" class="total" name="qty" id="total">
</div>
<div class="clearfix"></div>
<br><br>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-
top:10px; background-color:#f3f3f3">
<fieldset>
<h2 style="font-size: 25px; color: #1294c7;">Payment</h2>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group"> <label class="col-sm-3 control-label"
for="card-holder-name">Name on Card</label> <div class="col-sm-9">
<input type="text" class="form-control" name="card-holder-name"
id="card-holder-name" placeholder="Card Holder's Name">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="card-number">Card
Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="card-number" id="card-
number" placeholder="Debit/Credit Card Number">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="expiry-month">Expiration
Date</label>
<div class="col-sm-9">
<div class="row">
<div class="col-xs-6">
<select class="form-control col-sm-2" name="expiry-month"
id="expiry-month">
<option>Month</option>
<option value="01">Jan (01)</option>
<option value="02">Feb (02)</option>
<option value="03">Mar (03)</option>
<option value="04">Apr (04)</option>
<option value="05">May (05)</option>
<option value="06">June (06)</option>
<option value="07">July (07)</option>
<option value="08">Aug (08)</option>
<option value="09">Sep (09)</option>
<option value="10">Oct (10)</option>
<option value="11">Nov (11)</option>
<option value="12">Dec (12)</option>
</select>
</div>
<div class="col-xs-6">
<select class="form-control" name="expiry-year">
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
<option value="22">2022</option>
<option value="23">2023</option>
<option value="24">2024</option>
<option value="25">2025</option>
<option value="26">2026</option>
<option value="27">2027</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="cvv">Card CVV</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="cvv" id="cvv"
placeholder="Security Code">
</div>
</div>
</div>
</fieldset>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p> </p>
</div>
<br><br>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button type="submit" class="btn btn-primary btn-lg btn-
block">Submit</button>
<p> </p>
</form>
</div>
</div>
</div>
Here is written my javascript for page. and function is called on radiobutton onclick event.
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
<!-- End / content -->
<?php get_footer(); ?>

Form field values are not getting passed into JSON object correctly

This is my JSFiddle : https://jsfiddle.net/inchrvndr/7pwh9p8g/
The bordered form elements get cloned on click of "+" button.
The values of all the cloned form elements are getting passed into JSON except for the parent whose clone is being made.
On clicking "Save" button, you can see the alert for JSON object of all form field values except for the first bordered div.
Why is this so? Please help.
Thanks :)

I have solved this issue.
Here is the answered fiddle : AnswerFiddle
I added the Join Operator into the same "to-be-cloned" div and hid its div before cloning.
It becomes visible after cloning, that is, after clicking on, "+" button.
Now, all of the before clone and after cloned form fields' values are getting passed into the JSON.

try this..
UPDATE:
you have duplicate elements, like this one: id="op" there can be only one ID unique on page.. I suggest that you drop id's or generate them
$( document ).ready(function() {
$('#deleteRow').closest('.form-group').hide();
$('#addRow').on('click', function (e) {
var len = $('.child-border').length;
$('.parent-border-repeat').clone().find(':input').each(function (idx, ele) {
ele.name = ele.name + len;
ele.id = ele.id + len;
ele.value = '';
}).end().find('.form-group').toggle(true).end()
.toggleClass('parent-border-repeat child-border').hide()
.appendTo('#container').slideDown('slow');
});
$('button.btn:contains("Save")').on('click', function (e) {
var jsonData = $('form.form-horizontal')
.find(':input:not(button)').get()
.reduce(function (acc, ele) {
acc[ele.id] = ele.value;
return acc;
}, {});
// console.log(jsonData);
alert(JSON.stringify(jsonData, null, 4));
});
$('#container').on('click', '[id^=deleteRow]', function(e) {
var jsonData = $(this).closest('.child-border, .parent-border-repeat')
.find(':input:not(button)').get()
.reduce(function (acc, ele) {
acc[ele.name || ele.id] = ele.value;
return acc;
}, {});
$(this).closest('.child-border, .parent-border-repeat').remove();
console.log(jsonData);
});
});
.navbar-nav li {
margin-top: 8px;
margin-bottom: 8px;
}
.tabs-container {
margin-top: 100px;
margin-bottom: 75px;
}
.parent-border-repeat{
display: none;
}
.parent-border, .child-border {
border: 1px solid #CCC;
border-radius: 4px;
padding: 15px;
margin-bottom: 15px;
}
.btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<ul class="nav navbar-nav">
<li>
<button class="btn btn-md btn-success">Login</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row tabs-container">
<div class="col-sm-offset-2 col-sm-8">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
Rules
</li>
<li>
Events
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="nameRules">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nameRules" name="nameRules" placeholder="Enter name"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="typeRules">Type:</label>
<div class="col-sm-10">
<select class="form-control" id="typeRules" name="typeRules">
<option>Type1</option>
<option>Type2</option>
<option>Type3</option>
<option>Type4</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="descriptionRules">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" cols="50" name="descriptionRules">XYZ</textarea>
</div>
</div>
<div class="parent-border col-sm-offset-2 col-sm-10">
<div class="form-group">
<div class="col-sm-offset-10">
<button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg"> <i class="glyphicon glyphicon glyphicon-trash"></i>
</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="elhs">Expression LHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="elhss" name="elhs" placeholder="Enter LHS" name="lhs"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="op">Operator</label>
<div class="col-sm-10">
<select class="form-control" id="opp" name="op">
<option>
<=</option>
<option>>=</option>
<option>!==</option>
<option>
<</option>
<option>></option>
<option>==</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="erhs">Expression RHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="erhss" name="erhs" placeholder="Enter RHS" name="rhs"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="datatype">Datatype:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="datatypee" name="datatype" placeholder="Enter datatype" name="datatype"></div>
</div>
</div>
<div class="parent-border-repeat col-sm-offset-2 col-sm-10">
<div class="form-group">
<div class="col-sm-offset-10">
<button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg"> <i class="glyphicon glyphicon glyphicon-trash"></i>
</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="joinop">Join Operator</label>
<div class="col-sm-10">
<select class="form-control" id="joinopp">
<option>&&</option>
<option>||</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="elhs">Expression LHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="elhs" name="elhs" placeholder="Enter LHS" name="lhs"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="op">Operator</label>
<div class="col-sm-10">
<select class="form-control" id="opp" name="op">
<option>
<=</option>
<option>>=</option>
<option>!==</option>
<option>
<</option>
<option>></option>
<option>==</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="erhs">Expression RHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="erhs" name="erhs" placeholder="Enter RHS" name="rhs"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="datatype">Datatype:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="datatype" name="datatype" placeholder="Enter datatype" name="datatype"></div>
</div>
</div>
<div id="container"></div>
<div class="form-group">
<div class="col-sm-offset-6">
<button type="button" id="addRow" class="btn btn-success btn-circle btn-lg">
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="tab2default">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="nameEvents">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nameEvents" name="nameEvents" placeholder="Enter name"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="typeRules">Type:</label>
<div class="col-sm-10">
<select class="form-control" id="typeRules" name="typeRules">
<option>Type1</option>
<option>Type2</option>
<option>Type3</option>
<option>Type4</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="descriptionEvents">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" cols="50" name="descriptionEvents">XYZ</textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-footer pull-right">
<ul class="nav navbar-nav">
<li>
<button class="btn btn-md btn-success">Save</button>
</li>
</ul>
</div>
</div>
</div>
</div>

Categories

Resources