I have created a table that contains a dynamic form, so when clicked add button will display a new row with the same form each line. and I have also made the switch to clear the form, but it is not going well. anything because there are other functions in the action to remove that line. The following coding that I have made.
html:
<table class="table table-striped area-table tabel-form-makanan">
<thead>
<tr>
<th>Nama Makanan</th>
<th>Jenis Makanan</th>
<th>Harga Makanan</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/>
<input type="hidden" name="id-makanan[]" class="id-makanan"/>
</td>
<td>
<input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/>
</td>
<td>
<input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/>
</td>
<td>
<a class="btn hapus-baris-makanan" style="display: none;"><i class="icon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary tombol-tambah-makanan" type="button" style="float: right; margin-right: 10px;">Tambah</button>
javascript for dynamic form:
$('.tombol-tambah-makanan').on('click', function(){
var tr = '<tr>\n\
<td><input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\
<td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\
<td><input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\
<td><a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a></td>\n\
</tr>';
$("table.tabel-form-makanan tbody").append(tr);
});
javascript for delete form:
$('.tabel-form-makanan').on( 'click', '.hapus-baris-makanan', function(){
var parent = $(this).parents('tr');
var harga = $('.harga-makanan', parent).val();
pengurangan_pesanan(harga);
$(this).closest('tr').remove();
});
other javascript:
function pengurangan_pesanan(price) {
if (subtotal > 0) {
var kembali = 0;
subtotal -= parseFloat(price);
$('.subtotal').val(subtotal);
if (cek_bayar != isNaN || cek_bayar != 0) {
kembali = cek_bayar - subtotal;
$('.kembali').val(kembali);
}
}
}
Do you have a solution to this problem, I really need it. thank you
*demo : http://jsfiddle.net/daniwarrior/ANfFe/1/
Related
I have 3 input boxes that trigger the same div that is collapsible
<td>
<input
type="text" name="tbtext1" style="width: 90%;
"data-toggle="collapse" data-target="#exampleModal"
aria-expanded="false" aria-controls="exampleModal" />
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style=" width: 85%; position: relative; right: 0.9rem; "
data-toggle="collapse" data-target="#exampleModal" aria-expanded="false" aria-controls="exampleModal" />
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style="width: 78%; position: relative; right: 2.3rem;"
data-toggle="collapse" data-target="#exampleModal" aria-expanded="false" aria-controls="exampleModal" /><span style="position: relative; right: 1.2rem; ">= $</span>
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style="width: 99%; position: relative; right: 0.8rem; " />
</td>
<div class="collapse" id="exampleModal">
<div class="collapse" id="exampleModal">
<div class="row" style="margin-top:1rem">
<div class="col-md-12">
<h5 class="modal-title" id="exampleModalLabel">Calc phys% using effective age of
<input type="text" id="phys" style="width:3rem" />/Lifespan of <input type="text" id="phys" style="width:3rem" />
</h5>
</div>
</div>
<div class="modal-body">
<table class="innerModalTable" style="width: 100%; text-align: center; border-top: none; margin-left: -1.7rem;">
<tr>
<th class="borderTd " style="text-align:center;border-top:none;border-left:none"> </th>
<th class="borderTd " style="text-align: left; width: 9.3rem; border-top: none; position: relative; left: 2rem;">Physical</th>
<th class="borderTd " style="text-align: center; border-top: none; width: 9rem;">External</th>
<th class="borderTd " style="text-align: center; border-top: none; border-right: none; width: 8rem;">Functional</th>
<th> </th>
</tr>
<tr>
<td class="borderTd ">% of Cost New</td>
<td class="borderTd "><input type="text" style="width:100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td> </td>
</tr>
<tr>
<td class="borderTd " style="width: 10.3rem; text-align: left;">Lump Sum</td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td> </td>
</tr>
</table>
</div>
</div>
currently its working like this when I click into any into any of the input feild the div toggles (collapses)
I want it to work such that when I focus on any of the input fields the div is opened and when I focus out of it the div is closed
Well I found a solution to it using JQuery to achieve this task
$(function () {
console.log('ready')
$('.toggleDepDiv').on('focus', function () {
var x = document.activeElement.classList;
if (x.contains("toggleDepDiv")) {
$('#exampleModal').collapse('show');
}
});
$('.toggleDepDiv').focusout(function (e) {
if (!e.relatedTarget.classList.contains('toggleDepDiv')) {
$('#exampleModal').collapse('hide');
}
});
});
Basically, I collapsed and uncollapse it using focus and focusout event
I wasn't able to catch the active class using
var x = document.activeElement.classList;
So I used relatedTarget
if (!e.relatedTarget.classList.contains('toggleDepDiv'))
on focus out event
I have a simple html table where the user enters two values in each row.
As they enter data I need the table to automatically multiply the two values in each row and produce the value at the end of the row.
At the same time it should give a running total at the bottom of the table.
I have got the function multiplying values as they are entered but my total always remains zero. I have gone wrong somewhere and just can't see it anymore.
Can you help?
function add_to_total(el) {
var parent = $(el).closest('tr');
var price = parent.find('.price').val() == "" ? 1 : parent.find('.price').val();
var qty = parent.find('.qty').val() == "" ? 1 : parent.find('.qty').val();
var total = price * qty;
var total = total.toFixed(2);
parent.find('.total_price').val(total);
var gtot = 0;
$("#quantum tr > tbody td:nth-child(3)").each(
(_, el) => gtot += Number($(el).text()) || 0
);
$("#sum1").text(gtot);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="quantum" class="table table-bordered table-striped dataTable " role="grid">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Multiplier</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>Past Losses</th>
</tr>
<tr>
<td>Earnings</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px">
</td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
<tr>
<td>Pension</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px">
</td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
<tr>
<td>Care</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px"> </td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th>Total Damages</th>
<th id="sum1" type="number"></th>
</tr>
</tfoot>
</table>
You can't use .text() to get the value of an input.
Loop over the .total_price elements and add their values.
function add_to_total(el) {
var parent = $(el).closest('tr');
var price = parent.find('.price').val() == "" ? 1 : parent.find('.price').val();
var qty = parent.find('.qty').val() == "" ? 1 : parent.find('.qty').val();
var total = price * qty;
var total = total.toFixed(2);
parent.find('.total_price').val(total);
var gtot = 0;
$(".total_price").each(
(_, el) => gtot += Number(el.value) || 0
);
$("#sum1").text(gtot);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="quantum" class="table table-bordered table-striped dataTable " role="grid">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Multiplier</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>Past Losses</th>
</tr>
<tr>
<td>Earnings</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px">
</td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
<tr>
<td>Pension</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px">
</td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
<tr>
<td>Care</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px"> </td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th>Total Damages</th>
<th id="sum1" type="number"></th>
</tr>
</tfoot>
</table>
I have a table with existing jobs and have a button to add new rows to that table if the user wants to add another job. When the user first clicks on the Add New button, a header appears above the first row. There is also the option of removing rows and this is where my problem comes in.
I want the header row to disappear if the user deletes all the rows that they added, but the problem is getting the header row to show up again when the user clicks the Add New button again.
I tried setting the display to none, which worked fine, but when the user starts adding rows again, the header doesn't appear. Setting visibility to hidden works too, but then you see an empty space where the header should be. I also tried adding an if statement to where the header row is displayed for the first time (setting it to table-row if set to none), but then the Add New didn't work at all.
I cannot use jQuery because the page uses MooTools and they conflict. I am very new at MooTools and fairly new to JavaScript, so if someone could point me in the right direction, I would be most grateful.
$(document.body).addEvent('click:relay(.delete-row)', function (e, el) {
try {
e.preventDefault();
.
.
.
if (document.getElementById('addNewJobHeader').style.display !== 'none' && el.get('data-row-id') === '1') {
document.getElementById('addNewJobHeader').setStyle('display', 'none');
}
rewriteeditingselections();
} else {
.
.
.
}
}
} catch (e) {
.
.
.
}
});
function showHeaderRow() {
showHeaderRow = function() {};
Elements.from(connectjobheadertemplate({})).inject($('linkedJobsBody'));
}
function addChildJobRow() {
try {
lastrow++;
let cl = (lastrow % 2 ? 'odd' : 'even');
showHeaderRow();
var refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
Elements.from(connectedjobtemplate({
rownum: lastrow,
cl: cl,
ref: refNum,
nysid: '',
dinNum: '',
warrantNum: ''
})).inject($('linkedJobsBody'));
} catch (e) {
.
.
.
}
}
EDIT:
Adding HTML:
Table for existing jobs:
<form method="post" id="linkedJobsForm" action="###" name="linkedJobsForm">
<table width="100%">
<thead>
<tr class="odd">
<th align="center">Chk</th>
<th>Ref #</th>
<th>Pages</th>
<th>Order Date</th>
<th>NYSID</th>
<th>DIN#</th>
<th>Warrant Number</th>
</tr>
</thead>
<tbody id="linkedJobsBody">
<tr id="connectjobrow0" class="tc ec" data-row-id="0" data-connected-job="44752">
<td width="50" align="center">
<input type="checkbox" name="copyid[]" value="44752" />
</td>
<td>
### </td>
<td>
<input style="background-color: transparent; border: none;" type="text"
data-row-id="0" id="pages[0]"
name="connectedjob[0][pages]" onkeyup="setPages(this.value, this.id)"
value="53" class="pages" size="3"/>
</td>
<td>
<input style="background-color: transparent; border: none;" type="text"
data-row-id="0" id="date[0]"
name="connectedjob[0][orderDate]" onblur="reformatDate(this.value, this.id)"
value="Dec 16, 2015" class="datefield orderDate" size="10">
</td>
<td>
<input style="background-color: transparent; border: none;" type="text"
data-row-id="0" id="pages[0]"
name="connectedjob[0][nysid]" class="nysid" onkeyup="setNYSId(this.value, this.id)"
data-row-id="0" id="nysid[0]"
name="connectedjob[0][nysid]" class="nysid"
value="11991495H">
</td>
<td>
<input style="background-color: transparent; border: none;" type="text"
data-row-id="0" id="pages[0]"
name="connectedjob[0][dinNum]" class="dinNum" onkeyup="setDinNum(this.value, this.id)"
data-row-id="0" id="dinNum[0]"
name="connectedjob[0][dinNum]" class="dinNum"
value="13R2708">
</td>
<td>
<input style="background-color: transparent; border: none;" type="text" onkeyup="setWarrantNum(this.value, this.id)"
data-row-id="0" id="pages[0]"
name="connectedjob[0][warrantNum]" class="warrantNum"
value="0739791">
</td>
</tr>
</tbody>
</table>
Buttons:
<div style="float: right;"><button id="add-new-row" style="text-align:center;margin-top:5px;width:85px;" class="boxbutton">Add New</button> <button style="text-align:center;margin-top: 5px; width: 60px;" id="save" class="boxbutton">Save</button></div><br> </form>
Templates:
<script id="connectjobheadertemplate" type="text/plain">
<table>
<tr class="odd even" id="addNewJobHeader" style="display:table-row;">
<td colspan="7">
<table width="100%" style="border:0px;border-style:hidden;">
<thead>
<tr>
<th style="width: 15%;">Name</th>
<th style="width: 15%;">Ref #</th>
<th style="width: 5%;">Pages</th>
<th style="width: 15%;">Order Date</th>
<th style="width: 15%;">NYSID</th>
<th style="width: 15%;">DIN#</th>
<th style="width: 15%;">Warrant Number</th>
<th style="width: 4%;"></th>
</tr>
</thead>
</table>
</td>
</tr>
</table>
</script>
<script id="connectedjobtemplate" type="text/template">
<tr id="childjobrow1" class="odd" data-row-id="1">
<td colspan="7">
<table width="100%" style="border:0px;border-style:hidden;">
<tr>
<td style="width: 15%;">
<input class="childjobid" type="hidden" id="childjobid1" name="childjobid[1][transcribername]" value="0" />
<input type="hidden" id="transcriberid[1]" name="childjobid[1][transcriberid]" value="" />
<input data-row-id="1" id="assignee[1]" name="childjobid[1][transcribername]" class="" list="transcribers" autocomplete="off" value="" placeholder="Name" size="14" />
</td>
<td style="width: 15%;">
<input data-row-id="1" id="reference[1]" name="childjobid[1][reference]" value="" class="ref" size="14" style="background-color: transparent; border: none;" />
</td>
<td style="width: 5%;">
<input data-row-id="1" id="pages[1]" name="childjobid[1][pages]" value="" class="" style="" size="1"/>
</td>
<td style="width: 15%;">
<input data-row-id="1" id="orderDate[1]" name="childjobid[1][orderDate]" value="" class="" type="date" size="14" />
</td>
<td style="width: 15%;">
<input data-row-id="1" id="nysid[1]" name="childjobid[1][nysid]" value="" class="" size="14" />
</td>
<td style="width: 15%;">
<input data-row-id="1" id="dinNum[1]" name="childjobid[1][dinNum]" value="" class="" size="14" />
</td>
<td style="width: 15%;">
<input data-row-id="1" id="warrantNum[1]" name="childjobid[1][warrantNum]" value="" class="" size="14" />
</td>
<td style="width: 5%;align:center;">
<button data-row-id="1" id="0" class="delete-row" style="text-align:center;margin-top: 5px;width:30px;color: #fff;background-color: #b9534f !important;padding: 5px 10px;font-size: 12px;line-height: 1.5;border-style: none;">X</button>
</td>
</tr>
</table>
</td>
</tr>
</script>
What I did was to count the number of rows in the dynamically created table and set the display equal to none if there was one row in the table (the header row). That made the header row disappear.
$(document.body).addEvent('click:relay(.delete-row)', function (e, el) {
try {
e.preventDefault();
var childjobid = parseInt(el.id);
var rowid = el.get('data-row-id');
if (confirm('This will immediately DELETE the current line.\nAre you sure?')) {
if (childjobid === 0) {
$('childjobrow' + el.get('data-row-id')).remove();
var rowsInTable = document.getElementById('newChildJobTable').rows.length;
if (rowsInTable === 1) document.getElementById('addNewJobHeader').style.display = 'none';
if ($('addNewJobHeader').style.display === 'none') {
$('newChildJobTable').setStyle('display', 'none');
}
rewriteeditingselections();
} else {
.
.
.
}
}
} catch (e) {
.
.
}
});
Then, in the function to add a new row, I checked if the value of the header row was set to none and, if so, set it to 'table-row'.
function addChildJobRow() {
try {
lastrow++;
let cl = (lastrow % 2 ? 'odd' : 'even');
showHeaderRow();
if (document.defaultView.getComputedStyle(document.getElementById('addNewJobHeader'), '').getPropertyValue("display") === 'none') {
$('addNewJobHeader').style.display = 'table-row';
}
var refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
Elements.from(connectedjobtemplate({
rownum: lastrow,
cl: cl,
ref: refNum,
nysid: '',
dinNum: '',
warrantNum: ''
})).inject($('newChildJobTable'));
$('newChildJobTable').setStyle('display', 'table');
} catch (e) {
.
.
.
}
}
I have a table in HTML that I need to convert into excel to complete an order to be sent as eMail attachment.
The table itself is a basket for orders. The client adds the products, the page loads more details from the database (most of the HTML table code is produced in C#). Some Javascript to update the total based on the quantity, etc.
Problem is that for my order report I need to extract all info from different scenarios. Some info is inside the tag, some other is in the “value” propertie and some is modified with javascript.
Most examples in stackOverflow are about getting the info from the tag and totally impossible to adapt to my need.
I have already rebuilt the code for this specific page twice so I wouldn’t be surprised if someone says the structure is all wrong and I need to do it another way.
Am I using inputs wrong?
<table id="tableReport" class="tablePanier">
<tbody>
<tr>
<th class="titles">GenCod</th>
<th class="titles">Auteur</th>
<th class="titles">Titre</th>
<th class="titles">Quantite</th>
<th class="titles">PrixTTC</th>
<th class="titles">TotalPrixTTC</th>
<th class="titles">Delete</th>
</tr>
<tr class="line_hover">
<td>9782871428374</td>
<td>WARNES, TIM</td>
<td>FICHU CANETON</td>
<td>
<input
id="Quantity9782871428374"
onclick="ReCalculateTotal(9782871428374)"
value="1"
min="1"
type="number"
name="fname"
style=" width: 100px; text-align: center; "
/>
</td>
<td id="Prix_TTC">
<input
id="Prix_TTC9782871428374"
type="text"
value="5.2"
name="Prix_TTC"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<input
id="Total9782871428374"
type="text"
name="fname"
value="5.2"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<a href="../panierdecommande.aspx?remove=9782871428374">
<input
type="button"
value="Retirer"
name="fname"
style=" width: 100px; text-align: center; "
/></a>
</td>
</tr>
<tr class="line_hover">
<td>9791021406605</td>
<td>Cuenca, Catherine</td>
<td>REINE MARGOT (LA)</td>
<td>
<input
id="Quantity9791021406605"
onclick="ReCalculateTotal(9791021406605)"
value="1"
min="1"
type="number"
name="fname"
style=" width: 100px; text-align: center; "
/>
</td>
<td id="Prix_TTC">
<input
id="Prix_TTC9791021406605"
type="text"
value="12.95"
name="Prix_TTC"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<input
id="Total9791021406605"
type="text"
name="fname"
value="12.95"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<a href="../panierdecommande.aspx?remove=9791021406605">
<input
type="button"
value="Retirer"
name="fname"
style=" width: 100px; text-align: center; "
/></a>
</td>
</tr>
<tr class="line_hover">
<td>9782371262737</td>
<td>Stone, Liv</td>
<td>Initie-moi. Mes jours contre tes nuits</td>
<td>
<input
id="Quantity9782371262737"
onclick="ReCalculateTotal(9782371262737)"
value="1"
min="1"
type="number"
name="fname"
style=" width: 100px; text-align: center; "
/>
</td>
<td id="Prix_TTC">
<input
id="Prix_TTC9782371262737"
type="text"
value="14.9"
name="Prix_TTC"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<input
id="Total9782371262737"
type="text"
name="fname"
value="14.9"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<a href="../panierdecommande.aspx?remove=9782371262737">
<input
type="button"
value="Retirer"
name="fname"
style=" width: 100px; text-align: center; "
/></a>
</td>
</tr>
</tbody>
</table>
You can use jquery datatable for solution
For example:
https://datatables.net/extensions/buttons/examples/initialisation/export.html
You can trigger the standard button if you want.
Call DataTables export functions from JavaScript
<tr>
<td>Knowledge</td>
<td><input type="text" name="Knowledge" style="height: 30px; width: 220px;" class="computethis" id="knowledge" Placeholder = "Enter Grade" autocomplete ="off" /></td>
</tr>
<tr>
<td>Understanding</td>
<td><input type="text" name="understanding" style="height: 30px; width: 220px;" class="computethis" id="understanding" Placeholder = "Enter Grade" autocomplete ="off" /></td>
</tr>
<tr>
<td>Process or Skills</td>
<td><input type="text" name="process" style="height: 30px; width: 220px;" class="computethis" id="process" Placeholder = "Enter Grade" autocomplete ="off" /></td>
</tr>
<tr>
<td>Performance or Products</td>
<td><input type="text" name="performance" style="height: 30px; width: 220px;" class="computethis" id="products" Placeholder = "Enter Grade" autocomplete ="off" /></td>
</tr>
<tr>
<td>Grade Total </td>
<td><input type="textbox" name="grade" style="height: 30px; width: 220px;" id="totalgrade" Placeholder = "Average Total" autocomplete ="off" readonly="readonly"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan='2'><button class="btn btn-info" style="40px" id="save_button" Onclick="insert();"><i class="fa fa-floppy-o"> Save Grade</i></button><span class="alert alert-success" id="loading"></span></td>
</tr>
I just only had every text box get 25% each;
<script>
// computation of average
jQuery(".computethis").keyup(function(){
var sum = 0;
var avg = 0;
jQuery('.computethis').each(function() {
sum += Number(jQuery(this).val());
});
var $allx = jQuery(':text.computethis');
var $emptyx = $allx.filter('[value=""]');
var num = $allx.length - $emptyx.length ;
if(num > 0) { avg = Number(sum/num); }
// jQuery('#prj_usgtot').val(sum);
jQuery('#totalgrade').val(avg.toPrecision(2));
});
</script>
How can I get every textfield a specific percentage, onkeyup it should automatically compute the average to get the total grade.
Sorry I can't comment yet, but why don't you also create an i that gets i++ as it goes through the each?
In your html, it should just be text. Textbox isn't a type.
Where is the issue?
Here, I have something working that you might like.
It also checks if there is only numbers
$(this).val().match(/^\d+$/)
http://jsfiddle.net/4Buk5/