Dynamically add rows to a bootstrap table that has a form ;

Dynamically add rows to a bootstrap table that has a form ; - javascript

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>
`

Related

Monitor the changes in table using JavaScript or HTML

I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.

You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>

How to add extra row on a table by clicking

I am trying to create an invoice system and I need to add a function to add extra rows.
What I have looks like this:
$(document).ready(function() {
$("#addrow").click(function(){
$(".item-row:last").after('
<tr class="item-row">
<td>#</td>
<td>New Item</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
</tr>');
bind();
});
});
<table>
<tr>
<th>#</th>
<th>Type</th>
<th>Location</th>
<th>Item</th>
<th>Cost</th>
<th>Days</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td>1</td>
<td>Type</td>
<td>Location</td>
<td>Item</td>
<td>100</td>
<td>2</td>
<td>200</td>
</tr>
<tr id="hidden-row">
<td colspan=7>
<a id="addrow" href="javascript:;" title="Add a row">Add a row</a>
</td>
</tr>
What I want to do but have no idea how to do it is: click Add a row, and have an extra row to add more products. I did some research and came across some example and I took the code for the script from there but I do not know if I left part of the script out. I am using, html, php and js any help will be greatly appreciated! thank you in advanced.

You need to use `` instead of '' if its multiple line html. Also, you need to use .bind():
$(document).ready(function() {
$("#addrow").click(function() {
$(".item-row:last").after(`
<tr class="item-row">
<td>#</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
</tr>`)
.bind();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th>Type</th>
<th>Location</th>
<th>Item</th>
<th>Cost</th>
<th>Days</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td>1</td>
<td>Type</td>
<td>Location</td>
<td>Item</td>
<td>100</td>
<td>2</td>
<td>200</td>
</tr>
<tr id="hidden-row">
<td colspan=7>
<a id="addrow" href="javascript:;" title="Add a row">Add a row</a>
</td>
</tr>
</table>

$(document).ready(function() {
var iCnt=0;
$('#FaqsTable').on('click','#addCF',function() {
if(iCnt<=100) {
iCnt=iCnt+1;
$("#FaqsTable").append('<tr>'+
//'<td> <div class=" col-md-9"><div class="gt_privacy_field default_width"> <input type="text" class="c_ph" id="POID" name="POID[]" value="" placeholder="POID" /></div></div></td>' +
'<td style="display:none"><input type="text" class="c_ph" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="Select Item" style="width:150px" /></td>'+
'<td><input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px"/></td>'+
'<td><input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="Enter Amount" style="width:150px"/></td>'+
'<td class="hidden" style="display:none"><input type="text" class="Flag sm-form-control" id="Flag" name="Flag[]" value="I" placeholder="Flag" /></td>'+
'<td><p class="fa fa-trash-o m-r-5" style="color:red"></p>Remove</td> '+
'</tr>');
}
});
$("#FaqsTable").on('click','#remCF',function() {
var flag=$(this).closest('tr').find(".Flag").val();
if(flag=="I") {
$(this).closest('tr').remove();
}
else(flag=="U")
{
$(this).closest("tr").hide();
$(this).closest('tr').find(".Flag").val("D");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group row">
<div class="table-responsive">
<table id="FaqsTable" class="table table-bordered nobottommargin">
<tr style="background-color:#b5aeae">
<th style="text-align:center;width:400px;">Perticular </th>
<th style="text-align: center; width: 150px;">Amount </th>
<th style="text-align: center; width: 100px;">Action</th>
<tr />
<tr>
<td style="display:none">
<input type="text" class="form-control" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="ItemName" style="width:150px" required />
</td>
<td>
<input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px" required />
</td>
<td>
<input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="EnterAmount" style="width:150px" required />
</td>
<td>
<p class="fa fa-plus" style="color:green"></p>Add
</td>
</tr>
</table>
</div>
</div>
$(document).ready(function() {
var iCnt=0;
$('#FaqsTable').on('click','#addCF',function() {
if(iCnt<=100) {
iCnt=iCnt+1;
$("#FaqsTable").append('<tr>'+
//'<td> <div class=" col-md-9"><div class="gt_privacy_field default_width"> <input type="text" class="c_ph" id="POID" name="POID[]" value="" placeholder="POID" /></div></div></td>' +
'<td style="display:none"><input type="text" class="c_ph" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="Select Item" style="width:150px" /></td>'+
'<td><input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px"/></td>'+
'<td><input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="Enter Amount" style="width:150px"/></td>'+
'<td class="hidden" style="display:none"><input type="text" class="Flag sm-form-control" id="Flag" name="Flag[]" value="I" placeholder="Flag" /></td>'+
'<td><p class="fa fa-trash-o m-r-5" style="color:red"></p>Remove</td> '+
'</tr>');
}
});
$("#FaqsTable").on('click','#remCF',function() {
var flag=$(this).closest('tr').find(".Flag").val();
if(flag=="I") {
$(this).closest('tr').remove();
}
else(flag=="U")
{
$(this).closest("tr").hide();
$(this).closest('tr').find(".Flag").val("D");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group row">
<div class="table-responsive">
<table id="FaqsTable" class="table table-bordered nobottommargin">
<tr style="background-color:#b5aeae">
<th style="text-align:center;width:400px;">Perticular </th>
<th style="text-align: center; width: 150px;">Amount </th>
<th style="text-align: center; width: 100px;">Action</th>
<tr />
<tr>
<td style="display:none">
<input type="text" class="form-control" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="ItemName" style="width:150px" required />
</td>
<td>
<input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px" required />
</td>
<td>
<input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="EnterAmount" style="width:150px" required />
</td>
<td>
<p style="color:green"></p>Add
</td>
</tr>
</table>
</div>
</div>

Total sum of columns of one row

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>

How to Copy checked checkbox from one table to another 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>

How to display data from array of objects in a textbox using javascript?

I want to display data stored in an array in form-
for example:
var users =
[
{
'name':'John',
'age':'10'
},
{
'name':'Rose',
'age':'18'
}
];
and I want to display name and age of users logged in, in the form below:
<form id="myform">
<div>
</div>
<h2 align="center"> Edit Details</h2>
<table id="table1"; cellspacing="5px" cellpadding="5%"; align="center">
<tr>
<td align="right" class="style1">First Name:</td>
<td class="style1"><input id="firstname" type="text" placeholder="FirstName" /></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td><input id="lastname" type="text" placeholder="LastName" /></td>
</tr>
<tr>
<td align="right">Email ID:</td>
<td><input id="email" type="text" placeholder="Email" /></td>
</tr>
<tr>
<td align="right">User Name:</td>
<td><input id="username" type="text" placeholder="UserName" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input id="password" type="password" placeholder="Password" /></td>
</tr>
<tr>
<td> <input type="button" value="Edit" onclick="edit()" />
<td> <input type="button" value="Reset" />
</td>
</tr>
</table>
</form>

You can just change the text content with pure javascript.
name.textContent = 'First name' + users[0].name;
Of course, you will need to select all the fields you want to change.

Develop Reference

JavaScript is the programming language of the Web.

Dynamically add rows to a bootstrap table that has a form ; - javascript

Related

Monitor the changes in table using JavaScript or HTML

How to add extra row on a table by clicking

Total sum of columns of one row

How to Copy checked checkbox from one table to another table

How to display data from array of objects in a textbox using javascript?

Categories

Resources