Develop Reference

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>

Dynamically change textbox id when loop

I'm trying to clone the row in table from the values of the input textbox member and looping it. How can the textbox id change after looping/cloning? Pls help me with my code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.clonedInput:first').hide();
$('member').ready(function(){
$("input").change(function(){
alert("The text has been changed.");
var number = $("#member").val();
var e = $('.clonedInput:first');
$('.clonedInput').not('.clonedInput:first').remove();
for (i=0;i<number;i++) {
e.show().clone().insertAfter(e);
}
$('.clonedInput:first').hide();
});
});
</script>
</head>
<body>
<label>Number of boxes: </label><input type="number" id="member">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<td>Length</td>
<td>Width</td>
<td>Height</td>
<td>Volumetric Weight</td>
<td>Total Weight</td>
</tr>
</thead>
<tbody class = "tbodyClone">
<tr id="clonedInput1" class="clonedInput">
<td><input id="length" name="length" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="width" name="width" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="height" name="height" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="volumetric_weight" name="volumetric_weight" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="total_weight" name="total_weight" required type="text" class="form-control" placeholder="" value="" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Thank you in advance!
I was trying this inside the for loop. But i dont know what am i doing wrong
var cloneIndex=0;
$(this).parents(".clonedInput").clone()
.appendTo(".tbodyClone")
.attr("id", "clonedInput" + cloneIndex)
.find("*")
.each(function () {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cloneIndex);
}
})
cloneIndex++;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.clonedInput:last').hide();
$('member').ready(function(){
$("input").change(function(){
alert("The text has been changed.");
var number = $("#member").val();
var e = $('.clonedInput:first');
$('.clonedInput').not('.clonedInput:first').remove();
for (i=0;i<number;i++) {
var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".clonedInput").length;
e.show().clone().insertBefore(e)
.attr("id", "clonedInput" + cloneIndex)
.find("*")
.each(function () {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cloneIndex);
}
})
}
$('.clonedInput:last').hide();
});
});
</script>
</head>
<body>
<label>Number of boxes: </label><input type="number" id="member">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<td>Length</td>
<td>Width</td>
<td>Height</td>
<td>Volumetric Weight</td>
<td>Total Weight</td>
</tr>
</thead>
<tbody class = "tbodyClone">
<tr id="clonedInput1" class="clonedInput">
<td><input id="length0" name="length" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="width0" name="width" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="height0" name="height" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="volumetric_weight0" name="volumetric_weight" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="total_weight0" name="total_weight" required type="text" class="form-control" placeholder="" value="" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

unable to show table hidden row

In my application have a table and one tr is display:none. I want to show using jquery.
$(document).on('click','.btn',function(){
var name = $('#name').val();
var email = $('#email').val();
var phno = $('#phno').val();
var mes= $('#message');
if (phno.length == 10) {
}else{
mes.style.display = "block";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<tbody>
<tr>
<td><label>NAME</label></td>
<td><input type="text" class="form-control" id="name" style="text-transform:uppercase" name="txtname"></td>
</tr>
<tr>
<td><label>EMAIL</label></td>
<td><input type="email" class="form-control" id="email" name="txtemail"></td>
</tr>
<tr>
<td><label>PHONE NO.</label></td>
<td><input type="text" class="form-control" id="phno" maxlength="10" name="txtphno"></td>
</tr>
<tr id="message" style="display: none; color: red;">
<td>Invalid Phone Number</td>
</tr>
<tr>
<td colspan="2">
<button class="btn btn-success btn-lg btn-block" type="submit">REFER</button>
</td>
</tr>
</tbody>
</form>
this is my table. I want to show message row for 5 seconds.I am unable to do that.
this is my jquery. But it is not working. Please help me.

You should use $("#name") to get an element istead of ("#name") and querySelectorAll will retrieve a list of elements matching with input. Instead of this use $("#message") to get element.
Use below code:
$(document).on('click','.btn',function(){
var name = $('#name').val();
var email = $('#email').val();
var phno = $('#phno').val();
var mes= $('#message');
if (phno.length == 10) {
}else{
$('#message').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><label>NAME</label></td>
<td><input type="text" class="form-control" id="name" style="text-transform:uppercase" name="txtname"></td>
</tr>
<tr>
<td><label>EMAIL</label></td>
<td><input type="email" class="form-control" id="email" name="txtemail"></td>
</tr>
<tr>
<td><label>PHONE NO.</label></td>
<td><input type="text" class="form-control" id="phno" maxlength="10" name="txtphno"></td>
</tr>
<tr id="message" style="display: none; color: red;">
<td>Invalid Phone Number</td>
</tr>
<tr>
<td colspan="2">
<button class="btn btn-success btn-lg btn-block" type="submit">REFER</button>
</td>
</tr>
</tbody>
</table>
<input class="btn" value="click me" type="button"/>

Javascript multiplication when add row

I have a problem with my code, when I add the javascript multiplication not running, but at first row just fine. I think the problem id must be unique and i change to name, but still not work.
You can try mycode below.
function multiplyBy() {
num1 = document.getElementById("input1").value;
num2 = document.getElementById("input2").value;
document.getElementById("output").value = num1 * num2;
}
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append('<tr><td>1</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control" name="harga_satuan[]" id="input1" onkeyup="calc()" value="" type="text"></td><td><input class="form-control" id="input2" onkeyup="calc()" name="jumlah_beli[]" type="text"></td><td><input class="form-control" name="sub_total[]" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" id="cariBrg" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control" name="harga_satuan[]" id="input1" onkeyup="multiplyBy()" value="" type="text">
</td>
<td>
<input class="form-control" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control" name="sub_total[]" id="output" onkeyup="multiplyBy()" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>

You are using same id multiple times and it gives wrong behavior with jquery/javascript. I have added some classes into each text boxes and replaced mutiplyby function with on keyup jquery function.
Try this with your page and see it gives you your desired output.
$(document).on('keyup','.input',function(){
var num1 = $(this).parents('tr:first').find('.input:first').val();
var num2 = $(this).parents('tr:first').find('.input:last').val();
$(this).parents('tr:first').find('.sub-total').val(num1 * num2);
});
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append('<tr><td>1</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control input input1" name="harga_satuan[]" id="input1" onkeyup="multiplyBy(this)" value="" type="text"></td><td><input class="form-control input input2" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text"></td><td><input class="form-control sub-total" name="sub_total[]" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" id="cariBrg" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control input" name="harga_satuan[]" id="input1" onkeyup="multiplyBy()" value="" type="text">
</td>
<td>
<input class="form-control input" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control sub-total" name="sub_total[]" id="output" onkeyup="multiplyBy()" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>

The values of id attributes must be unique across the whole document. Each time you do the calculation you are adding another element with the id output. The DOM doesn't know which one you mean.

I think the problem id must be unique and i change to name
Yes that's it, the id should be unique in the same document, instead you don't need id's here it will be better to use common classes :
<tr>
<td>
<input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control calculation" name="harga_satuan[]" value="" type="text">
</td>
<td>
<input class="form-control calculation" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control output" name="sub_total[]" id="" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
NOTE : No need for inline-events better to attach your event in the JS code, Check my suggestion using input event that is more efficient than keyup when you track the user input's.
I've added also an index to enumerate the rows...
Hope this helps.
Working Snippet :
$(document).ready(function() {
var index = 2;
$("#addCF").click(function() {
$("#customFields").append('<tr><td>'+index+'</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control calculation" name="harga_satuan[]" value="" type="text"></td><td><input class="form-control calculation" name="jumlah_beli[]" type="text"></td><td><input class="form-control output" name="sub_total[]" value="" type="text"></td><td><button class="remCF"><i class="fa fa-eye" style="color:red;"></i></button></td></tr>');
index++;
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
$("table").on('input', '.calc', function(){
var parent_row = $(this).closest('tr');
var num1 = parent_row.find('[name="harga_satuan[]"]').val();
var num2 = parent_row.find('[name="jumlah_beli[]"]').val();
parent_row.find('.output').val(num1*num2);
});
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td><input class="form-control calc" name="harga_satuan[]" value="" type="text"></td>
<td><input class="form-control calc" name="jumlah_beli[]" type="text"></td>
<td><input class="form-control output" name="sub_total[]" id="" type="text"></td>
<td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>

Save inputs in array and display all item jquery\ javascript

I am a beginner in jQuery. I want all my input value of my form in an array = (item 01, item 02 and and) save ..
It should show items in a table?
What I have done and it does not work:
<form id="form_id">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<input type="submit" value="submit" id="submit-button" />
</form>
<div id="table">
<h2>List of all person</h2>
<table class="footable">
<thead>
<tr>
<th data-class="expand"> First Name </th>
<th> Last Name </th>
</tr>
</thead>
<tbody>
<tr>
<td>e.g --> array[1].firstname</td>
<td>e.g --> array[1].lastname</td>
</tr>
</tbody>
</table>
</div>
The Javascript code:
$(function() {
$('#submit-button').click(function() {
var formInputs = new Array();
//Get the form ID
var id = $(this).parent().attr('id');
$('#' + id + ' input').each(function() {
//Get the input value
var inputValue = $(this).val();
//Get the input id
var inputId = $(this).attr('id');
//Add them to the array
formInputs[inputId] = inputValue;
});
show....
});
});

try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit-button").click(function(){
var data = $('#form_id').serializeArray();
var obj = {};
for (var i = 0, l = data.length; i < l; i++) {
obj[data[i].name] = data[i].value;
}
$('table.footable tbody').append('<tr><td>'+obj['firstname']+'</td><td>'+obj['lastname']+'</td></tr>');
$("#firstname").val('');
$("#lastname").val('');
})
})
</script>
<form id="form_id">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname" value="" placeholder="Max" required="required" autofocus="autofocus" />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" value="" placeholder="Max" required="required" autofocus="autofocus" />
<input type="button" value="submit" id="submit-button" />
</form>
<div id="table">
<h2>List of all person</h2>
<table class="footable">
<thead>
<tr>
<th data-class="expand"> First Name </th>
<th> Last Name </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

This should work
<form id="form_id">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<input type="button" value="submit" id="submit-button" />
</form>
<div id="table">
<h2>List of all person</h2>
<table class="footable">
<thead>
<tr>
<th data-class="expand">First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
var names = [],
tbody = $("#table tbody");
function getInfo(e) {
var nameObj = {
first: e.target.form[0].value,
last: e.target.form[1].value
};
names.push(nameObj);
e.target.form[0].value = "";
e.target.form[1].value = "";
tbody.empty();
names.forEach(function (name) {
var tr = $("<tr>");
tr.append($("<td>").text(name.first));
tr.append($("<td>").text(name.last));
tbody.append(tr);
});
}
$("#submit-button").on("click", getInfo);
On jsfiddle