I want to add the column values in text box field of each single row during insertion of value to that field and display that value in a read only field.
HTML CODE:
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<?php
while($m_row = $m_result->fetch_assoc()) {
?>
<tbody>
<tr>
<?php
$sqltask="SELECT * FROM tasks WHERE tasks_code='".$m_row['tcode']."'";
$resulttask=$conn->query($sqltask);
$rowtask=$resulttask->fetch_assoc();
?>
<td><?php echo $rowtask['tasks_name'] ?></td>
<td><?php echo $m_row['tcode'] ?></td>
<td>
<input type="text" class="form-control master" name="ldr[]" id="ldr" value="<?php echo $m_row['ldr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master" name="sdr[]" id="sdr" value="<?php echo $m_row['sdr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master" id="master_diff" name="master_diff[]" readonly />
</td>
<td> <input type="hidden" name="master[]" id="master" value="<?php echo $master_row['id'];?>" /></td></tr>
</tbody>
<?php
}
?>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</div>
</div>
</div>
</form>
The above code is the html code for the textbox fields where the fields ldr,sdr should be sumup for getting the total sum in master_diff field. It should be using onchange event since each entry to the textbox fields should be get added to display the final sum.
You should to remove all ids from the cycle!
Try this:
var inputs = document.getElementsByClassName("inputs");
var summDiff = function() {
var tr = this.closest("tr");
var ldr = tr.getElementsByClassName("ldr")[0]
var sdr = tr.getElementsByClassName("sdr")[0]
var diff = tr.getElementsByClassName("master_diff")[0]
diff.value = parseInt(ldr.value) + parseInt(sdr.value)
};
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', summDiff, false);
}
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>task 1</td>
<td>0001</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="1" />
</td>
</tr>
<tr>
<td>task 2</td>
<td>0002</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="2" />
</td>
</tr>
<tr>
<td>task 3</td>
<td>0003</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="3" />
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</form>
Related
I want to display the total sum of values shown in the amount input-boxes in the next field named sub total without refreshing page.
JS-code for sum of n numbers:
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
I don't know why, but obviously rare are those who understand that using a form has benefits ...
const myForm = document.forms['my-form']
myForm.oninput = ({target: elm}) => // for any change iside the form
{
let
row = elm.closest('tr')
, Dsc = row.querySelector('input[name^="desc"]')
, Qte = row.querySelector('input[name^="quantity"')
, Prx = row.querySelector('input[name^="price"')
, Amt = row.querySelector('input[name^="amount"')
;
Dsc.required = (Qte.valueAsNumber > 0)
switch (elm.name.split('_')[0]) {
case 'quantity':
case 'price':
Amt.value = Qte.valueAsNumber * Prx.valueAsNumber
myForm.SubTotal.textContent =
[...myForm.querySelectorAll('input[name^="amount"')]
.reduce((sum,el)=>sum + +el.value,0)
break;
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable form submiting
let formInputs = Object.fromEntries( new FormData(myForm).entries() )
console.clear()
console.log( formInputs)
}
table {
border-collapse: collapse;
margin : 2em 1em;
}
td, th {
padding : .2em;
border : 1px solid darkblue;
}
input {
width : 6em;
text-align : right;
}
td:first-of-type input {
width : 10em;
text-align : left;
}
<form name="my-form">
<table>
<thead>
<tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr>
</thead>
<tbody>
<tr>
<td> <input type="text" name="desc_1" > </td>
<td> <input type="number" name="quantity_1" value="0" min="0"> </td>
<td> <input type="number" name="price_1" value="0" min="0"> </td>
<td> <input type="text" name="amount_1" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_2" > </td>
<td> <input type="number" name="quantity_2" value="0" min="0"> </td>
<td> <input type="number" name="price_2" value="0" min="0"> </td>
<td> <input type="text" name="amount_2" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_3" > </td>
<td> <input type="number" name="quantity_3" value="0" min="0"> </td>
<td> <input type="number" name="price_3" value="0" min="0"> </td>
<td> <input type="text" name="amount_3" disabled value="0"></td>
</tr>
</tbody>
<tfoot>
<td colspan="4"> Sub Total : <output name="SubTotal">0</output> </td>
</tfoot>
</table>
<button type="submit">submit</button>
</form>
You can assign an id to the subtotal cell and change its value on every Mul call.
Something like this :
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
}
<html>
<body>
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td id="subTotal" class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm running a code where I must create a function and call it multiple times. I am having trouble calling it more than once.
how to use Mul() function in second table row.
Please help Me.
Thanks.
function Mul() {
var quantity = document.getElementById("quantity").value;
var price = document.getElementById("price").value;
document.getElementById(id).value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="quantity" class="form-control" onkeyup="Mul()">
</td>
<td>
<input type="number" id="price" class="form-control" onkeyup="Mul()">
</td>
<td>
<input type="text" id="amount" class="form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="quantity" class="form-control">
</td>
<td>
<input type="number" id="price" class="form-control">
</td>
<td>
<input type="text" id="result" class="form-control" disabled>
</td>
</tr>
</tbody>
</table>
Add class name for every input and pass index to Mul() function
try below code.
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount" class="amount form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount" class="amount form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount" class="amount form-control" disabled>
</td>
</tr>
</tbody>
</table>
I have two table where Table 1 is master table for table 2. If I Click addnew button than a new row will added in both table 1 and table 2 and Whatever employee name i will write it will be copied in table 2 same time. I want to Copy checked input checkbox also from table 1 to table2.I have added my code please help.
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" id="mandatorySub"> </td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66"></input>
<thead>
<th>Employee Name</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
<td>
<input type="checkbox" id="mandatorySub">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<div class="portlet-body individual individualSalSectionSub">
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" id="mandatorySub">
</td>
</tr>
</tbody>
</table>
</div>
</div>
You need to change id="mandatorySub" to class="mandatorySub1" and class="mandatorySub2"
I had updated your code may be this will help you if i understand you correctly
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td><td><input type="checkbox" class="mandatorySub1"></td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub2"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
$('body').on('click','.mandatorySub1',function(){
$('input.mandatorySub2').eq($("input.mandatorySub1").index( this )).trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66"></input>
<thead>
<th>Employee Name</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
<td>
<input type="checkbox" class="mandatorySub1">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<div class="portlet-body individual individualSalSectionSub">
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" class="mandatorySub2">
</td>
</tr>
</tbody>
</table>
</div>
</div>
You should use mandatorySub as a class rather than multiple ids everywhere. The usage of ids are supposed to be unique inside a document.
What you should aim for is to fire an event on change of status of your checkboxes, and make the other checkboxes checked/unchecked accordingly.
Refer code:
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" class="mandatorySub"> </td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
$(document).on("change", ".mandatorySub", function() {
var checkboxIndex = $(this).closest('table').find('input[type="checkbox"]').index(this)
if ($(this).is(":checked")) {
$('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", true);
} else {
$('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66" />
<thead>
<th>Employee Name</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
<td>
<input type="checkbox" class="mandatorySub">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<div class="portlet-body individual individualSalSectionSub">
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" class="mandatorySub">
</td>
</tr>
</tbody>
</table>
</div>
</div>
i try to add a new row inside table, but all the fields inside this new row must have a new value everytime
This script allow to add a new row but it does'nt change automaticly the value of the row
<table width="100%" cellpadding="5" cellspacing="0" border="0">
<tr>
<td><table class="table table-sm table-hover" id="mtable">
<thead>
<tr>
<th>id</th>
<th class="col-md-2">Fournisseur</th>
<th class="col-md-2">Groupe Clients</th>
<th class="col-md-2">Range Quantité</th>
<th class="col-md-2">Prix Fournisseur</th>
<th class="col-md-2">% Remise Client</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>84 <input type="hidden" name="id" value="84" /></td>
<td class="col-md-2"><select name="suppliers_id[84]" id="suppliers_id[84]" class="form-control"><option value="">--Aucun--</option><option value="1" selected="selected">test</option></select></td>
<td class="col-md-2"><select name="customers_group_id[84]" id="customers_group_id[84]" class="form-control"><option value="" selected="selected">Normal</option><option value="1">Tarifs 1</option></select></td>
<td class="col-md-2"><input type="text" name="discount_quantity[84]" value="5" placeholder="Qty" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_supplier_price[84]" value="5" placeholder="Supplier Price" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_customer[84]" value="5" placeholder="Discount without %" class="form-control" /></td>
<td></td>
</tr>
.........
<tr>
<td>102 <input type="hidden" name="id" value="102" /></td>
<td class="col-md-2"><select name="suppliers_id[102]" id="suppliers_id[102]" class="form-control"><option value="">--Aucun--</option><option value="1" selected="selected">test</option></select></td>
<td class="col-md-2"><select name="customers_group_id[102]" id="customers_group_id[102]" class="form-control"><option value="" selected="selected">Normal</option><option value="1">Tarifs 1</option></select></td>
<td class="col-md-2"><input type="text" name="discount_quantity[102]" value="5" placeholder="Qty" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_supplier_price[102]" value="5" placeholder="Supplier Price" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_customer[102]" value="5" placeholder="Discount without %" class="form-control" /></td>
<td></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
Below, for example, I add a new value, but this value is only for the first column.
The $new_id (new id value) must be applied for all column and everytime I add a column, the id has a news value.
I am not good in javascript. A little help.
Tk
<?php
$new_id = $id + 1;
?>
<input id="row" value="<?php echo $new_id; ?>" placeholder="Enter Item Name"/><button type="button" id="irow">Insert Row</><br/><br/>
<script>
$('#irow').click(function(){
if($('#row').val()){
$('#mtable tbody').append($("#mtable tbody tr:last").clone());
$('#mtable tbody tr:last :checkbox').attr('checked',false);
$('#mtable tbody tr:last td:first').html($('#row').val());
}else{alert('Enter Text');}
});
</script>
I have a bootstrap table like this . Now i want this table to add two rows after clicking of a button and still have the form functionality that is that i should be able to able a unique name for the table colums to be able to read this in my controller . All the solutions i have seen don't maintain the unique name for the added rows . How can i do this ?
<form class="form-horizontal" role="form" action="updateCategory" method=POST>
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<tr>
<th style="width:15%" >Property</th>
<th style="width:40%">Present Value</th>
<th style="width:45%">Edited Value</th>
</tr>
<tr>
<td align="center"><strong>Id</strong></td>
<td><p class="text-danger" id="id1">Id</p></td>
<td><input type="text" class="form-control" id="id" name="id" placeholder="Enter Id"></td>
</tr>
<tr>
<td align="center"><strong>Cat Key</strong></td>
<!-- <td><input type="text" class="form-control" id="catKey1" name="catKey1" placeholder="Enter CatKey"></td> -->
<td><p class="text-danger" id="catKey1">Cat Key</p></td>
<td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey"></td>
</tr>
<tr>
<td align="center"><strong>Name</strong></td>
<td><p class="text-danger" id="name1">Name</p></td>
<td><input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"></td>
</tr>
<tr>
<td align="center"><strong>Icon</strong></td>
<td><p class="text-danger" id="icon1">Icon</p></td>
<td><input type="text" class="form-control" id="icon" name="icon" placeholder="Enter Icon"></td>
</tr>
<tr>
<td align="center"><strong>Icon White</strong></td>
<td><p class="text-danger" id="iconWhite1">Icon White</p></td>
<td><input type="text" class="form-control" id="iconWhite" name="iconWhite" placeholder="Enter IconWhite"></td>
</tr>
<tr>
<td align="center"><strong>Color</strong></td>
<td><p class="text-danger" id="color1">Color</p></td>
<td><input type="text" class="form-control" id="color" name="color" placeholder="Enter Color"></td>
</tr>
<tr>
<td align="center"><strong>Post Order Success Message</strong></td>
<td><p class="text-danger" id="posm1">Post Order Success Message</p></td>
<td><input type="text" class="form-control" id="posm" name="posm" placeholder="Enter Post Order Success Message"></td>
</tr>
<tr>
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
`