Search jQuery

jQuery Forum

multiplication in dinamic row

in Using jQuery • 8 years ago

hello Jqueryer,

how can i make multiplication in dinamic row, i just succes make it in the first row, hope fully by image can make you understand what my problem,

and this is my code view

<table class="table table-bordered">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>#</th>
<th>Kode Barang</th>
<th>Nama Barang</th>
<th>Stock</th>
<th>Jumlah</th>
<th>Harga</th>
<th>Total</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td><span id='snum'>1.</span></td>
<td><input class="form-control" type='text' id='kodebarang_1' name='kodebarang[]'/></td>
<td><input class="form-control" type='text' id='namabarang_1' name='namabarang[]' readonly /></td>
<td><input class="form-control" type='text' id='stock_1' name='stock[]' readonly /></td>
<td><input class="form-control" type='text' id='jumlah_1' name='jumlah[]' onkeyup="hitung2();" /> </td>
<td><input class="form-control" type='text' id='harga_1' name='harga[]' onkeyup="hitung2();" /> </td>
<td><input class="form-control" type='text' id='total_1' name='total[]'/> </td>
</tr>
</table>
<button type="button" class='btn btn-danger delete'>- Delete</button>
<button type="button" class='btn btn-success addmore'>+ Add More</button>
<button type="submit" class="btn btn-primary">Submit</button>

and this is my jquery multiplication

function hitung2() {
var a = $("#jumlah_1").val();
var b = $("#harga_1").val();
c = a * b; //a kali b
$("#total_1").val(c);
}

i think my problem is how to make it in array ? thanks for any respon, Thanks

Replies(13)

jakecigar

Re: multiplication in dinamic row

8 years ago

function hitung2(el) {
var row = $(el).closest("tr"),
inputs = row.find("[type=text]")
jumlah = inputs.eq(3).val(),
harga = inputs.eq(4).val();
inputs.eq(5).val(jumlah * harga)
}

https://jsfiddle.net/hadttxrd/ <--

JΛ̊KE

PS I updated the HTML too!

Freddy Si..

Re: Re: multiplication in dinamic row

8 years ago

oh jake i forgot to give js for add row, i know why your advice doesnt work, because i have some script add auto in js line number 6, Thanks for fast respon jake

$(".addmore").on('click',function(){
count=$('table tr').length;
var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>";
data +="<td><input class='form-control' type='text' id='kodebarang_"+i+"' name='kodebarang[]'/></td> <td><input class='form-control' type='text' id='namabarang_"+i+"' name='namabarang[]'/></td><td><input class='form-control' type='text' id='stock_"+i+"' name='stock[]'/></td><td><input class='form-control' type='text' id='jumlah_"+i+"' name='jumlah[]' /></td><td><input class='form-control' type='text' id='harga_"+i+"' name='harga[]' /></td><td><input class='form-control' type='text' id='total_"+i+"' name='total[]'/></td></tr>";
$('table').append(data);
row = i ;
$('#kodebarang_'+i).autocomplete({
source: function( request, response ) {
$.ajax({
url: 'http://localhost/code_cipta/item',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'country_table',
row_num : row
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#namabarang_'+id[1]).val(names[1]);
$('#stock_'+id[1]).val(names[2]);
}
});
//kasih nomor urut
$('#namabarang_1').autocomplete({
source: function( request, response ) {
$.ajax({
url: 'http://localhost/code_cipta/item',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
//ini nama field yang di form
type: 'namabarang',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[1],
value: code[1],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#stock_1').val(names[2]);
$('#kodebarang_1').val(names[0]);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
//kasih phone code
$('#stock_1').autocomplete({
source: function( request, response ) {
$.ajax({
url: 'http://localhost/code_cipta/item',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'stock',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[2],
value: code[2],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#jumlah_1 ').val(names[3]);
$('#namabarang_1 ').val(names[1]);
$('#kodebarang_1').val(names[0]);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
//your advice js
function hitung2(el) {
var row = $(el).closest("tr"),
inputs = row.find("[type=text]")
jumlah = inputs.eq(3).val(),
harga = inputs.eq(4).val();
inputs.eq(5).val(jumlah * harga)
}

jakecigar

Re: multiplication in dinamic row

8 years ago

You don’t need to post on other people’s questions to get someone to look at yours.

Notice that the solution I gave you hear is similar to Ben’s.

JΛ̊KE

jakecigar

Re: multiplication in dinamic row

8 years ago

Update the fiddle.

JΛ̊KE

Freddy Si..

Re: Re: multiplication in dinamic row

8 years ago

sorry you suggest me to make jsfidlle my form so people will know is that right ? sorry cause i'm new at this forum and dont know the rules,

jakecigar

Re: multiplication in dinamic row

8 years ago

I see you have ajax autocomplete, ignore that part in the fiddle. And you will have to add jQuery UI js and css to the fiddle.

JΛ̊KE

jakecigar

Re: multiplication in dinamic row

8 years ago

Either you do it or I do it. I might do a simple script, but not something that complex.

JΛ̊KE

Freddy Si..

Re: Re: multiplication in dinamic row

8 years ago

Oke, sorry i just make jsfidlle and broke what you have done, now i'm waiting simple example from you, Thanks for respon

Thanks jake i put both in table and js add row

onkeyup='hitung2(this);' so it works, you are master of jquery, God bless you

jakecigar

Re: multiplication in dinamic row

8 years ago

You didn’t save then share the URL of the jsfiddle.

Did you add the changes I made to the HTML to your dynamic HTML?

JΛ̊KE

Freddy Si..

Re: Re: multiplication in dinamic row

8 years ago

jake i just change litlle bite in js file and it work, look i put onkeyup='hitung2(this);' in add row, i'm not ussually in jsfiddle, do you mind if i show you in pastebin ,

below here my js

http://pastebin.com/2ysKBb1a

and this view table

http://pastebin.com/JLN5Nz6G

my last questin is where is came from var el ?

function hitung2(el) {

var row = $(el).closest("tr"),