This script works fine for me:
<script>
calculate = function(){
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)* parseInt(minutes);
}
</script>
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td>
<input class="form-control"type="text" required="required" placeholder="Symptoms" name="Symptoms[]">
</td>
<td>
<input class="form-control" type="text" required="required" placeholder="GivenMedicin" name="GivenMedicin[]">
</td>
<td>
<input id="a1" class="form-control" type="text" required="required" placeholder="UnitePrice" name="UnitePrice[]" onblur="calculate()" >
</td>
<td>
<input id="a2" class="form-control" type="text" required="required" placeholder="Quentity" name="Quentity[]" onblur="calculate()" >
</td>
<td>
<input id="a3" class="form-control" type="text" required="required" placeholder="SubTotal" name="SubTotal[]" >
</td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<input class="submit" type="submit" value="Confirm" />
<input type="hidden" value="<?php echo $PatientIDSearch ?>" name="PatientIDSearch" />
</form>
But I need to calculate All Subtotal
Some issues:
If you add rows, you'll have to avoid that you get duplicate id property values in your HTML. It is probably easiest to just remove them and identify the input elements via their names, which does not have to be unique
It is bad practice to assign to a non-declared variable. Use var, and in the case of functions, you can just use the function calculate() { syntax.
Make the subtotal input elements read-only by adding the readonly attribute, otherwise the user can change the calculated total.
Instead of responding on blur events, you'll get a more responsive effect if you respond to the input event. And I would advise to bind the event handler via JavaScript, not via an HTML attribute.
I would fix some spelling errors in your elements (but maybe they make sense in your native language): Quantity with an 'a', UnitPrice without the 'e'.
You can use querySelectorAll to select elements by a CSS selector, and then Array.from to iterate over them.
See below snippet with 2 rows:
function calculate(){
var unitPrices = document.querySelectorAll('[name=UnitPrice\\[\\]]');
var quantities = document.querySelectorAll('[name=Quantity\\[\\]]');
var subTotals = document.querySelectorAll('[name=SubTotal\\[\\]]');
var grandTotal = 0;
Array.from(subTotals, function (subTotal, i) {
var price = +unitPrices[i].value * +quantities[i].value;
subTotal.value = price;
grandTotal += price;
});
// Maybe you can also display the grandTotal somehwere.
}
document.querySelector('form').addEventListener('input', calculate);
input { max-width: 7em }
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"" ></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
</tbody>
</table>
</form>
Related
This question already has answers here:
Form inside a table
(3 answers)
Closed 3 years ago.
My required attribute which i placed inside a row of a table doesn't seem to be working at all.
I tried closing and un-closing the input tags and changing the button type to input type = "submit" but still the problem persist.
<tr>
<form action="">
<td><input type="text" id="itn" required/></td>
<td> <input type="text" id="prc" required/></td>
<td> <input type="text" id="dt" required/></td>
<td><input type="text" id="qn" required/></td>
<td><input type="text" id="am" required/></td>
<button type="button" onclick="add()" class="button button3">
ADD
</button>
</tr>
When I execute the code on my google chrome browser, the browser doesn't show any alert or warnings if i miss out any fields.
Put you table inside a form. This is a basic example and use action. Inside the add function you can put custom validators and submit the form using ajax
function add() {
}
<form action="add()">
<table>
<tr>
<td><input type="text" id="itn" required/></td>
<td> <input type="text" id="prc" required/></td>
<td> <input type="text" id="dt" required/></td>
<td><input type="text" id="qn" required/></td>
<td><input type="text" id="am" required/></td>
<td><button type="submit" class="button button3">
ADD
</button></td>
</tr>
</table>
Try this code
<tr>
<form action="">
<td><input type="text" id="itn" required/></td>
<td> <input type="text" id="prc" required/></td>
<td> <input type="text" id="dt" required/></td>
<td><input type="text" id="qn" required/></td>
<td><input type="text" id="am" required/></td>
<input type="submit" onclick="add()" class="button button3" value="ADD">
</form>
</tr>
Newbie in jquery, need some help with this description.
Suppose, I have 1 textbox that contain the result of Addition of another 2 textbox's.
<input type="text class="tb1">
<input type="text class="tb2">
<input type="text class="result" id="result1">
like this.
Suppose I have 5 textbox's that contain their individual 2 textbox's addition results.
Each Result textbox generate result automatically using jquery script.
So, I have 5 result textbox's with their respective addition result.
Now, I want to sum of the values in all 5 result texbox's again in another textbox when i click on checkbox automatically by using jquery or javascript script.
How can I achive this task ?
refer image for understanding of question.
http://i.stack.imgur.com/iFF46.jpg
Assuming that the number 5 of the text boxes remains the same here is a solution for your problem. ( Without validations )
$("#add").click(function() {
$("#result1").val(parseInt($("#box1").val()) + parseInt($("#box2").val()));
$("#result2").val(parseInt($("#box3").val()) + parseInt($("#box4").val()));
$("#result3").val(parseInt($("#box5").val()) + parseInt($("#box6").val()));
$("#result4").val(parseInt($("#box7").val()) + parseInt($("#box8").val()));
$("#result5").val(parseInt($("#box9").val()) + parseInt($("#box10").val()));
});
$( "#final-check" ).change(function() {
var finalResult = 0;
for (var i = 1; i <= 5; i++) {
finalResult = finalResult + parseInt($("#result" + i).val());
}
$("#final-result").val(finalResult);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" id="box1">
</td>
<td>+</td>
<td>
<input type="text" id="box2">
</td>
<td>=</td>
<td>
<input type="text" id="result1">
</td>
</tr>
<tr>
<td>
<input type="text" id="box3">
</td>
<td>+</td>
<td>
<input type="text" id="box4">
</td>
<td>=</td>
<td>
<input type="text" id="result2">
</td>
</tr>
<tr>
<td>
<input type="text" id="box5">
</td>
<td>+</td>
<td>
<input type="text" id="box6">
</td>
<td>=</td>
<td>
<input type="text" id="result3">
</td>
</tr>
<tr>
<td>
<input type="text" id="box7">
</td>
<td>+</td>
<td>
<input type="text" id="box8">
</td>
<td>=</td>
<td>
<input type="text" id="result4">
</td>
</tr>
<tr>
<td>
<input type="text" id="box9">
</td>
<td>+</td>
<td>
<input type="text" id="box10">
</td>
<td>=</td>
<td>
<input type="text" id="result5">
</td>
</tr>
</table>
<button id="add">add</button>
<input type="text" id="final-result">
<input type="checkbox" id="final-check">
You can add any number of text boxes and get your results.
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" id="mainTotBox" value="0">
</div>
$(".textBox").on("change", function(){
var total = 0;
var thisInput = this;
$(this).closest("div").find("input[class='textBox']").each(function(index, inputEle){
total += window.parseInt($(inputEle).val());
$(thisInput).closest("div").find(".resultBox").val(total);
});
var mainTot = 0;
$(".resultBox").each(function(index, inputEle){
mainTot += window.parseInt($(inputEle).val());
});
$("#mainTotBox").val(mainTot);
});
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="result" id="result">
<script>
var result=0;
// Loop thru each input field that has class tb, take its numeric value
// and add it to result
function AddEmUp()
{
$("input.tb").each(
function()
{
result=result+Number( $(this).val() );
});
// Display the result in input box with id=result
$("#result").val( result);
}
// Execute AddEmUp when any one of the input fields with class tb is clicked
$("input.tb").click( AddEmUp );
</result>
I'm trying to grab the value of sibling input fields in a form. The goal is to compare two date fields; the field that just changed and the other date field in that form. Each of the date fields is class "adate". I can get the value of teh current field but when I try to grab the other field in the sibling set, I get 'undefined' instead of the value of the field. Here's the javascript code:
$(".adate").change(function(){
var name = $(this).attr("name");
if (name == 'start') {
var start = new Date($(this).val());
var end = new Date($(this).siblings('[name="end"]').val());
} else {
var end = new Date($(this).val());
var sibs = $(this).siblings('.adate');
var start = new Date(sibs.eq(0).val());
}
if(end < start) alert("The end date must be after the start date.");
});
Here's the html:
<div class='jumbotron'>
<table>
<tr><td>Type</td><td>Start Date</td><td>End Date</td><td>By</td><td></td><td></td></tr><form action="manage.php" method="post">
<tr>
<td ><select name="type" class="form-control" style="width:auto;"><option value="hunt" selected >hunt</option><option value="closed" >closed</option><option value="snow" >snow</option></select></td><td><input type="date" name="start" value="2015-12-07" class="form-control adate" /></td>
<td><input type="date" name="end" value="2015-12-09" class="form-control adate" /></td>
<td><input type="text" name="uid" value="phil" class="form-control" readonly style="width:80px;" /></td>
<td><input type="hidden" name="id" value="1" /><button class="btn btn-sm btn-primary btn-block" type="submit">Save</button></td></form>
<td><form action="manage.php" method="post"><input type="hidden" name="id" value="1" /><input type="hidden" name="delete" value="delete" /><button class="btn btn-sm btn-primary btn-block" type="submit" style="background-color:red; " >Del</button></form></td>
</tr><form action="manage.php" method="post">
<tr>
<td><select name="type" class="form-control" style="width:auto;"><option value="hunt" >hunt</option><option value="closed" >closed</option><option value="snow" >snow</option></select></td>
<td><input type="date" name="start" class="form-control adate" value="2015-11-17" /></td>
<td><input type="date" name="end" class="form-control adate" /></td>
<td><input type="text" name="uid" value="phil" class="form-control" style="width:80px;" readonly/></td>
<td><button class="btn btn-sm btn-primary btn-block" type="submit">Add</button></form>
</tr>
</table>
</div>
What am I doing wrong??
Here is one way of doing it, assuming that you have only two distinctly named input fields. The advantage here is that the elements are picked out whether or not they are siblings.
$(".adate").change(function() {
var theRow = $(this).parents("tr");
/* theTag is for demo only, shows that the right row is picked out */
var theTag = theRow.attr('class');
alert(theTag);
var theStartDate = new Date($(theRow).find(".adate[name='startDate']").val());
var theEndDate = new Date($(theRow).find(".adate[name='endDate']").val());
if (theEndDate < theStartDate) {
alert("The end date must be after the start date.");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr class="row1">
<td>
<input class="adate" type="text" name="startDate" value="2015-10-10">
</td>
<td>
<input class="adate" type="text" name="endDate" value="2015-10-10">
</td>
</tr>
<tr class="row2">
<td>
<input class="adate" type="text" name="startDate" value="2015-10-10">
</td>
<td>
<input class="adate" type="text" name="endDate" value="2015-10-10">
</td>
</tr>
</table>
I have a table
<table>
<tbody>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
</tbody>
</table>
How can I update the total input field when a change in quantity or price happens?
I have thought of something like
$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
$(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});
but it seems a bit unhandy.
You can use:
$('table tbody tr td').find('input').keyup(function() {
var total=0;
total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
$(this).closest('tr').find('input:last').val(total)
});
Working Demo
Much easy to read and control if you can assign some dummy class to quantity, price and total input.
Something like this:
HTML
<table>
<tbody>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
</tbody>
</table>
Script
$('table tbody tr').find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('tr');
var quantity = parseInt(parent.find('.qty').val())||0;
var price = parseInt(parent.find('.prc').val())||0;
parent.find('.total').val(quantity*price);
});
Check working example here
Personally, i prefer not to select elements by their position. If you wind up changing them later, or adding another your code is broken.
I would do something like:
$(this).closest('tr').find('input[name=total]').val(?);
I have a table with 3 table rows, each row contains 5 columns with input text boxes, the last column is for the total of the values inputted in the 4 columns. I want to calculate the total automatically using jquery or javascript after the 4 columns was filled with values. How could I do this? Here is my table code.
Table
<table name="tbl_a" id="tbl_a">
<tr>
<td><span style="margin-left:30px;">a. Provision of certified seeds</span></td>
<td>no. of bags</td>
<td>per AT</td>
<td><input type="text" class="form-control" name="at[a]" id="a" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[b]" id="b" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[c]" id="c" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[d]" id="d" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_1]" id="total_1" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
<td></td>
<td>no. of farmers</td>
<td></td>
<td><input type="text" class="form-control" name="at[e]" id="e" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[f]" id="f" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[g]" id="g" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[h]" id="h" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_2]" id="total_2" value="" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
<td style="text-align:center;">Rehab Seeds</td>
<td>no. of bags</td>
<td>per AT</td>
<td><input type="text" class="form-control" name="at[i]" id="i" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[j]" id="j" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[k]" id="k" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[l]" id="l" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_3]" id="total_3" value="" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
</table>
First of all please google for what you wanted to achieve, learn yourself, try to find the solution. If you still not succeeded, ask question with the relevant code that you have tried and with some playgrounds such as jsfiddle.net or jsbin.com etc.
However, here is the script which I used. I added total to the last input field.
$(function () {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
$(this).find('input[type=text]').bind("keyup", function () {
calculateSum();
});
});
function calculateSum() {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
var sum = 0;
$(this).find('input[type=text]').not('.total').each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$(this).find('.total').val(sum.toFixed(2));
});
}
});
Here is the result. In this script, you can have any number of rows, but the last row needed to have a different class name otherwise its value also added to the total.
On input change, calculate inputs's total. If one input is empty return, if not assign total to last input of tr.
$(".form-control").change(function(){
var tr = $(this).parents("tr");
var total = 0;
for (var i = 0; i < tr.find("input").length; i++) {
if ($(tr).find("input").eq(i).val() == 0 || $(tr).find("input").eq(i).val() == "")
return;
total += parseInt($(tr).find("input").eq(i).val());
}
$(tr).find("input").eq($(tr).find("input").length-1).val(total);
}