Suddenly my html started acting weird on an Angular project

Suddenly my html started acting weird on an Angular project - javascript

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>

Related

Multistep form won't move to the next form fields

This is my liveire component for handling logic. I am unable to move to the next step as the next button is not showing or is hidden. I tried using switch statement but to no avail.
I can't seem to figure our where the error is plus i am new to livewire.
Any help is greatly appreciated.
Thank You
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
class CpdApplicationForm extends Component
{
use WithFileUploads;
// Forms Components Go Here
public int $totalSteps = 5;
public int $currentStep = 1;
public function mount()
{
$this->currentStep = 1;
}
public function render()
{
return view('livewire.cpd-application-form');
}
public function increaseStep()
{
// $this->resetErrorBag();
$this->validateData();
$this->currentStep++;
if ($this->currentStep > $this->totalSteps) {
$this->currentStep = $this->totalSteps;
}
}
public function decreaseStep()
{
$this->resetErrorBag();
$this->currentStep--;
if ($this->currentStep < 1) {
$this->currentStep = 1;
}
}
}
This is the livewire blade component.
<form wire:submit.prevent="register">
#if ($currentStep == 1)
#endif
#if ($currentStep == 2)
<div class="step-two">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 2/5 - Personal Details</div>
<div class="card-body">
<div class="row">
<div class="col-12 ">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Full Name</label>
<input type="text" class="form-control" placeholder="Name Of Personnel "
wire:model="full_name" required>
<span class="text-danger">#error('full_name'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Phone</label>
<input type="text" class="form-control" placeholder="Phone Number"
wire:model="phone">
<span class="text-danger">#error('phone'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Email</label>
<input type="text" class="form-control"
placeholder="Your Organization Issued Email Address"
wire:model="email">
<span class="text-danger">#error('email'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Service Type</label>
<select class="form-control" wire:model="service_type" required>
<option value="" selected>Select Service Type</option>
<option value="United States">Accreditation Only</option>
<option value="India">Accreditation & Venue</option>
<option value="Rwanda">Accreditation, Venue & Facilitation</option>
</select>
<span class="text-danger">#error('country'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">MSSI Liaison</label>
<select class="form-control" wire:model="liaison">
<option value="" selected>Select Your Point Of Contact At MSSI</option>
<option value="United States">Miss Victoria Koomson</option>
<option value="India">Mr. Emmanuel Addo Charwetey</option>
<option value="Rwanda"></option>
<option value="Nigeria">Nigeria</option>
<option value="Phillipines">Phillipines</option>
<option value="Canada">Canada</option>
<option value="Bangladesh">Bangladesh</option>
</select>
<span class="text-danger">#error('country'){{ $message }}#enderror</span>
</div>
</div>
{{-- <div class="col-md-6">--}}
{{-- <div class="form-group">--}}
{{-- <label for="">City</label>--}}
{{-- <input type="text" class="form-control" placeholder="Enter city" wire:model="city">--}}
{{-- <span class="text-danger">#error('city'){{ $message }}#enderror</span>--}}
{{-- </div>--}}
{{-- </div>--}}
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 3)
<div class="step-three">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 3/5 - Education | Training</div>
<div class="card-body">
<div class="row">
<div class="col-12 ">
<div class="row">
<div class="col-md-12">
<div class="form-group mt-15">
<label class="input-label"> Please enter your learning objectives for this
course (a maximum of five and a
minimum
3) <br><b>- Should reflect measurable outcomes of the topic.</b></br>
</label>
<textarea id="summernote" name="description"
class="form-control #error('description') is-invalid #enderror"
placeholder="{{ trans('forms.webinar_description_placeholder') }}">{!! !empty($webinar) ? $webinar->description : old('description') !!}</textarea>
#error('description')
<div class="invalid-feedback">
{{ $message }}
</div>
#enderror
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
<b>Target audience (Professional roles)</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks">
Consultants
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
Training Grades
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Other
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
<b>Teaching Methods</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Lectures
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
Discussion Group
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Quizzes
MCQs
etc
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="card-body">
<b>Possible Date(s)</b> of training programme.
</div>
<div class="col-md-6">
<div id="date-fields">
<label>Select Date</label>
<input type="date" class="btn btn-primary btn-sm mt-3" id="date-picker"
name="dates[]" multiple
value="{{ old('dates.*') }}">
#error('dates.*')
<div class="alert alert-danger">{{ $message }}</div>
#enderror
</div>
</div>
</div>
<div class="col-md-4">
Tap 'Add Date'
<button id="add-date-btn" type="button"
class="btn btn-primary btn-sm mt-3">Add Date
</button>
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 4)
<div class="step-four">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 4/5 - Facilitators | Speakers | Test Questions
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ updated Curriculum Vitae</b>. Note that the acceptable
format is PDF.
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ electronic photograph </b>. Note that the acceptable
format is PDF. <br>- Should be professionally inclined </br>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ E-Signature or of person co-signing </b> the certificate.
Note that the
acceptable
formats are jpg and png. <br>- Lead speaker signs in the case of multiple
facilitators </br>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card-body">
Please upload your <b>pretest questions</b>. Note that the acceptable formats
are
Microsoft
Word & PDF. <br>- Two option answers (True/False) <b>or</b></br> <br>- Four
option
answers
(E.g. a, b, c, d or I, II, III, IV)</br>
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-6">
<div class="card-body">
Please upload your <b>post questions</b>. Note that the acceptable formats are
Microsoft
Word & PDF. <br>- Two option answers (True/False) <b>or</b></br> <br>- Four
option
answers
(E.g. a, b, c, d or I, II, III, IV)</br>
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 5)
<div class="step-five">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 5/5 - Facility | Platform</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>conference hall</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
Arrangement of <b>catering services</b> .ie food, drinks etc.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>online webinar platform</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>online on-demand platform</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
</div>
</div>
</div>
#endif
<div class="action-buttons d-flex justify-content-between bg-white pt-2 pb-2">
#if ($currentStep == 1)
<div></div>
#endif
{{----}}
#if ($currentStep == 2 || $currentStep == 3 || $currentStep == 4 || $currentStep == 5)
<button type="button" class="btn btn-md btn-secondary">Back</button>
#endif
{{----}}
#if ($currentStep == 1 || $currentStep == 2 || $currentStep == 3 || $currentStep == 4)
<button type="button" class="btn btn-md btn-success">Next</button>
#endif
#if ($currentStep == 5)
<button type="submit" class="btn btn-md btn-primary">Submit</button>
#endif
</div>
</form>

validation of input element before cloning

I have group of input elements in my form. The user have to add rows to insert multiple values for different date transaction. Now before adding another row, I have to validate the date field and amount field.
My form:
<div id="content_add" class="d-none">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<div class="row ">
<div class="col-md-2 ">From Location</div>
<div class="col-md-1 ">From Date</div>
<div class="col-md-2 ">To Location</div>
<div class="col-md-1 ">To Date</div>
<div class="col-md-1 ">Expenses</div>
<div class="col-md-1 ">
<i class="fa fa-plus"></i> add
</div>
</div>
<div id="content_show">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<script>
$('#add_servicing').click(function (e) {
e.preventDefault();
let html_clone = $('#content_add').html();
$('#content_show').append(html_clone);
});
</script>
When the user presses the add button, I have to check for the added row, whether from date is smaller than to date or not and expenses should be always be less than 2500 for each row. How can I do this?

How to implement radio button check in JSP JavaScript?

I have created a web application (i.e. an Ecommerce site). Here I have implemented a radio button where I am selecting one from two options. When I select any of them, then other elements should be visible. For example: I have a time slot option. When I click on multi option (from radio button check) then there are 5 or 6 more options should be displayed. And when I select uni option (from radio button check) then there are 1 option should be visible. I have done with that part. I got stuck where I need to send all those parameters to my servlet controller.
I want when multi option selected then only those 5 or 6 parameters should be sent when forms submitted. Below code is to show and hide div for selected radio button. I am facing problem when I select uni option, then I am getting as message - some parameters missing.
function selectoption(id){
if(id == 'multitime'){
document.getElementById('multidiv').style.display= 'contents';
document.getElementById('unidiv').style.display = 'none';
}else{
document.getElementById('unidiv').style.display = 'contents';
document.getElementById('multidiv').style.display = 'none';
}
}
Below code is to submit all data of form and send to controller of springboot.
function setpincode(){
var pincode = document.getElementById('pincode').value;
var delivercityid = document.getElementById('deliverycityid').value;
var status = "";
if(document.getElementById('activestatus').checked){
status = document.getElementById('activestatus').value;
}else{
status = document.getElementById('inactivestatus').value;
}
var timeslot = "";
if(document.getElementById('multitime').checked){
timeslot = document.getElementById('multitime').value;
}else{
timeslot = document.getElementById('unitime').value;
}
var nightservice = "";
if(document.getElementById('multinightservice').checked){
nightservice = document.getElementById('multinightservice').value;
}else{
nightservice = document.getElementById('uninightservice').value;
}
var midnightcharge = document.getElementById('midnightcharge').value;
var morningservice = "";
if(document.getElementById('activeservice').checked){
morningservice = document.getElementById('activeservice').value;
}else{
morningservice = document.getElementById('inactiveservice').value;
}
var earlymorningcharge=document.getElementById('morningcharge').value;
var fixedtimeservice = "";
if(document.getElementById('afixedtimeservice').checked){
fixedtimeservice=document.getElementById('afixedtimeservice').value;
}else{
fixedtimeservice=document.getElementById('inacfixedtimeservice').value;
}
var fixedcharge = document.getElementById('fixedcharge').value;
var fixedtimeslot = document.getElementById('fixedtimeslot').value;
var deliverycharge = document.getElementById('deliverycharge').value;
var deliveryslot = document.getElementById('deliveryslot').value;
var unitimeslot = document.getElementById('unitimeslot').value;
var deliverytime = document.getElementById('deliverytime').value;
document.getElementById('addpincodeform').submit();
}
Below is my HTML code:
<form action="addpincode" method="post" id="addpincodeform"
name="addpincodeform" enctype="multipart/form-data">
<div class="floating-form">
<div class="row">
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="pincode"
id="pincode" placeholder=" ">
<span class="highlight"></span>
<label>Pin Code</label>
</div>
</div>
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="city"
id="city" placeholder=" ">
<span class="highlight"></span>
<label>City</label>
</div>
</div>
<div class="col-md-6 col-12 mb-4">
<div class="row">
<div class="col-md-6 col-12">
<h6>Status</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="activestatus" value="1">Active
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="inactivestatus" value="0">
InActive
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Time Slot</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="multitime" value="multi"
onchange="selectoption('multitime')">Multi
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="unitime" value="uni"
onchange="selectoption('unitime')">Uni
</div>
</div>
</div>
<div style="display:none;" id="multidiv">
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Mid Night Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="multinightservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="uninightservice"
value="no">No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="midnightcharge"
id="midnightcharge" placeholder=" ">
<span class="highlight"></span>
<label>Mid Night Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Early Morning Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="activeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="inactiveservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="earlymorningcharge"
id="morningcharge" placeholder=" ">
<span class="highlight"></span>
<label>Early Morning Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Fixed Time Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="afixedtimeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="inacfixedtimeservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="fixedcharge"
id="fixedcharge" placeholder=" ">
<span class="highlight"></span>
<label>Fixed Charge</label>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverycharge"
id="deliverycharge" placeholder=" ">
<span class="highlight"></span>
<label>Standard Delivery Charge</label>
</div>
</div>
<div style="display:none;" id="unidiv">
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="unitimeslot"
id="unitimeslot" placeholder=" ">
<span class="highlight"></span>
<label>Uni Time Slot</label>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverytime"
id="deliverytime" placeholder=" ">
<span class="highlight"></span>
<label>Last Delivery Time</label>
</div>
</div>
<div class="col-12 mt-4">
<button type="button" class="btn btn-outline-danger px-5"
onclick="setpincode()">Save</button>
</div>
</div>
</div>
</form>

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>

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.

Suddenly my html started acting weird on an Angular project - javascript

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>

Related

Multistep form won't move to the next form fields

validation of input element before cloning

How to implement radio button check in JSP JavaScript?

How to remove side bar and place panel at center

Form.Serialize with checkbox array

Categories

Resources