I am creating dynamic row with jquery. Now each row has different ID and common class name. How can I get the different id from same class name?
https://imgur.com/a/JCEhSna
See in the above picture. While I will select an option, then I want the ID name.
My Try:
HTML:
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->productName }}</option>
#endforeach
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="{{ $product->id }}">{{ $product->productName }}</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $('.invoiceProducts').attr('id');
console.log("Select ID: " + idOfSelect);
});
Output:
Select ID: undefined
You can find the id using this.closest('tr').id in the change event
var i =0;
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="1">1</option><option value="2">2</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = this.closest('tr').id
console.log("Select ID: " + idOfSelect);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="invoice-table">
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
</table>
I think this could help
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});
The trick is select ID of changed element, right?
If you have <select> element, you should have <option> elements also as a children.
Just set "value" attribute of these children.
<select id="mySelect">
<option id="1" value="1"> A <option>
<option id="2" value="2"> B <option>
<option id="3" value="3"> C <option>
</select>
$("#mySelect").change(function(){
var selectedOption = $(this). children("option:selected").val();
console.log(selectedOption)
})
You should try with "document" It may help you Like:
$(document).on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});
Related
I'm trying to solve a problem with my POS module on Laravel 8 that removes an item from a dropdown once it is selected. The items from the dropdown are from a database table. My POS module consists of a table with Name (dropdown), Quantity, Price, and Total with the ability to add more rows. Here's the code I'm working on right now as well as screenshot of my POS.
pos.blade.php
<tbody class="addMoreProduct">
<tr>
<td>1</td>
<td>
<select name="product_id[]" id="product_id" class="form-control product_id">
<option value="s" selected>Select Item</option>
#foreach($products as $product)
<option data-price="{{ $product->price }}"
value="{{ $product->id }}">{{ $product->name }}
</option>
#endforeach
</select>
</td>
<td>
<input type="text" name="quantity[]" id="quantity" class="form-control quantity" required>
</td>
<td>
<input type="number" name="price[]" id="price" step=".01" class="form-control price" readonly>
</td>
<td>
<input type="number" name="total_amount[]" id="total_amount" step=".01" class="form-control total_amount" readonly>
</td>
</tr>
</tbody>
<script>
//Add a row
$('.add_more').on('click', function(){
var product = $('.product_id').html();
var numberofrow = ($('.addMoreProduct tr').length - 0) + 1;
var tr = '<tr><td class="no">' + numberofrow + '</td>' +
'<td><select class="form-control product_id" name="product_id[]">' + product +
'</select></td>' +
'<td><input type="number" name="quantity[]" class="form-control quantity"></td>' +
'<td><input type="number" name="price[]" class="form-control price" readonly></td>' +
'<td><input type="number" name="total_amount[]" class="form-control total_amount" readonly></td>' +
'<td><a class="btn btn-danger btn-sm delete rounded-circle"><i class="fa fa-times-circle"></i></a></td>';
$('.addMoreProduct').append(tr);
});
//Delete a row
$('.addMoreProduct').delegate('.delete', 'click', function(){
$(this).parent().parent().remove();
});
</script>
I did try looking for this problem and came across these code, I tried, but unfortunately it did not solve my problem. Any help would be appreciated. Thank you.
var selectobject = document.getElementById("product_id");
for (var i=0; i<selectobject.length; i++) {
if (selectobject.options[i].value == 's')
selectobject.remove(i);
}
var index = $('#product_id').get(0).selectedIndex;
$('#product_id option:eq(' + index + ')').remove();
I have tried to disable the option on select when it already selected. But it didn't disable when it already selected.
Below is the query for select option, it can be created dynamically.
var count = 0;
$(document).on('click', '#add', function () {
count++;
var html = '';
html += '<tr id="trrows">';
html += '<td id="medicinename"> <select name="med_name[]" id="med_name[]" class="form-control med_name" ><option value=""> Select Medicine</option> <?php echo fill_select_box($conn, "0"); ?></select></td>';
html += '<td id="mor"> <input type="text" name="morning[]" id="morning[]" class="form-control morning" /> </td>';
html += '<td id="noo"> <input type="text" name="noon[]" id="noon[]" class="form-control noon" /> </td>';
html += '<td id="nigh"> <input type="text" name="night[]" id="night[]" class="form-control night" /> </td>';
html += '<td id="period"> <input type="text" name="period[]" id="period[]" class="form-control period" /> </td>';
html += '<td> <button type="button" name="remove" id="remove" class="btn btn-danger btn-xs remove" > - </button> </td>';
html += '</tr>';
$('#rows').append(html);
});
$(document).on('click', '.remove', function () {
$(this).closest("#trrows").remove();
});
Below is the query for disable the select option on for (med_name[]),
$('select[name*="med_name[]"]').change(function(){
$('select[name*="med_name[]"] option').attr('disabled',false);
$('select[name*="med_name[]"]').each(function(){
var $this = $(this);
$('select[name*="med_name[]"]').not($this).find('option').each(function(){
if($(this).attr('value') == $this.val())
$(this).attr('disabled',true);
});
});
});
Below is the HTML,
<table class="table table-bordered mb-0" id="medical">
<thead>
<tr>
<th>Medicine Name</th>
<th>Morning</th>
<th>Noon</th>
<th>Night</th>
<th>Period</th>
</tr>
</thead>
<tbody id="rows">
</tbody>
</table>
<br><br>
<div align="right">
<button type="button" name="add" id="add" class="btn btn-success btn xs"> + </button>
</div>
I don't know where I went wrong. How can I achieve that? Any help may highly appreciated.
This is a working example, please check
I have updated some js code to make it work.
var count = 0;
$(document).on('click', '#add', function () {
count++;
var html = '';
html += '<tr id="trrows">';
html += '<td id="medicinename"> <select name="med_name[]" id="med_name[]" class="form-control med_name" ><option value=""> Select Medicine</option> <option value="1"> Option 1 </option><option value="2"> Option 2 </option><option value="3"> Option 3 </option><option value="4"> Option 4 </option><option value="5"> Option 5 </option></select></td>';
html += '<td id="mor"> <input type="text" name="morning[]" id="morning[]" class="form-control morning" /> </td>';
html += '<td id="noo"> <input type="text" name="noon[]" id="noon[]" class="form-control noon" /> </td>';
html += '<td id="nigh"> <input type="text" name="night[]" id="night[]" class="form-control night" /> </td>';
html += '<td id="period"> <input type="text" name="period[]" id="period[]" class="form-control period" /> </td>';
html += '<td> <button type="button" name="remove" id="remove" class="btn btn-danger btn-xs remove" > - </button> </td>';
html += '</tr>';
$('#rows').append(html);
});
$(document).on('click', '.remove', function () {
$(this).closest("#trrows").remove();
});
$(document).on('click', 'select.med_name', function () {
$('select[name*="med_name[]"] option').attr('disabled',false);
$('select[name*="med_name[]"]').each(function(){
var $this = $(this);
$('select[name*="med_name[]"]').not($this).find('option').each(function(){
if($(this).attr('value') == $this.val())
$(this).attr('disabled',true);
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table class="table table-bordered mb-0" id="medical">
<thead>
<tr>
<th>Medicine Name</th>
<th>Morning</th>
<th>Noon</th>
<th>Night</th>
<th>Period</th>
</tr>
</thead>
<tbody id="rows">
</tbody>
</table>
<br><br>
<div align="right">
<button type="button" name="add" id="add" class="btn btn-success btn xs"> + </button>
</div>
</body>
</html>
Here's very basic implementation
$('select').change(function() {
var value = $(this).val();
$(this).children('option').each(function() {
if ( $(this).val() === value ) {
$(this).attr('disabled', true).siblings().removeAttr('disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value=1> Option 1 </option>
<option value=2> Option 1 </option>
<option value=3> Option 1 </option>
</select>
Edit: Here is your sample
var count = 0;
$(document).on('click', '#add', function () {
count++;
var html = '';
html += '<tr id="trrows">';
html += '<td id="medicinename"> <select name="med_name[]" id="med_name[]" class="form-control med_name" ><option value=""> Select Medicine</option> <?php echo fill_select_box($conn, "0"); ?></select></td>';
html += '<td id="mor"> <input type="text" name="morning[]" id="morning[]" class="form-control morning" /> </td>';
html += '<td id="noo"> <input type="text" name="noon[]" id="noon[]" class="form-control noon" /> </td>';
html += '<td id="nigh"> <input type="text" name="night[]" id="night[]" class="form-control night" /> </td>';
html += '<td id="period"> <input type="text" name="period[]" id="period[]" class="form-control period" /> </td>';
html += '<td> <button type="button" name="remove" id="remove" class="btn btn-danger btn-xs remove" > - </button> </td>';
html += '</tr>';
$('#rows').append(html);
});
function addRow(rowIndex) {
count++;
var html = '';
html += '<tr id="trrows">';
html += '<td id="medicinename"> <select name="med_name[' + rowIndex + ']" id="med_name[]" class="form-control med_name" ><option value=""> Select Medicine</option><option value="1"> Select Medicine1</option><option value="2"> Select Medicine2</option> </select></td>';
html += '<td id="mor"> <input type="text" name="morning[]" id="morning[]" class="form-control morning" /> </td>';
html += '<td id="noo"> <input type="text" name="noon[]" id="noon[]" class="form-control noon" /> </td>';
html += '<td id="nigh"> <input type="text" name="night[]" id="night[]" class="form-control night" /> </td>';
html += '<td id="period"> <input type="text" name="period[]" id="period[]" class="form-control period" /> </td>';
html += '<td> <button type="button" name="remove" id="remove" class="btn btn-danger btn-xs remove" > - </button> </td>';
html += '</tr>';
$('#rows').append(html);
}
addRow(1);
addRow(2);
addRow(3);
$('select[name*="med_name"]').change(function() {
var value = $(this).val();
$(this).children('option').each(function() {
if ( $(this).val() === value ) {
$(this).attr('disabled', true).siblings().removeAttr('disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id=rows>
</table>
I have multiple dynamically added select boxes. Options are also dynamically appended. Now what I want is if one of the select boxes with the value 'Lead' is selected now when the user adds another select box then the value with 'Lead' needs to be disabled as there should not be two 'Lead'. Please suggest to me how can I achieve this goal.
<div class="form-group">
<label>Partner Organisation (If there are partners)</label>
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<label for="tags">Organisation </label>
<select class="form-control" name="stg_partner_id[]">
<option value="">Select</option>
#foreach($partnerorganisations as $pg)
<option value="{{ $pg->id }}">{{ $pg->partner_organisation }}</option>
#endforeach
</select>
</td>
<td>
<label for="tags">Role </label>
<select class="form-control" name="role[]">
<option value="">Select</option>
#foreach($roles as $role)
<option value="{{ $role }}">{{ $role }}</option>
#endforeach
</select>
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">+ </button>
</td>
</tr>
</table>
</div>
Now, my jquery looks like this.
var data = [<?php echo '"'.implode('","', $roles).'"' ?>];
var partnerdata = #json($partnerorganisations);
// console.log(app);
$(document).ready(function(){
var i=0;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><select class="form-control" name="stg_partner_id[]" id="partnerOption'+i+'"><option value="">Select</option></select></td><td><select class="form-control" name="role[]" id="newOption'+i+'"><option value="">Select</option></select></td> <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></th></tr>');
// console.log(data);
$.each(data, function(key, value) {
$('#newOption'+i+'')
.append($("<option></option>")
.attr("value", value)
.text(value));
});
$.each(partnerdata, function(key, value) {
$("select option:contains('value " + value.id + "')").prop("disabled","disabled");
$('#partnerOption'+i+'')
.append($("<option></option>")
.attr("value", value.id)
.text(value.partner_organisation));
});
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
As there will be mutliple select-boxes you can use .each loop to iterate through all select-boxes and then use that value to add disabled option from other select-box.
Demo Code :
$(document).ready(function() {
var i = 0;
$('#add').click(function() {
i++;
$('#dynamic_field').append('<tr id="row' + i + '"><td><select class="form-control" name="stg_partner_id[]" id="partnerOption' + i + '"><option value="">Select</option><option value="1">A</option><option value="2">B</option><option value="3">C</option></select></td><td><select class="form-control" name="role[]" id="newOption' + i + '"><option value="">Select</option><option value="1">A1</option> <option value="2">B2</option><option value="3">C2</option></select></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></th></tr>');
//your other codes
check_now(); //call to disable
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$(document).on('change', 'select[name*=stg_partner_id]', function() {
check_now() //on change call as well
})
function check_now() {
//remove disable from all options
$("select[name*=stg_partner_id] option").prop('disabled', false)
//loop through select box
$("select[name*=stg_partner_id]").each(function() {
var values = $(this).val()
if (values != "") {
//find option where value matches disable them
$("select[name*=stg_partner_id]").not(this).find("option[value=" + values + "]").prop('disabled', true);
}
})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="form-group">
<label>Partner Organisation (If there are partners)</label>
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<label for="tags">Organisation </label>
<select class="form-control" name="stg_partner_id[]">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</td>
<td>
<label for="tags">Role </label>
<select class="form-control" name="role[]">
<option value="">Select</option>
<option value="1">A1</option>
<option value="2">B2</option>
<option value="3">C2</option>
</select>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">+
</button></td>
</tr>
</table>
</div>
I want to get the old value from dynamic input on Laravel. If it's a regular input, I only need {{ old ('name') }}. But what if the input is dynamic?
View
<tr>
<td>
<input type="text" name="name_progress[]"
value="{{ old('name_progress[]') }}"
placeholder="Enter name" class="form-control"/>
</td>
<td>
<input type="text" name="payment_percentage[]"
value="{{ old('payment_percentage[]') }}"
placeholder="Enter % invoice" class="form-control"/>
</td>
<td>
<a type="button" class="btn btn-danger remove-tr">-</a>
</td>
</tr>
JavaScript
<script type="text/javascript">
$("#add-btn").click(function () {
var tr = '<tr>' +
'<td>' +
'<input type="text" name="name_progress[]" ' +
'placeholder="Enter name" class="form-control" /></td>' +
'<td><input type = "text" name = "payment_percentage[]" ' +
'placeholder = "Enter per_invoice" class = "form-control" />' +
'</td>' +
'<td><a type="button" class="btn btn-danger remove-tr">-</a></td>' +
'</tr>';
$("#dynamicProgress").append(tr);
});
$(document).on('click', '.remove-tr', function () {
$(this).parents('tr').remove();
});
</script>
Since name_progress and payment_percentage fields are arrays, you may simply loop through the old input values.
#forelse (old('name_progress', []) as $i => $name_progress)
<tr>
<td>
<input type="text" name="name_progress[]" value="{{ $name_progress }}" placeholder="Enter name" class="form-control" />
</td>
<td>
<input type="text" name="payment_percentage[]" value="{{ old('payment_percentage')[$i] }}" placeholder="Enter % invoice" class="form-control" />
</td>
<td>
<a type="button" class="btn btn-danger remove-tr">-</a>
</td>
</tr>
#empty
<tr>
<td>
<input type="text" name="name_progress[]" placeholder="Enter name" class="form-control" />
</td>
<td>
<input type="text" name="payment_percentage[]" placeholder="Enter % invoice" class="form-control" />
</td>
<td>
<a type="button" class="btn btn-danger remove-tr">-</a>
</td>
</tr>
#endforelse
If old('name_progress') is empty or null, initial fields with empty values will be displayed.
according to this question here now i'm trying to figure out the total value of the calculated moltiplication from input fields.
The total value must be autoupdated and i need to store that value into a variable for further data manipulation.
Scenario:
add article dynamically
name0, type0, price0, quantity0 --> total_0 (price*quantity)
name1, type1, price1, quantity1 --> total_1 (price*quantity)
...
nameX, typeX, priceX, quantityX --> total_X (price*quantity)
total value of all articles = (total_0 + total_1 + ... + total_X)
here is the html and js code.
Thanks in advance for help.
$(document).ready(function() {
var i = 0;
$("#sasia-" + i).change(function() {
upd_art(i)
});
$("#cmimi-" + i).change(function() {
upd_art(i)
});
$('#add').click(function() {
i++;
$('#artikujt').append('<tr id="row' + i + '"><td><input type="text" class="form-control input-sm name_list" id="artikulli-' + i + '" name="artikulli[]" value="" placeholder="Artikulli..." required /></td><td><select class="form-control input-sm name_list" id="njesia-' + i + '" name="njesia[]"><option value="" selected disabled>Njesia...</option><option value="tjeter">tjeter</option><option value="m">m</option><option value="m2">m2</option><option value="m3">m3</option><option value="cope">cope</option><option value="ml">m/l</option><option value="litra">litra</option><option value="pako">pako</option></select></td><td><input type="number" class="form-control input-sm name_list" id="sasia-' + i + '" name="sasia[]" value="" placeholder="Sasia..." required /></td><td><input type="number" class="form-control input-sm name_list" id="cmimi-' + i + '" name="cmimi[]" value="" placeholder="Cmimi..." required /></td><td><input type="number" class="form-control input-sm name_list subtotali" id="total_art-' + i + '" name="total_art[]" readonly /></td> <td><center><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn-sm btn_remove">X</button></center></td></tr>');
$("#sasia-" + i).change(function() {
upd_art(i)
});
$("#cmimi-" + i).change(function() {
upd_art(i)
});
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$('#submit').click(function() {
//alert($('#add_name').serialize()); //alerts all values
// $.ajax({
// url: "wwwdb.php",
// method: "POST",
// data: $('#add_name').serialize(),
// success: function(data) {
// $("#add_name")[0].reset();
// }
// });
});
function upd_art(i) {
var qty = $('#sasia-' + i).val();
var price = $('#cmimi-' + i).val();
var totNumber = (qty * price);
var tot = totNumber.toFixed(2);
$('#total_art-' + i).val(tot);
}
});
<html>
<head>
<title>add article</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">add article</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered table-sm" id="artikujt">
<thead>
<tr>
<th>item</th>
<th>type</th>
<th>quantity</th>
<th>price</th>
<th>value</th>
<th><center>+ / -</center></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control input-sm name_list" id="artikulli-0" name="artikulli[]" value="" placeholder="Artikulli..." required /></td>
<td>
<select class="form-control input-sm name_list" id="njesia-0" name="njesia[]">
<option value="" selected disabled>Njesia...</option>
<option value="tjeter">tjeter</option>
<option value="m">m</option>
<option value="m2">m2</option>
<option value="m3">m3</option>
<option value="cope">cope</option>
<option value="ml">m/l</option>
<option value="litra">litra</option>
<option value="pako">pako</option>
</select>
</td>
<td><input type="number" class="form-control input-sm name_list" id="sasia-0" name="sasia[]" value="" placeholder="Sasia..." required /></td>
<td><input type="number" class="form-control input-sm name_list" id="cmimi-0" name="cmimi[]" value="" placeholder="Cmimi..." required /></td>
<td><input type="number" class="form-control input-sm name_list subtotali" id="total_art-0" name="total_art[]" readonly /></td>
<td><center><button type="button" name="add" id="add" class="btn btn-sm btn-success">Add new</button></center></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3">
<label class="req">total sum of items </label>
<input type="text" class="form-control input-sm subtotali" name="vleramonedhe" id="vleramonedhe" readonly />
</div>
</div>
<input type="button" name="submit" id="submit" class="btn btn-sm btn-info" value="Submit" />
</form>
</div>
</div>
</body>
</html>