We Keep Coding

How to search the loan no in text table using javascript

This my view page:
In this page i have text box "search".if i enter the loan no in that box it should be filter and give that loan no only using javascript.
This javascript code is working for only html table but i want in text box table.
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
var input = $("#myInput").val();
filter = input.value.toUpperCase();
var table = $("#tb3").val();
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
table,
tr,
td,
th {
border: 1px solid blue;
padding: 2px;
}
table th {
background-color: #999999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tb3">
<tr>
<th>Unique ID</th>
<th>Random ID</th>
</tr>
<tr>
<td><input type="text" value="214215"></td>
<td><input type="text" value="442"></td>
</tr>
<tr>
<td><input type="text" value="1252512"></td>
<td><input type="text" value="556"></td>
</tr>
<tr>
<td><input type="text" value="2114"></td>
<td><input type="text" value="4666"></td>
</tr>
<tr>
<td><input type="text" value="3245466"></td>
<td><input type="text" value="334"></td>
</tr>
<tr>
<td>24111</td>
<td>54364</td>
</tr>
</table>
<br />
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

Please use jQuery all the way
$("#myInput").on("input", function() {
var filter = String(this.value).toUpperCase();
var $rows = $("#tb3 tbody tr");
if (filter) {
$rows.each(function() {
$tr = $(this);
$tr.hide();
$(this).find("input").each(function() {
if (this.value.indexOf(filter) != -1) { // === 0 if filter match from start
$tr.show()
}
})
})
}
else {
$rows.show()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tb3">
<thead>
<tr>
<th>Unique ID</th>
<th>Random ID</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="214215"></td>
<td><input type="text" value="442"></td>
</tr>
<tr>
<td><input type="text" value="1252512"></td>
<td><input type="text" value="556"></td>
</tr>
<tr>
<td><input type="text" value="2114"></td>
<td><input type="text" value="4666"></td>
</tr>
<tr>
<td><input type="text" value="3245466"></td>
<td><input type="text" value="334"></td>
</tr>
</tbody>
</table>
<br />
<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">
If the ID is static, make it part of the row:
$("#myInput").on("input", function() {
var val = this.value.toUpperCase()
$("#tb3 tbody tr").each(function() {
var id = String($(this).data("id"));
$(this).toggle(id.indexOf(val) != -1) // use === 0 to match from start
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tb3">
<thead>
<tr>
<th>Unique ID</th>
<th>Random ID</th>
</tr>
</thead>
<tbody>
<tr data-id="214215">
<td><input type="text" value="214215"></td>
<td><input type="text" value="442"></td>
</tr>
<tr data-id="1252512">
<td><input type="text" value="1252512"></td>
<td><input type="text" value="556"></td>
</tr>
<tr data-id="2114">
<td><input type="text" value="2114"></td>
<td><input type="text" value="4666"></td>
</tr>
<tr data-id="3245466">
<td><input type="text" value="3245466"></td>
<td><input type="text" value="334"></td>
</tr>
<tbody>
</table>
<br />
<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">

you can use the hidden attribute to filter out non-matches.
const filterTable = (value = '') => document
// get all `#tb3` table rows (tr)
.querySelectorAll('#tb3 tr')
// for each row in `#tb3` table
.forEach((row) => {
if (!value) {
// if value is empty (''), make the row visible and exit.
row.hidden = false;
return;
}
// get the input field of the first `td` of the current row (tr)
// it would be easier if you would assign a class name to the input
const input = row.querySelector('td:first-child input');
// pick `input.value` from the `td` (or default to an empty string)
const loanNo = ((input || {}).value || '').trim();
// make the row visible if the `td input.value` matches our query, otherwise hide it
row.hidden = loanNo != value;
// you can change the matching algorithm by looking at my end notes below
});
document
.querySelector('#search')
.addEventListener('input', ({ target }) => filterTable(target.value));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" integrity="sha256-Nfu23DiRqsrx/6B6vsI0T9vEVKq1M6KgO8+TV363g3s=" crossorigin="anonymous" />
<div class="form-group">
<input class="form-control" placeholder="Search" id="search" autocomplete="off"/>
</div>
<tr />
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th>Loan No</th>
<th>Party Name</th>
</tr>
</thead>
<tbody>
<tr><td><input value="100" class="form-control" /></td><td>Republican</td></tr>
<tr><td><input value="250" class="form-control" /></td><td>Democrat</td></tr>
<tr><td><input value="1000" class="form-control" /></td><td>Green</td></tr>
<tr><td><input value="120" class="form-control" /></td><td>Pirats</td></tr>
</tbody>
</table>
Match is being performed as exact, but you can always use loanNo.includes(value) or loanNo.startsWith(value) depending on your needs.

How to calculate sum of one field in table and put it in an input

I have a table in razor and I sent the data by ViewBag from controller
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
#foreach(var item in ViewBag.Products)
{
<tr>
<td>#item.Name</td>
<td>#item.Category</td>
<td>
<input type="text" class="form-control" value="#item.Price" />
</td>
<td>
<input type="text" class="form-controll" value="#item.Count" />
</td>
</tr>
}
</tbody>
</table>
<input type="text" class="form-control" value="#Model.TotalPrice" />
I want to multiple count and price of each row and put it in another input using javascript. and when the user change the value of input, that input that holds the value could change automatically.
if anyone can help me i would be appreciated.

If you are using jquery then it can be achieve as below.
You can update your total on every key press in price or count input.
Add some class to your input. In my example I've took class as price, and class total for display sum.
Add keyup event as below. Also trigger it on $(document).ready to initially set the total value.
$('.price').on('keyup', function() {
var val = +$(this).val();
var valSibling = +$(this).parent().siblings('td').find('.price').val();
if (isNaN(val) || isNaN(valSibling))
return;
$(this).parent().siblings('td').find('.total').val(val * valSibling);
var finaltotal = 0;
$('.total').each(function() {
if(!isNaN($(this).val()))
finaltotal += Number($(this).val());
});
$('.finaltotal').val(finaltotal);
});
$(document).ready(function(){
$('.price').trigger('keyup');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" class="price form-control" value="40" /></td>
<td><input type="text" class="price form-control" value="4" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" class="price form-control" value="20" /></td>
<td><input type="text" class="price form-control" value="2" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
</tbody>
</table>
<input type="text" class="finaltotal form-control" />

var inputs = $('#container input');
inputs.keyup(function() {
var arr = inputs.toArray();
var sum = 0;
for (var i = 0; i < arr.length / 2; i++)
sum += arr[i * 2].value * arr[i * 2 + 1].value;
$('#result').val(sum);
})
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Count</th>
<th>Price</th>
<tr>
</thead>
<tbody id='container'>
<tr>
<td><input type='number' value='1' /></td>
<td><input type='number' value='2' /></td>
</tr>
<tr>
<td><input type='number' value='10' /></td>
<td><input type='number' value='20' /></td>
</tr>
</tbody>
</table>
Total: <input type='number' readonly id='result' readonly value='202' />

I want to multiple count and price of each row and put it in another input using javascript.
You can add another td in each tr. Then loop through all the tbody tr to calculate the value:
var tr = document.querySelectorAll('tbody tr');
function calculate(){
tr.forEach(function(el){
var td = el.querySelectorAll('td');
// If there is invalid number in input then no change in total.
if (isNaN(td[2].querySelector('input').value) || isNaN(td[3].querySelector('input').value))
return;
td[4].querySelector('input').value = td[2].querySelector('input').value * td[3].querySelector('input').value;
});
}
calculate();
.form-control{
width: 50px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" oninput="calculate()" class="form-control" value="40" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="4" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" oninput="calculate()" class="form-control" value="20" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="2" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name3</td>
<td>Category3</td>
<td><input type="text" oninput="calculate()" class="form-control" value="30" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="3" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>

How do I enable and disable two inputs when their respective row checkbox is checked

How do I enable two input boxes when their sibling checkboxes are checked and disable them when their sibling checkboxes are unchecked.
When a checkbox is checked, the updated or modified row values should be stored in these three variables values[] - db id (not changeable), comp[] - to store the component value, plans[] - to store the plans. When unchecked, the stored 3 values should be popped out.
<tbody>
<tr class="checkRowedit">
<td><label>220</label></td>
<td><input name="component" type="text" value="John"></td>
<td><input name="plans" type="text" value="9980"></td>
<td><input type="checkbox" value="220"></td>
</tr>
<tr class="checkRowedit">
<td><label>330</label></td>
<td><input name="component" type="text" value="Shan"></td>
<td><input name="plans" type="text" value="966"></td>
<td>
<input type="checkbox" value="330">
</td>
</tr>
<tr class="checkRowedit">
<td><label>440</label></td>
<td><input name="component" type="text" value="Irfan"></td>
<td><input name="plans" type="text" value="953"></td>
<td>
<input type="checkbox" value="440">
</td>
</tr>
<tr class="checkRowedit">
<td><label>550</label></td>
<td><input name="component" type="text" value="Khalid"></td>
<td><input name="plans" type="text" value="897"></td>
<td>
<input type="checkbox" value="550">
</td>
</tr>
</tbody>
var values = [];
var comp = [];
var plans = [];

This is more of two questions, but you will want to use filter, map and reduce to build your arrays after the checkbox is checked.
To enable/disable your boxes you will use the querySelectorAll to find the checkboxes add events to them. When they are checked you will then disable the field and build the arrays.
var values = [];
var comp = [];
var plans = [];
Array.from(document.querySelectorAll('[type=checkbox]')).forEach(checkbox => {
checkbox.addEventListener('change', e => {
Array.from(checkbox.closest('tr').querySelectorAll('[type=text]'))
.forEach(i => i.disabled = !checkbox.checked)
// Build the arrays
comp = getComponents()
plans = getPlans()
values = getValues() // requires previous two to be set
// Test our logic
console.log('Values: ' + values.toString())
console.log('Comps: ' + comp.toString())
console.log('Plans: ' + plans.toString())
})
})
function getComponents() {
return Array.from(document.querySelectorAll('[name=component]'))
.filter(item => !item.closest('tr').querySelector('[type=checkbox]').checked)
.map(item => item.value)
}
function getPlans() {
return Array.from(document.querySelectorAll('[name=plans]'))
.filter(item => !item.closest('tr').querySelector('[type=checkbox]').checked)
.map(item => item.value)
}
function getValues() {
return comp.reduce((arr, item, idx) => arr.concat([item, plans[idx]]), [])
}
<table>
<tbody>
<tr class="checkRowedit">
<td><label>220</label></td>
<td><input name="component" type="text" value="John"></td>
<td><input name="plans" type="text" value="9980"></td>
<td><input type="checkbox" value="220" checked="checked"></td>
</tr>
<tr class="checkRowedit">
<td><label>330</label></td>
<td><input name="component" type="text" value="Shan"></td>
<td><input name="plans" type="text" value="966"></td>
<td><input type="checkbox" value="330" checked="checked"></td>
</tr>
<tr class="checkRowedit">
<td><label>440</label></td>
<td><input name="component" type="text" value="Irfan"></td>
<td><input name="plans" type="text" value="953"></td>
<td><input type="checkbox" value="440" checked="checked"></td>
</tr>
<tr class="checkRowedit">
<td><label>550</label></td>
<td><input name="component" type="text" value="Khalid"></td>
<td><input name="plans" type="text" value="897"></td>
<td><input type="checkbox" value="550" checked="checked"></td>
</tr>
</tbody>
</table>

how to in set javascript id in input value

i want to inset my javascript id in to the place of input value .
if i give Interest name input value="100"
how can i get tc named table input value="75"
my input form
<tr>
<th>Loan Amount</th>
<th>INTEREST RATE %</th>
<tr>
<tbody>
<td><input disabled type="" name="tc" id="int_amount" class="formcontrol"value=""/></td>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate();"/ class="form-control" value=""/></td>
</tr>
</tbody>
javascript
var vatti = document.pricecal.Interest.value;
var Total = vatti -25;
if(vatti = null)
{
document.getElementById("int_amount").innerHTML = "Rs:"+" "+Total;
}
[want out put like this][1]

Hope this helps you.
function calculate(interest){
var vatti = interest.value;
if (vatti != '') {
var Total = vatti - 25;
document.getElementById("int_amount").value = Total;
}else{
document.getElementById("int_amount").value = '';
}
}
<table>
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate(this)" onchange="calculate(this)" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
</table>

Set the .value of the <input> element, not the .innerHTML
document.getElementById("int_amount").value = "Rs:"+" "+Total;

HTML:
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
Javascript:
document.getElementById('input2').onkeyup = function() {
document.getElementById('int_amount').value = (this.value != '') ? 'Rs: ' + (parseInt(this.value)-25) : '';
}

Edit specific row and reset particular fields of a form not working

I have created a form, here when click on edit button from a dynamically created table it is not fetching the form values.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Generate Challan </title>
<link type="text/css" href="styles.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://code.google.com/p/jquery-json/downloads/detail?name=jquery.json-2.2.min.js"></script>
<script type="text/javascript">
data = new Array();
$(document).ready(function(){
$(".addbutton").click(function() {
var row = new Array(12);
row[0] = $("#txtbox1").val();
row[1] = $("#txtbox2").val();
row[2] = $("#txtbox3").val();
row[3] = $("#txtbox4").val();
row[4] = $("#H1").val();
row[5] = $("#I1").val();
row[6] = $("#G1").val();
row[7] = $("#J1").val();
row[8] = $("#B1").val();
row[9] = $("#C1").val();
row[10] = $("#D1").val();
row[11] = $("#E1").val();
data.push(row);
refresh();
});
$('#myform')[0].reset(); //reset form stmt
//Edit function
var $tds = null;
$('#datatable').on('click', 'td:last-child', function (e) {
var $tr = $(this).parent(),
$tds = $tr.children(),
sname = $tds.eq(0).text().trim(),
mon = $tds.eq(1).text().trim();
year = $tds.eq(2).text().trim();
$('#G1 option').each(function () {
if ($(this).text().trim() == sname) {
$(this).prop('selected', true);
return false;
}
});
$('#H1 option').each(function () {
if ($(this).text().trim() == mon) {
$(this).prop('selected', true);
return false;
}
});
$('#I1 option').each(function () {
if ($(this).text().trim() == year) {
$(this).prop('selected', true);
return false;
}
});
$('#J1').val($tds.eq(3).text().trim())
$('#E1').val($tds.eq(4).text().trim())
e.preventDefault();
});
$("#myform").submit(function(){
var val = $.toJSON(data);
$("#data").attr("value",val);
if(data.length == 0){
alert("Table is empty !");
return false;
}else{
return true;
}
});
});
function refresh(){
$("#datatable").find("tr:gt(1)").remove();
publishtable();
}
function publishtable(){
for(var c=0;c<data.length;c++){
var trow = $('<tr valign="middle">').addClass("contact");
$("<td>").text(c+1).appendTo(trow);
for(var i=0;i<12;i++){
$("<td>").text(data[c][i]).appendTo(trow);
}
var abutton = $('<input type="button" class="editrow" value="Edit">');
var acell = $("<td>");
abutton.appendTo(acell);
acell.appendTo(trow);
$("#datatable").append(trow);
}
}
//Summation
function sum() {
var txtFirstNumberValue = document.getElementById('B1').value;
var txtSecondNumberValue = document.getElementById('C1').value;
var txtThirdNumberValue = document.getElementById('D1').value;
var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('E1').value = result;
}
}
</script>
</head>
<body>
<h2><center>Sample Form</center></h2>
<h5><center>(Rule 23(1) &AMP; Rule 24(1))</center></h5>
<br/><br/>
<table border="0">
<tr>
<td><label for="name">Received from Shri:</label></td>
<td><input type="text" name="name" id="txtbox1" class="txtbox"> </td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input type="text" name="address" id="txtbox2" class="txtbox"> </td>
</tr>
<tr>
<td><label for="address">Email:</label></td>
<td><input type="text" name="email" id="txtbox3" class="txtbox"> </td>
</tr>
<tr>
<td><label for="mobileNo">Mobile No:</label></td>
<td><input type="text" name="mobile" id="txtbox4" class="txtbox"> </td>
</tr>
<tr>
<td> <label for="month">Month:</label></td>
<td><select name="month" id="H1">
<option>Select Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select></td>
<td><label for="year">Year:</label></td>
<td><select name="year" id="I1">
<option>Select Year</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select><td>
</tr>
<tr>
<td><label for="serviceName">Service Name:</label></td>
<td><select name="G1" id="G1">
<option>services</option>
</select></td>
</tr>
<tr>
<td><label for="details">Details:</label></td>
<td><input type="text" name="details" id="J1" class="txtbox" ></td>
</tr>
<tr>
<td><label for="tax">Tax:</label></td>
<td><input type="text" name="tax" id="B1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="cess">Cess:</label></td>
<td><input type="text" name="cess" id="C1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="penalty">Interest/Penalty:</label></td>
<td><input type="text" name="penalty" id="D1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="total">Total:</label></td>
<td><input type="text" name="total" id="E1" value="" class="txtbox" /></td>
</tr>
<td>
<input type="button" name="mybutton" class="addbutton" id="addbutton" value="Add">
</td>
</tr>
</table>
<br/>
<br/>
<br/><br/><br/>
<table id="datatable" class="contacts" border="1">
<thead>
<tr>
<td class="contactDept" colspan="13">Generated rows</td>
</tr>
</thead>
<tbody>
<tr class="contact_head">
<td>S.No.</td>
<td>Name</td>
<td>Address</td>
<td>Email</td>
<td>Mobile</td>
<td>Month</td>
<td>Year</td>
<td>Service</td>
<td>Details</td>
<td>Tax</td>
<td>Cess</td>
<td>Penalty</td>
<td>Total</td>
<!--<td><a href="#" >Edit</a></td>-->
</tr>
</tbody>
</table>
<br/>
<form id="myform" action="save/saveTable.action" method="post">
<input type="hidden" id="data" name="data">
<input type="submit" name="submitbutton" class="submitbutton" id="submitbutton" value="Submit Form">
</form>
Here when click on add, form values are displaying on the table. When click on submit button, I am passing the table(dynamically generated table) to some action class. Before submitting the table I have to perform edit operation. I have written a code for edit function but unable to edit. Please help me to solve..

You made a mistake in your var declaration.
For exemple, you have written mon = $tds.eq(1).text().trim();
It should be mon = $tds.eq(5).text().trim();
Because $tds.eq(1) is the name, not the month.
That's why
$('#H1 option').each(function () {
if ($(this).text().trim() == mon) {
$(this).prop('selected', true);
return false;
}
});
never appends.
Please see this working demo
UpDate 1 :
$('#datatable').on('click', 'td:last-child', function (e) {
var $tr = $(this).parent(),
$tds = $tr.children(),
name = $tds.eq(1).text().trim(),
adress = $tds.eq(2).text().trim(),
email = $tds.eq(3).text().trim(),
mobile = $tds.eq(4).text().trim(),
mon = $tds.eq(5).text().trim(),
year = $tds.eq(6).text().trim(),
service = $tds.eq(7).text().trim(),
details = $tds.eq(8).text().trim(),
tax = $tds.eq(9).text().trim(),
cess = $tds.eq(10).text().trim(),
penalty = $tds.eq(11).text().trim(),
sum = $tds.eq(12).text().trim();
...