Develop Reference

count total element inside parent div with jQuery

Is there any way to count the total number of child div inside the main div with Jquery?
I want to count total div inside div with class form-group but this div should have
canvas. for example I want to return count for third div only since it has element canvas
and it has two canvas so it should return 2.
it has data-column="1" and data-column="2". if this div had 3 canvas in a row it would have
data-column="1", data-column="2" and data-column="3" for each div
find the div that has element canvas
count the total number of canvas with class="form-group"
3rd div should return 2 and the 4th div should return 1 since the 3rd div has 2 canvas and
4th div has 1 canvas.
<div class="form-group" data-row="1">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Name</label>
<input class="form-control" type="text"/>
</div>
</div>
</div>
<div class="form-group" data-row="2">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Email Address</label>
<input class="form-control" type="text"/>
</div>
</div>
</div>
//3rd div
<div class="form-group" data-row="3">
<div class="row">
<div class="trip-field col-sm-6" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
<div class="trip-field col-sm-6" data-column="2">
<canvas class="mycan-2" width="463" height="675"></canvas>
</div>
</div>
</div>
//4th div
<div class="form-group" data-row="4">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
</div>
</div>

$('div.form-group')
.filter((idx, div) => $(div).find('canvas').length > 0)
.each((idx, div) => {
let that = $(div);
let row = that.data('row');
console.log('div row#' + row + ' canvas child amount:' + that.find('canvas').length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" data-row="1">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Name</label>
<input class="form-control" type="text"/>
</div>
</div>
</div>
<div class="form-group" data-row="2">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Email Address</label>
<input class="form-control" type="text"/>
</div>
</div>
</div>
<!-- 3rd div -->
<div class="form-group" data-row="3">
<div class="row">
<div class="trip-field col-sm-6" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
<div class="trip-field col-sm-6" data-column="2">
<canvas class="mycan-2" width="463" height="675"></canvas>
</div>
</div>
</div>
//4th div
<div class="form-group" data-row="4">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
</div>
</div>

You can do this:
$(".form-group").each(function() {
const row = $(this).data("row");
console.log(
"row",row,":", $("canvas",this).length)
});
// or
const $rows = $(".form-group").filter(function() {
return $(this).find("canvas").length > 0
}) // here we have all the divs with canvas children
.map(function() {
return $(this).data("row");
})
.get(); // here we have the array of data-row values from the divs with canvase children
console.log($rows)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="form-group" data-row="1">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Name</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
<div class="form-group" data-row="2">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Email Address</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
//3rd div
<div class="form-group" data-row="3">
<div class="row">
<div class="trip-field col-sm-6" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
<div class="trip-field col-sm-6" data-column="2">
<canvas class="mycan-2" width="463" height="675"></canvas>
</div>
</div>
</div>
//4th div
<div class="form-group" data-row="4">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
</div>
</div>

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 get Underscore in textbox content in MVC in Print preview mode

I have printing textbox, labels and dropdown values on print preview page. Here I've attached Codepen link as well as code what I have done yet.
HTML
<form>
<div class="container no-print">
<div class="row" id="DivDate">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div id="DivDoc">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div id="DivData">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlOption" class="form-control">
<option value="C/O">C/O</option>
</select>.
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
</div>
<div class="row" id="DivFooter">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
</form>
<div class="print">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right" id="PrintDate">
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintDoc">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintData">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
And Jquery:
$("#BtnSave").click(function() {
var values1 = [];
$('#DivDate').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values1.push($(this).val().trim());
} else {
values1.push($(this).text().trim());
}
});
$("#PrintDate").text(values1.join(" "));
var values2 = [];
$('#DivDoc').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values2.push($(this).val().trim());
} else {
values2.push($(this).text().trim());
}
});
$("#PrintDoc").text(values2.join(" "));
var values3 = [];
$('#DivData').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values3.push($(this).val().trim());
} else {
values3.push($(this).text().trim());
}
});
$("#PrintData").text(values3.join(" "));
window.print();
});
CodePen:https://codepen.io/anon/pen/GmjmBr
I want underscore under input text like doctorname and patient name. Can I add HTML any how in preview mode?
As I am getting value of all input in array and joining it, I don't think I can save HTML code in array.
I've attached Image for better clarification

Javascript onClick() doesn't work for my button to calculate form inputs?

I want to take input values from HTML input and then I want to show the value by clicking result button.
Here is my code:
HTML:
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<button class="mortgage-button" id="mortgage-calculate" onClick="result()">CALCULATE</button>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript:
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("#purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
Actually what I want:
I want to take inputs from HTML input, then I want to calculate those results and finally clicking the result/calculate button I want to reveal the calculation.
Here is the jsfiddle

Corrected your code
HTML
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">Down Payment</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="down-payment">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="moartgage-term">Mortgage Term</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="mortgage-term">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="interest-rate">Interest Rate</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="interest-rate">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Property Tax</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="property-tax">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">P.Insurance</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="p-insurance">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<input class="mortgage-button" type="button" value="CALCULATE" id="mortgage-calculate" onClick="result()"/>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
JSFIDDLE Here
Changes : 1] Removed # from getElementById function. 2] Changed
button element to input tag with type button. This prevents form
submission when clicked on it.

Bootstrap Grid Form

I'm trying to modify a Form which has field and value into another with two columns, something like this.
Now I have:
HEADER 1
FIELD 1: VALUE
FIELD 2: VALUE
FIELD 3: VALUE
HEADER 2
FIELD 4: VALUE
FIELD 5: VALUE
FIELD 6: VALUE
And I tried to do this:
HEADER 1 HEADER 2
FIELD 1: VALUE FIELD 4: VALUE
FIELD 2: VALUE FIELD 5: VALUE
FIELD 3: VALUE FIELD 6: VALUE
Here is my code:
<div class="row">
<div class="col-lg-6 col-md-6">
<div> <h3> Datos Personales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">DNI</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->usi_dni?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Apellido y Nombre</label>
<div class="col-md-8"><input class="form-control input-sm" name="apynom" value='<?=$beca->usi_nombre?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Legajo</label>
<div class="col-md-8"><input class="form-control input-sm" name="legajo" value='<?=$beca->usi_legajo?>'></div>
</div>
<div> <h3> Datos Laborales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">Fecha Ingreso PJCABA</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->f_ingreso_caba?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Fuero</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['fuero'] as $key=>$fuero)
<?php if( $fuero->fuero_id == $beca->fuero_id ){?>
<option value="{{$fuero->fuero_id}}" selected>{{$fuero->fuero_nombre}}</option>
<?php }else{?>
<option value="{{$fuero->fuero_id}}">{{$fuero->fuero_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Dependencia</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['cargos'] as $key=>$cargo)
<?php if( $cargo->car_id == $beca->cargo_id ){?>
<option value="{{$cargo->car_id}}" selected>{{$cargo->car_nombre}}</option>
<?php }else{?>
<option value="{{$cargo->car_id}}">{{$cargo->car_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">Aceptar</button>
Cancel
</div>
</div>
</form>
</div>
Hope someone can help me.
Thanks!

If you're trying to set your form to have two sides you can nest your columns/rows to split it into parts. Docs
See working example (full page).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form id="theForm">
<div class="container">
<div class="row">
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Personales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">DNI</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Apellido y Nombre</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="apynom">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Legajo</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="legajo">
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Laborales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fecha Ingreso PJCABA</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fuero</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Dependencia</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<div class="col-sm-12">
<div class="form-group">
<button type="submit" class="btn btn-default">Aceptar</button> Cancel
</div>
</div>
</div>
</div>
</form>
<hr>