"Company form"
Bootstrap 3.2.0 Snippet by faisalkhan123

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="company-form">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="form-title">Company Information</h2>
</div>
</div>
<div class="row com_info">
<div class="col-sm-6">
<!-- left side company information -->
<div class="well form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Company Type</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-th-large"></i></span>
<input class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Company Name</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-font"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
padding: 50px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left: 2px;
}
.popover-content img {
min-width: 200px;
min-height: 150px;
max-width: 250px;
max-height: 250px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).on('click', '.close-preview', function () {
var parent = $(this).parents('.image-preview');
parent.find('.popover ').removeClass('in');
});
$(document).on('click', '.image-preview-filename', function () {
// alert('asfd');
var parent = $(this).parents('.image-preview');
parent.find('.popover ').addClass('in');
});
$(function () {
// Clear event
$('.image-preview-clear').click(function () {
var parent = $(this).parents('.image-preview');
parent.find('.image-preview-filename').val("");
parent.find('.image-preview-clear').hide();
parent.find('.image-preview-input input:file').val("");
parent.find(".image-preview-input-title").text(" Browse");
});
// Create the preview image
$(".image-preview-input input:file").change(function () {
var parent = $(this).parents('.image-preview');
var img = parent.find('.popover-content img');
// parent.find
var file = this.files[0];
var reader = new FileReader();
// Set preview image into the popover data-content
reader.onload = function (e) {
parent.find(".image-preview-input-title").text("Change");
parent.find(".image-preview-clear").show();
parent.find(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
// $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Navbar With Icons
login-form
Login Form
Contact Form

Questions / Comments: