We Keep Coding

How to insert options in Drop down menu with help of getElementsByName

I am creating multiple row in a table and in my table first cell is drop down menu.
Again, next row with first cell is drop down menu.
I have data in an array. I am not able to set values with getElementById.
and same syntax for getElementsByName is not working.
$("#btn-add-row").click(function(){
var row="<tr> <td><select id='country' name='ct' style='width:275px;'></select></td> <td><input type='text' name='Count' class='form-control'></td> <td><input type='text' required name='Rate' class='form-control'></td> <td><input type='text' name='Bprice' class='form-control' readonly></td> <td><input type='text' required name='Quantity' class='form-control'></td> <td><input type='text' required name='Total' class='form-control'></td> <td><input type='button' value='x' class='btn btn-danger btn-sm btn-row-remove'> </td> </tr>";
$("#product_tbody").append(row);
var countr ;
for(var ia=0;ia<data1.length;ia++){
countr[ia]=data1[ia].Product;
}
$("#ct").select2({
data: countr
});
document.getElementsByName('ct').innerHTML="testing";
$("#ct").eq(0).val("testing");
});

Adding variable value on onchange event

I have a table and i am adding new row through javascript and adding an event on new row as well but it's not working.
Here is my code:
function moreitem() {
document.getElementById('tottr').value = parseInt(document.getElementById('tottr').value) + 1;
ain = document.getElementById('tottr').value;
$('#mytable tbody tr:last')
.after("<tr><td><select name='pid[]' id='' class='form-control' onchange='getstock(this.value,'st" + ain + "','pc" + ain + "')'><option value=''>Select Product</option><option value='1'>Drink</option></select></td><td><input type='text' id='st" + ain + "' placeholder='Available Stock' class='form-control'></td><td><input type='text' id='qty" + ain + "' onchange='gettot(this.value,ain)' name='qty[]' placeholder='Quantity' class='form-control'></td><td><input type='text' id='pc" + ain + "' name='pprice[]' placeholder='Per Piece Price' class='form-control'></td><td><input type='text' name='tprice[]' placeholder='Total Price' id='tp" + ain + "' class='form-control'></td></tr>");
}
function getstock(inval, stid, pcid) {
$.ajax({
url: "getprice.php",
data: "inval=" + inval + "&stid=" + stid + "&pcid=" + pcid,
type: "post",
success: function(e) {
// alert(e);
$('#hide').html(e);
}
})
// alert(inval);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Product</th>
<th>Stock</th>
<th>Qty.</th>
<th>Amount Per Piece</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>
<select name="pid[]" id="" class="form-control" onchange="getstock(this.value,'st1','pc1')">
<option value="1">hello</option>
<option value="2">Hello2</option>
</select>
</td>
<td><input type="text" id="st1" placeholder="Available Stock" class="form-control"></td>
<td><input type="text" id="qty1" onchange="gettot(this.value,1)" name="qty[]" placeholder="Quantity" class="form-control"></td>
<td><input type="text" id="pc1" name="pprice[]" placeholder="Per Piece Price" class="form-control"></td>
<td><input type="text" name="tprice[]" placeholder="Total Price" id="tp1" class="form-control"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
Add More Item
</td>
</tr>
</tfoot>
</table>
<input type="hidden" id="tottr" value="1">
getstock is working for the first row but not for other rows and when i inspect the select dropdown it shows below:
onchange="getstock(this.value," st2','pc2')'="">

Don't do so messy while using parameterize function with html string.
make it simple and pass it to function.
something like below
var stvar="st"+ain;
var pcvar="pc"+ain;
var ain = 1
function moreitem() {
document.getElementById('tottr').value = parseInt(document.getElementById('tottr').value) + 1;
ain = document.getElementById('tottr').value;
var stvar = "st" + ain;
var pcvar = "pc" + ain;
$('#mytable tbody tr:last').after("<tr><td><select name='pid[]' id='sel_"+ain+"' class='form-control'><option value=''>Select Product</option><option value='1'>Drink</option></select></td><td><input type='text' id='st" + ain + "' placeholder='Available Stock' class='form-control'></td><td><input type='text' id='qty" + ain + "' onchange='gettot(this.value,ain)' name='qty[]' placeholder='Quantity' class='form-control'></td><td><input type='text' id='pc" + ain + "' name='pprice[]' placeholder='Per Piece Price' class='form-control'></td><td><input type='text' name='tprice[]' placeholder='Total Price' id='tp" + ain + "' class='form-control'></td></tr>");
$("#sel_"+ain).on("change",function(){
getstock($(this).val(), stvar, pcvar)
})
}
function getstock(v, s, p) {
console.log(v)
console.log(s)
console.log(p)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Product</th>
<th>Stock</th>
<th>Qty.</th>
<th>Amount Per Piece</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>
<select name="pid[]" id="" class="form-control" onchange="getstock(this.value,'st1','pc1')">
<option value="1">hello</option>
<option value="2">Hello2</option>
</select>
</td>
<td><input type="text" id="st1" placeholder="Available Stock" class="form-control"></td>
<td><input type="text" id="qty1" onchange="gettot(this.value,1)" name="qty[]" placeholder="Quantity" class="form-control"></td>
<td><input type="text" id="pc1" name="pprice[]" placeholder="Per Piece Price" class="form-control"></td>
<td><input type="text" name="tprice[]" placeholder="Total Price" id="tp1" class="form-control"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
Add More Item
</td>
</tr>
</tfoot>
</table>
<input type="hidden" id="tottr" value="1">

I think the single quote before getstock and before st2 gets confused. You can escape and print double quotes for onchange event so that the inside single quote and outside double quotes doesn't get confused. I hope the below code helps.
function moreitem(){ document.getElementById('tottr').value=parseInt(document.getElementById('tottr').value)+1;
ain=document.getElementById('tottr').value;
$('#mytable tbody tr:last').after("<tr><td><select name='pid[]' id='' class='form-control' onchange=\"getstock(this.value,'st"+ain+"','pc"+ain+"')\"><option value=''>Select Product</option><option value='1'>Drink</option></select></td><td><input type='text' id='st"+ain+"' placeholder='Available Stock' class='form-control'></td><td><input type='text' id='qty"+ain+"' onchange='gettot(this.value,ain)' name='qty[]' placeholder='Quantity' class='form-control'></td><td><input type='text' id='pc"+ain+"' name='pprice[]' placeholder='Per Piece Price' class='form-control'></td><td><input type='text' name='tprice[]' placeholder='Total Price' id='tp"+ain+"' class='form-control'></td></tr>");
}
function getstock(inval,stid,pcid){
$.ajax({
url:"getprice.php",
data:"inval="+inval+"&stid="+stid+"&pcid="+pcid,
type:"post",
success:function(e){
// alert(e);
$('#hide').html(e);
}
})
// alert(inval);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Product</th>
<th>Stock</th>
<th>Qty.</th>
<th>Amount Per Piece</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>
<select name="pid[]" id="" class="form-control" onchange="getstock(this.value,'st1','pc1')">
<option value="1">hello</option>
<option value="2">Hello2</option>
</select>
</td>
<td><input type="text" id="st1" placeholder="Available Stock" class="form-control"></td>
<td><input type="text" id="qty1" onchange="gettot(this.value,1)" name="qty[]" placeholder="Quantity" class="form-control"></td>
<td><input type="text" id="pc1" name="pprice[]" placeholder="Per Piece Price" class="form-control"></td>
<td><input type="text" name="tprice[]" placeholder="Total Price" id="tp1" class="form-control"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
Add More Item
</td>
</tr>
</tfoot>
</table>
<input type="hidden" id="tottr" value="1">

How to sum values inside loop using onchange javascript

how do i sum values inside loop using javascript onchange / onkeyup ? i put each of them, numbered id based on the loop...
here is my code example
<?php
$no = 1;
foreach($data as $array)
{
echo "<tr>";
echo "<td><input type='number' id='price".$no."' value='.$array['price'].'></td>";
echo "<td><input type='number' id='discount".$no."' onkeyup='keyup(".$no.")'></td>";
echo "<td><input type='number' id='total_price".$no."'></td>";
echo "</tr>";
$no++;
}
<input type='text' readonly id='total_payment'>
and here is my javascript
function keyup(id)
{
var price = $('#price'+id).val();
var discount= $('#discount'+id).val();
total_price = parseFloat(price) - parseFloat(discount);
$('#total_price'+id).val(total_price);
}
when i change the value of discount,it sum all of total_price field into total_payment.
how to do that ? i already set some form to show the example
JSFIDDLE: https://jsfiddle.net/20gb8n1g/

Attaching on keyup handlers on every input and then doing the math should work in a "in real time" fashion
$( document ).ready(function() {
$("body").on("keyup", "input", function(event){
$(this).closest(".line").find(".tot_price").val( $(this).closest(".line").find(".qty").val()*$(this).closest(".line").find(".value").val() );
$(this).closest(".line").find(".total_price").val( $(this).closest(".line").find(".tot_price").val()*1-$(this).closest(".line").find(".discount").val() );
var sum = 0;
$('.total_price').each(function() {
sum += Number($(this).val());
});
$(".grand_total").val(sum);
});
});
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Quantity</td>
<td>Price</td>
<td>Total Price</td>
<td>Discount</td>
<td>Total Price (Discount)</td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='4' style='text-align:right;'>Total Payment</td>
<td><input type='number' class="grand_total"></td>
</tr>
</tfoot>
</table>
Key parts:
Every row has the class "line" to stop looking up when you're doing the math
Every input has a class depending on what it is, instead of an id.
The handler basically does:
check where you triggered "keyup"
Look up to the "line" and then down to the "tot_price"
Change that value to the "value" * "qty" of that "line"
Look up to the "line" and then down to the "total_price"
Change that value to the "tot_price" * 1- "discount" of that "line"
Finally update "grand_total" with the sum of all those "total_price"s

I got it to work on my local machine by taking what you had on your JsFiddle and modifying one of the parseFloat() calls, which you incorrectley called using a capital L like this: parseFLoat(). This should do the trick for you.
Note: Be certain that your path you to your index.js(or whatever file your JavaScript is in) is correct within your <head> tag.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td>Quantity</td>
<td>Price</td>
<td>Total Price</td>
<td>Discount</td>
<td>Total Price (Discount)</td>
</tr>
<tr>
<td><input type='number' readonly value='2'></td>
<td><input type='number' readonly value='20000'></td>
<td><input type='number' id='tot_price1' readonly value='40000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount1' onkeyup='newFunc()'></td>
<td><input type='number' readonly value='40000' id='total_price1'></td>
</tr>
<tr>
<td><input type='number' readonly value='3'></td>
<td><input type='number' readonly value='30000'></td>
<td><input type='number' id='tot_price2' readonly value='90000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount2'></td>
<td><input type='number' readonly value='90000'></td>
</tr>
<tr>
<td><input type='number' readonly value='2'></td>
<td><input type='number' readonly value='10000'></td>
<td><input type='number' id='tot_price3' readonly value='20000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount3'></td>
<td><input type='number' readonly value='20000'></td>
</tr>
<tr>
<td><input type='number' readonly value='4'></td>
<td><input type='number' readonly value='10000'></td>
<td><input type='number' id='tot_price4' readonly value='40000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount4'></td>
<td><input type='number' readonly value='40000'></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='4' style='text-align:right;'>Total Payment</td>
<td><input type='number' ></td>
</tr>
</tfoot>
</table>
</body>
</html>
JS:
function newFunc() {
var total_price = $('#tot_price1').val();
var discount = $('#discount1').val();
n_discount = parseFloat(discount) / 100;
v_discount = parseFloat(total_price) * parseFloat(n_discount);
t_discount = parseFloat(total_price) - parseFloat(v_discount);
$('#total_price1').val(t_discount);
}

i cant output the total amount of price. here is my code.
HTML.
<?php foreach($result as $row): ?>
<!-- <td><input type="hidden" name="material_id[]" value="<?= $order_no = generate_random(5); ?>">
</th> -->
<td><input type="hidden" name="material_id[]" value="<?= encode($row->material_id); ?>">
<?= $row->material_id; ?></td>
<td><input type="hidden" name="" value="<?= $row->material_name; ?>">
<?= $row->material_name; ?></td>
<td><input type="hidden" id="price'<?= $no;?>'" name="material_price[]" value="<?= $row->material_price; ?>">
<?= $row->material_price; ?></td>
<td <?php if($row->material_status == 'Inactive'){
echo 'class="text-danger"';
}else{
echo 'class="text-success"';
} ?> >
<?= $row->material_status; ?>
</td>
<div class="form-group">
<td>
<input type="number" onkeyup="autosum(<?= $no;?>)" id="qty'<?= $no;?>" value="" name="material_qty[]" class="form-control" style="width:80px;height: 30px;"/>
</td>
</div>
<div class="form-group">
<td>
<input type="text" readonly id="total'<?= $no;?>'" value="" class="form-control" style="width:80px;height: 30px;"/>
</td>
</div>
</tr>
<?php $no++; ?>
<?php endforeach;?>
<tr style='position:absolute;margin-left: 895px;margin-top:20px;'>
<td colspan='4' >Grand Total :</td>
<td><input type='number' id="grandtotal" class="form-control" readonly style="width: 80px;"></td>
</tr>
<input type="hidden" name="order_no" value="<?= $order_no = generate_random(5); ?>" style="width:50px;height: 30px;">
<input type="hidden" name="order_id" value="<?= $order_id =generate_random(5); ?>" style="width:50px;height: 30px;">
</tbody>
</table>
<br>
<br>
<br>
<button type="button" class="fadeIn second btn btn-secondary" style="margin-left:890px;margin-top:50px;">CANCEL</button>
<button type="submit" class="fadeIn second btn btn-danger" style="margin-left:1000px;margin-top:-50px;background-color: red;">ORDER</button>
</form>

Javascript Radio add value Textarea

Is there any ways to set a textarea when I clicked a radio button at some row (<tr>) ?
function changeTeks(i){
var teks = '';
var row = $(this).parents('tr');
if(i == '1'){
teks = row.find('input[name="brazil[]"]').val();
}else if(i == '2'){
teks = row.find('input[name="normal[]"]').val();
}else if(i == '3'){
teks = row.find('input[name="gagal[]"]').val();
}else{
teks = "belum";
}
row.find('textarea[name="hasil[]"]').text(teks);
console.log(teks);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 1' />
<input type='hidden' name='normal[]' value='not yet in test 1 ' />
<input type='hidden' name='brazil[]' value='success in test 1' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 1</td>
<td><input type='radio' name='target0[]' value='1' onclick='changeTeks(1)' />
</td>
<td><input type='radio' name='target0[]' value='2' onclick='changeTeks(2)' />
</td>
<td><input type='radio' name='target0[]' value='3' onclick='changeTeks(3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 2' />
<input type='hidden' name='normal[]' value='not yet in test 2' />
<input type='hidden' name='brazil[]' value='success in test 2' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 2</td>
<td><input type='radio' name='target1[]' value='1' onclick='changeTeks(1)' />
</td>
<td><input type='radio' name='target1[]' value='2' onclick='changeTeks(2)' />
</td>
<td><input type='radio' name='target1[]' value='3' onclick='changeTeks(3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 3' />
<input type='hidden' name='normal[]' value='not yet in test 3' />
<input type='hidden' name='brazil[]' value='success in test 3' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 3</td>
<td><input type='radio' name='target2[]' value='1' onclick='changeTeks(1)' />
</td>
<td><input type='radio' name='target2[]' value='2' onclick='changeTeks(2)' />
</td>
<td><input type='radio' name='target2[]' value='3' onclick='changeTeks(3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
</table>
I always get undefined value from the parent. I want to fill textarea with text in input type hidden value for each row (because this hidden value is different for each row)

From the Pranav's comment pass this in your function and the use it inside.
function changeTeks(ele,i){
var teks = '';
var row = $(ele).closest('tr');
if(i == '1'){
teks = row.find('input[name="brazil[]"]').val();
}else if(i == '2'){
teks = row.find('input[name="normal[]"]').val();
}else if(i == '3'){
teks = row.find('input[name="gagal[]"]').val();
}else{
teks = "belum";
}
row.find('textarea[name="hasil[]"]').html(teks);
console.log(teks);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 1' />
<input type='hidden' name='normal[]' value='not yet in test 1 ' />
<input type='hidden' name='brazil[]' value='success in test 1' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 1</td>
<td><input type='radio' name='target0[]' value='1' onclick='changeTeks(this,1)' />
</td>
<td><input type='radio' name='target0[]' value='2' onclick='changeTeks(this,2)' />
</td>
<td><input type='radio' name='target0[]' value='3' onclick='changeTeks(this,3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 2' />
<input type='hidden' name='normal[]' value='not yet in test 2' />
<input type='hidden' name='brazil[]' value='success in test 2' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 2</td>
<td><input type='radio' name='target1[]' value='1' onclick='changeTeks(this,1)' />
</td>
<td><input type='radio' name='target1[]' value='2' onclick='changeTeks(this,2)' />
</td>
<td><input type='radio' name='target1[]' value='3' onclick='changeTeks(this,3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 3' />
<input type='hidden' name='normal[]' value='not yet in test 3' />
<input type='hidden' name='brazil[]' value='success in test 3' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 3</td>
<td><input type='radio' name='target2[]' value='1' onclick='changeTeks(this,1)' />
</td>
<td><input type='radio' name='target2[]' value='2' onclick='changeTeks(this,2)' />
</td>
<td><input type='radio' name='target2[]' value='3' onclick='changeTeks(this,3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
</table>

Cascading onchange calculation in javascript

I have list of materials and rate for each material. When user enters quantity for a material, onchange event triggers and calculates material cost as rate*quantity. This I am able to do. I want the sum of all material cost also. I can do that by adding another javascript function in onchange as onchange="mymultiply(100, 'rate_1','quantity_1');mysummation('cost_1','cost_2',...,'sum_cost')". But how to cascade it?
I want a javascript function to trigger when readonly value (cost_1/cost_2 etc) is changed by onchange in quantity_1/quantity_2 etc. onchange works on user input only. Is there a workaround.
So the sample form looks like this.
<table>
<tr><th>material</th><th>rate</th><th>quantity</th><th>cost</th></tr>
<tr>
<td>Material 1</td>
<td><input type='text' id='rate_1' readonly='true' value='100' /></td>
<td><input type='text' id='quantity_1' onchange="mymultiply('rate_1','quantity_1','cost_1');" /></td>
<td><input type='text' id='cost_1' readonly='true' onchange="mysummation('cost_1','cost_2','cost_3','sum_cost');" /></td>
</tr>
<tr> Row 2 data</tr>
<tr> Row 3 data</tr>
</table>
<input type='text' id='sum_cost' readonly='true' />
Javascript looks something like this...
function mymultiply(rate, quantity, cost){
document.getElementById(cost).value=document.getElementById(quantity).value*document.getElementById(rate).value;
}
function mysummation(cost_1, cost_2, cost_3, sum){
document.getElementById(sum).value=document.getElementById(cost_1).value+document.getElementById(cost_2).value+document.getElementById(cost_3).value;
}

Can you try it
Script
<script>
function mymultiply(quantity){
var rate1=document.getElementById('rate_1').value;
document.getElementById('cost_1').value= parseInt(quantity)*parseInt(rate1);
document.getElementById('cost_2').value= parseInt(quantity)*200;
document.getElementById('cost_3').value= parseInt(quantity)*300;
document.getElementById('sum_cost').value= parseInt(document.getElementById('cost_1').value)+parseInt(document.getElementById('cost_2').value)+parseInt(document.getElementById('cost_3').value);
}
</script>
HTML
<table>
<tr><th>material</th><th>rate</th><th>quantity</th><th>cost1</th><th>cost2</th><th>cost3</th></tr>
<tr>
<td>Material 1</td>
<td><input type='text' id='rate_1' readonly='true' value='100' /></td>
<td><input type='text' id='quantity_1' onKeyUp="mymultiply(this.value);" /></td>
<td><input type='text' id='cost_1' readonly='true' /></td>
<td><input type='text' id='cost_2' readonly='true' /></td>
<td><input type='text' id='cost_3' readonly='true' /></td>
</tr>
<tr> Row 2 data</tr>
<tr> Row 3 data</tr>
</table>
Totla Value<input type='text' id='sum_cost' readonly='true' />
I think you want to trigger one function from another function Try this
$(selector).trigger("change");
or
while u calling its
function mymultiply(rate, quantity, cost){
mysummation('100', '200', '300', '600');//call another function also
}