"input US order form"
Bootstrap 3.0.0 Snippet by maizovietnam

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Thông tin sản phẩm</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-2">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-tag"></i></span>
<input id="product.name" type="text" class="form-control" name="product.name" placeholder="Tên sản phẩm">
</div>
</td>
<td class="col-sm-2">
<div class="input-group">
<span class="input-group-addon"><i class=" glyphicon glyphicon-link"></i></span>
<input id="product.link" type="text" class="form-control" name="product.link" placeholder="Link sản phẩm">
</div>
</td>
<td class="col-sm-2">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span>
<input id="product.quantity" type="text" class="form-control" name="product.quantity" placeholder="Số lượng">
</div>
<td class="col-sm-2">
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Upload hình ảnh<input type="file" style="display: none;" multiple>
</span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
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).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-tag"></i></span><input id="product.name" type="text" class="form-control" name="product.name' + counter + '" placeholder="Tên sản phẩm"></div></td>';
cols += '<td><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-link"></i></span><input id="product.link" type="text" class="form-control" name="product.link' + counter + '" placeholder="Link sản phẩm"></div></td>';
cols += '<td><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span><input id="product.quantity" type="text" class="form-control" name="product.quantity' + counter + '" placeholder="Số lượng"></div></td>';
cols += '<td><div class="input-group"><label class="input-group-btn"><span class="btn btn-primary">Upload hình ảnh<input type="file" style="display: none;" multiple></span></label><input type="text" class="form-control" name="product.file' + counter + '" readonly></div></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Xóa"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
$(function() {
// We can attach the `fileselect` event to all file inputs on the page
$(document).on('change', ':file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: