<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<body>
<form action="{{ url('') }}" method="POST">
<table>
<thead>
<tr>
<th><label>Size</label></th>
<th><label>Color</label></th>
<th><label>Other</label></th>
<th><label>Price</label></th>
<th><label>Quantity</label></th>
<th><label>Promotion</label></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" name="size[]" type="text" placeholder="Size" /></td>
<td><input class="form-control" name="color[]" type="text" placeholder="Color" /></td>
<td><input class="form-control" name="other[]" type="text" placeholder="Other" /></td>
<td><input class="form-control" name="price[]" type="text" placeholder="Price" /></td>
<td><input class="form-control" name="quantity[]" type="number" placeholder="Quantity" /></td>
<td><input class="form-control" name="promotion[]" type="text" placeholder="Promotion" /></td>
<td>
<button class="btn btn-danger btn-remove" type="button">
<i class="glyphicon glyphicon-minus gs"></i>
</button>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-info btn-add" type="button">
<i class="glyphicon glyphicon-plus gs"></i>
<b> Add</b>
</button>
<button class="btn btn-success" type="submit">
<b> Save</b>
</button>
<button class="btn btn-default" type="button">
<b> Back</b>
</button>
</form>
</body>
.entry:not(:first-of-type)
{
margin-top: 10px;
}
.glyphicon
{
font-size: 12px;
}
td {
padding:5px;
}
body {
padding:10px;
}
th {
text-align: center;
}
.container{
margin-top:20px;
}
.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;
}
$(document).ready(function() {
//Disable the Remove Button
var rowCount = $('table >tbody:last >tr').length;
if(rowCount == 1) {
document.getElementsByClassName('btn-remove')[0].disabled = true;
}
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('table');
var currentEntry = $('table>tbody>tr:last');
var newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val(''); //Remove the Data - as it is cloned from the above
//Add the button
var rowCount = $('table >tbody:last >tr').length;
if(rowCount > 1) {
var removeButtons = document.getElementsByClassName('btn-remove');
for(var i = 0; i < removeButtons.length; i++) {
removeButtons.item(i).disabled = false;
}
}
}).on('click', '.btn-remove', function(e) {
$(this).parents('tr:first').remove();
//Disable the Remove Button
var rowCount = $('table >tbody:last >tr').length;
if(rowCount == 1) {
document.getElementsByClassName('btn-remove')[0].disabled = true;
}
e.preventDefault();
return false;
});
});
// -- Start File Upload -- //
// $(document).on('click', '#close-preview', function(){
// $('.image-preview').popover('hide');
// // Hover befor close the preview
// $('.image-preview').hover(
// function () {
// $('.image-preview').popover('show');
// },
// function () {
// $('.image-preview').popover('hide');
// }
// );
// });
// Create the close button
// var closebtn = $('<button/>', {
// type:"button",
// text: 'x',
// id: 'close-preview',
// style: 'font-size: initial;',
// });
// closebtn.attr("class","close pull-right");
// // Set the popover default content
// $('.image-preview').popover({
// trigger:'manual',
// html:true,
// title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
// content: "There's no image",
// placement:'bottom'
// });
// // Clear event
// $('.image-preview-clear').click(function(){
// $('.image-preview').attr("data-content","").popover('hide');
// $('.image-preview-filename').val("");
// $('.image-preview-clear').hide();
// $('.image-preview-input input:file').val("");
// $(".image-preview-input-title").text("Browse");
// });
// // Create the preview image
// $(".image-preview-input input:file").change(function (){
// var img = $('<img/>', {
// id: 'dynamic',
// width:250,
// height:200
// });
// var file = this.files[0];
// var reader = new FileReader();
// // Set preview image into the popover data-content
// reader.onload = function (e) {
// $(".image-preview-input-title").text("Change");
// $(".image-preview-clear").show();
// $(".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);
// });
// -- END File Upload -- //
//});
