How to remove side bar and place panel at center

How to remove side bar and place panel at center - javascript

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>

Related

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>

Suddenly my html started acting weird on an Angular project

I was coding a signUp page when I realized my inputs(checkbox and file) were texts instead of what they were supposed to be. I started undoing things to see what messed it up, and at some point when I deleted a simple input the error went away. I was investigating what in this input could have been causing the problem, but then the error came back without the input. There are no errors in the console or whatsoever.
Has anyone been some similar error?
area_x fields should be checkbox and the bottom input should be a type=file.
HTML:
<ng-form name="FormCadastro" enctype="multipart/form-data">
<div class="row ng-cloak">
<h2>Informação pessoal</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>{{ 'NAME' | translate }}</label>
<input type="text" class="form-control capitalized" ng-disabled="c.nome" ng-model="newUser.nome" name="nome" maxlength="255" required />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>{{ 'BIRTH_DATE' | translate }}</label>
<input type="text" placeholder="dd/mm/yyyy" class="form-control data-mask" ng-disabled="c.dataNascimento" ng-model="newUser.dataNascimento" name="dataNascimento" required/>
<!-- ng-required='!firefox && !safari' -->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" ng-hide="c.token">
<div class="form-group">
<label>{{ 'PASSWORD' | translate }}</label>
<input type="password" class="form-control" ng-model="newUser.senha" name="senha" minlength="6" required />
</div>
</div>
<div class="col-sm-6" ng-hide="c.token">
<div class="form-group">
<label>{{ 'PASSWORD_CONFIRMATION' | translate }}</label>
<input type="password" class="form-control" ng-model="newUser.confirmaSenha" name="confirmaSenha" minlength="6" match="senha" stopccp required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>{{ 'EMAIL' | translate }}</label>
<input type="email" class="form-control" ng-disabled="c.email" ng-model="newUser.email" name="email" maxlength="100" required />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>{{ 'EMAIL_CONFIRMATION' | translate }}</label>
<input type="email" class="form-control" ng-disabled="c.email" ng-model="newUser.confirmaEmail" name="confirmaEmail" maxlength="100" stopccp required />
</div>
</div>
</div>
<hr>
<h2>Endereço</h2>
<!-- address-line1 input-->
<div class="row ">
<div class="col-sm-12 form-group ">
<label>Endereço</label>
<input class="form-control " id="address-line1 " name="address-line1 " type="text " ng-model="newUser.address1" placeholder="Endereço ">
</div>
</div>
<!-- address-line2 input-->
<div class="row ">
<div class="col-sm-6 form-group ">
<label>Complemento</label>
<div>
<input class="form-control " id="address-line2 " name="address-line2 " ng-model="newUser.address2 " type="text " placeholder="Numero xx ">
</div>
</div>
<!-- city input-->
<div class="col-sm-6 form-group ">
<label>Cidade</label>
<div>
<input class="form-control " id="city " ng-model="newUser.city " name="city " type="text " placeholder="Cidade ">
</div>
</div>
</div>
<!-- region input-->
<div class="row ">
<div class="col-sm-6 form-group ">
<label>Estado</label>
<div>
<input class="form-control " id="state " ng-model="newUser.state " name="state " type="text " placeholder="Estado ">
</div>
</div>
<!-- postal-code input-->
<div class="col-sm-6 form-group ">
<label>CEP</label>
<div>
<input class="form-control " ng-model="newUser.zipCode " id="postal-code " name="postal-code " type="text " placeholder="CEP ">
</div>
</div>
</div>
<hr>
<div ng-if="!isCompany ">
<h2>Educação</h2>
<div class="row ">
<div class="col-sm-12 form-group ">
<label>Escola</label>
<input type="text " placeholder="Escola Estadual Profesor ... " class="form-control " ng-model="newUser.school ">
</div>
</div>
<div class="row ">
<div class="col-sm-12 ">
<h4>Áreas de interesse</h4>
<div class="checkbox ">
<label>
<input ng-model="newUser.checkbox.value1 " type="checkbox " value="area_1 " checked=" ">Area 1
</label>
</div>
<div class="checkbox ">
<label>
<input ng-model="newUser.checkbox.value2 " type="checkbox " value="area_2 "> Area 2
</label>
</div>
<div class="checkbox ">
<label>
<input ng-model="newUser.checkbox.value3 " type="checkbox " value="area_3 "> Area 3
</label>
</div>
</div>
</div>
<hr>
</div>
<div ng-if="isCompany ">
<h2>Quantidade de vagas disponíveis</h2>
<p class="help-block">Pode ser alterado depois na página de edição</p>
<div class="row ">
<div class="col-sm-12 ">
<h4>Áreas de interesse</h4>
<div class="form-group ">
<label>
Area 1
<input class="form-control " ng-model="newUser.interest_area_1 " type="text " value="0 " checked=" ">
</label>
</div>
<div class="form-group ">
<label>
Area 2
<input class="form-control " ng-model="newUser.interest_area_2 " type="text " value="0 ">
</label>
</div>
<div class="form-group ">
<label>
Area 3
<input class="form-control " ng-model="newUser.interest_area_3 " type="text " value="0 ">
</label>
</div>
</div>
</div>
<hr>
</div>
<div class="row ">
<div class="col-sm-offset-1 col-md-offset-1 col-sm-10 col-md-10 col-xs-12 ">
<div class="form-group hidden-overflow ">
<label>{{ 'DROP_PICTURES' | translate }}</label>
<input type="file " id="fileInput " />
</div>
<div class="cropArea ">
<img-crop image="newUser.myImage " area-type="square " result-image="newUser.myCroppedImage "></img-crop>
</div>
</div>
</div>
<div class="row ">
<div class="col-sm-offset-1 col-md-offset-1 col-sm-10 col-md-10 col-xs-12 ">
<div ng-controller="modalController ">
<div class="help-block " translate="REGISTER-TERMS-MESSAGE " translate-compile></div>
</div>
<button type="submit " class="btn btn-success btn-block " ng-click="enviar_primeiro_form() ">{{ 'NEXT' | translate }}</button>
<p>
<div class="spinner " ng-show="loading "></div>
</p>
</div>
</div>
</div>
</ng-form>

having a space in the input type confuses the browser
<div>
Working Check Box
<input type="checkbox">
</div>
<div>
not a check box
<input type="checkbox ">
</div>

I want a modal pop after the song ends in default audio player can any one help me with code

below is my modal i want this to open automatically once the song gets over in default audio player
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">
Don't Wait, Login now!</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Login</li>
<li>Registration</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email1" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm">
Submit</button>
Forgot your password?
</div>
</div>
</form>
</div>
<div class="tab-pane" id="Registration">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" id="namea" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
</select>
</div>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" id="emailField" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="txtEmail" placeholder="Email" <input type="text" />
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
Mobile</label>
<div class="col-sm-10">
<input type="text" id="txtPhoneNo" class="form-control" id="mobile" placeholder="Mobile" onkeypress="return isNumber(event)" />
</div>
</div>
<div class="form-group">
<label for="password" id="p1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" id="pass1" class="form-control" id="password" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Re-Enter Password</label>
<div class="col-sm-10">
<input type="password" id="pass2" class="form-control" id="password1" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="button" onclick="ValidateName();myFunction();ValidateNo();checkEmail();" class="btn btn-primary btn-sm" >
Save & Continue</button>
<button type="button" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="OR" class="hidden-xs">
OR</div>
</div>
<div class="col-md-4">
<div class="row text-center sign-with">
<div class="col-md-12">
<h3 class="other-nw">
Sign in with</h3>
</div>
<div class="col-md-12">
<div class="btn-group btn-group-justified">
Facebook <a href="#" class="btn btn-danger">
Google +</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Login And Register -->
<!-- Java scripts -->
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".pop").click(function () {
$("#myModal").modal();
});
});
</script>

Html5 audio player has events which will get triggered when the audio stops playing
var aud = document.getElementById("myAudio");
aud.onended = function() {
alert("The audio has ended");
};
Refer this page

Form.Serialize with checkbox array

I'm submitting a form through JQuery by using the form.serialize method. But that same form has an array of checkboxes, which is dynamically genetrated by a PHP function
This is the form:
<form class="form" id="formNewClient" role="form">
<ul class="nav nav-tabs">
<li class="active"><i class="fa fa-user"></i> Dados Cliente</li>
<li><i class="fa fa-phone"></i> Dados Phonepark</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="clientdata">
<div class="row">
<div class="col-md-12">
<div class="page-header"><h3>Dados Pessoais</h3></div>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="name">Nome Completo:*</label>
<input type="text" name="clientName" class="form-control" placeholder="Nome Completo do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="email">Email:</label>
<input type="text" name="clientEmail" class="form-control" placeholder="Email Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="addressone">Morada:</label>
<input type="text" name="clientAddressone" class="form-control" placeholder="Morada do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="address2">Morada (cont.):</label>
<input type="text" name="clientAddresstwo" class="form-control" placeholder="Morada do Utilizador (cont.)">
</div>
<div class="form-group col-md-3">
<label for="postalcode">Código Postal:</label>
<input type="text" name="clientCPostal" class="form-control" placeholder="Código Postal">
</div>
<div class="form-group col-md-3">
<label for="city">Localidade:</label>
<input type="text" name="clientCity" class="form-control" placeholder="Localidade">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="clientNif">NIF</label>
<input type="text" name="clientNif" class="form-control " placeholder="NIF">
</div>
<div class="form-group col-md-4">
<label for="clientBirthdate">Data de Nascimento</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD">
<input type='text' name="clientBirthdate" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-4">
<label for="sex">Sexo:</label>
<br>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="M">
Masculino
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="F">
Feminino
</label>
</div>
</div>
</div>
<!--END CLIENTDATA-->
<div class="tab-pane" id="phoneparkdata">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Dados Phonepark</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Documentos:</h4></div>
<div class="form-group col-md-4">
<label for="document">Tipo de Documento:</label>
<select name="documenttype" class="form-control">
<?php selectListDocuments();?>
</select>
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento:*</label>
<input type="text" name="documentNumber" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento (Secundário):</label>
<input type="text" name="documentNumberSec" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Comunicações:</h4></div>
<div class="form-group col-md-4">
<label for="phone1">Telemóvel:*</label>
<input type="text" name="clientPhonePri" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="phone2">Telemóvel Secundário:</label>
<input type="text" name="clientPhoneSec" class="form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<h4>Perfil:</h4>
<label for="profile">Perfil(s) a utilizar:*</label>
<?php
profileCheckBoxes();
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="activationDate">Data de Activação:</label>
<div class="form-group">
<div class='input-group date' id='inputactivationDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientActivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="limitDate">Data de Limite:</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientDeactivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
</div>
</div>
<!--END PHONEPARKDATA-->
</div>
<!--END TAB-CONTENT-->
<div class="row">
<div class="col-md-4 col-lg-4 pull-right">
<button type="submit" class="btn btn-success" name="submitNewClient" id="submitNewClient"><i class="fa fa-plus"></i> Adicionar Cliente</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
</div>
</div>
</form>
And this is the php function that generates the checkboxes:
function profileCheckBoxes(){
$queryListProfiles = "SELECT * FROM perfil";
$listProfiles = mysqli_query($GLOBALS['dbc'],$queryListProfiles);
$numProfiles = mysqli_num_rows($listProfiles);
if($numProfiles !=""){
while($row = mysqli_fetch_array($listProfiles)){
?>
<label class="checkbox-inline">
<input type="checkbox" value="<?php echo $row['id']?>" name="profiles[]">
<?php echo $row['Nome']; ?>
</label>
<?php
}
}
}
How can I submit the form with form.serialize in Jquery and in the PHP side process the checkbox so I can extract the values from the checkbox array?

This jQuery documentation page explains how to use the serialize function:
http://api.jquery.com/serialize/
If you then pass the output to your php page using POST, in the PHP script the checked values will be stored in $_POST['profiles'] as an array. So to loop through the values of the checked boxes you could use:
foreach ($_POST['profiles'] as $profile) {
//process code here
}

jQuery's form.serialize only pass checksboxes that are checked.
if you want all your checkboxes to get passed to your server consider to generate also hidden inputs to store those values.
I would also change the checkboxes name to "profiles"

Develop Reference

JavaScript is the programming language of the Web.

How to remove side bar and place panel at center - javascript

Related

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

Form field values are not getting passed into JSON object correctly

Suddenly my html started acting weird on an Angular project

I want a modal pop after the song ends in default audio player can any one help me with code

Form.Serialize with checkbox array

Categories

Resources