Refresh PHP variable after user input - javascript

I have a very simple website which helps me to calculate the end of day cash position in my store. Form is here: http://www.073design.nl/kasopmaak/kasopmaak.php#
But now I have to 'click' the "Calculate cash!" button to update the positions.
My questions now; is it possible to add some 'smart' extra code, which updates the totals directly after entering data per line?
Many thanks in advance.
Form uses only this code:
<?php
if(isset($_POST)) {
$total_100 = $_POST['100'] * 100 ;
$total_50 = $_POST['50' ] * 50 ;
$total_20 = $_POST['20' ] * 20 ;
$total_10 = $_POST['10' ] * 10 ;
$total_5 = $_POST['5' ] * 5 ;
$total_2 = $_POST['2' ] * 2 ;
$total_1 = $_POST['1' ] * 1 ;
$total_05 = $_POST['05' ] * 0.5 ;
$total_02 = $_POST['02' ] * 0.2 ;
$total_01 = $_POST['01' ] * 0.1 ;
$total_005 = $_POST['005'] * 0.05 ;
$total = $total_100 + $total_50 + $total_20 + $total_10 + $total_5;
} else {
$total_100 = 0 ;
$total_50 = 0 ;
$total_20 = 0 ;
$total_10 = 0 ;
$total_5 = 0 ;
$total_2 = 0 ;
$total_1 = 0 ;
$total_05 = 0 ;
$total_02 = 0 ;
$total_005 = 0 ;
$total = $total_100 + $total_50 + $total_20 + $total_10 + $total_5 + $total_2 + $total_1 + $total_05 + $total_02 + $total_01 + $total_005 ;
}
?>
<body>
<h1>kas opmaak</h1>
<form action="#" method="POST">
<table>
<tr>
<td><input type="number" name="100" value="<?php echo $_POST['100']; ?>"></td>
<td>X</td>
<td>€ 100</td>
<td> = </td>
<td align="right"><?php echo $total_100;?></td>
</tr>
<tr>
<td><input type="number" name="50" value="<?php echo $_POST['50'];?>"></td>
<td>X</td>
<td>€ 50</td>
<td> = </td>
<td align="right"><?php echo $total_50;?></td>
</tr>
<tr>
<td><input type="number" name="20" value="<?php echo $_POST['20'];?>"></td>
<td>X</td>
<td>€ 20</td>
<td> = </td>
<td align="right"><?php echo $total_20;?></td>
</tr>
<tr>
<td><input type="number" name="10" value="<?php echo $_POST['10'];?>"></td>
<td>X</td>
<td>€ 10</td>
<td> = </td>
<td align="right"><?php echo $total_10;?></td>
</tr>
<tr>
<td><input type="number" name="5" value="<?php echo $_POST['5'];?>"></td>
<td>X</td>
<td>€ 5</td>
<td> = </td>
<td align="right"><?php echo $total_5;?></td>
</tr>
<tr>
<td><input type="number" name="2" value="<?php echo $_POST['2'];?>"></td>
<td>X</td>
<td>€ 2</td>
<td> = </td>
<td align="right"><?php echo $total_2;?></td>
</tr>
<tr>
<td><input type="number" name="1" value="<?php echo $_POST['1'];?>"></td>
<td>X</td>
<td>€ 1</td>
<td> = </td>
<td align="right"><?php echo $total_1;?></td>
</tr>
<tr>
<td><input type="number" name="05" value="<?php echo $_POST['05'];?>"></td>
<td>X</td>
<td>€ 0,50</td>
<td> = </td>
<td align="right"><?php echo $total_05;?></td>
</tr>
<tr>
<td><input type="number" name="02" value="<?php echo $_POST['02'];?>"></td>
<td>X</td>
<td>€ 0,20</td>
<td> = </td>
<td align="right"><?php echo $total_02;?></td>
</tr>
<tr>
<td><input type="number" name="01" value="<?php echo $_POST['01'];?>"></td>
<td>X</td>
<td>€ 0,10</td>
<td> = </td>
<td align="right"><?php echo $total_01;?></td>
</tr>
<tr>
<td><input type="number" name="005" value="<?php echo $_POST['005'];?>"></td>
<td>X</td>
<td>€ 0,05</td>
<td> = </td>
<td align="right"><?php echo $total_005;?></td>
</tr>
<tr>
<td colspan="4"><strong> Totaal contant </strong></td>
<td><?php echo $total;?></td>
</tr>
<tr>
<td colspan="5" align="right"><br/> <input type="submit" value="Calculate cash!"></td>
</tr>
</table>
</form>


It is relatively easy to do this using jquery. I wrote for you a sample code by implement only your first formula [ ] X 100 = [ ]. It can be very easy adapted to cover all your formulas.
When the user enters a number the formula is automatically calculated. It also works with the backspace or delete when the user deletes a number....
Please note that for the case simplicity I avoided to use any error-exception handling code.
It also works without the need of server... ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
$("#in100").keyup(function(){
$('#out100').get(0).value = $('#in100').get(0).value * 100;
});
});
</script>
</head>
<body>
<input type="text" id="in100" /> X 100 = <input type="text" id="out100" readonly="true" value=""/>
</body>
</html>

Related

How to calculate discount, TAX (VAT), Subtotal and Grand Total In a dynamic Table

I just started with jQuery so im a still a newbie. Could somebody please help me with how to calculate the new price in a dynamic table. I have a dynamic table with 3 columns, Qty, Discount and Price. I need to recalculate the new price after a user enter a discount(%) in the same textbox the current price is, the subtotal and the grand total.
Here is my table:
<table class="table">
<thead><tr><th style="width:60%">Description</th><th class="centrer" style="width:10%">Qty</th><th class="centrer" style="width:10%">Discount</th><th class="centrer" style="width:20%">Price</th></tr></thead>
<tbody>
<?php
if(isset($listeArticlePourUnDossier) && count($listeArticlePourUnDossier) > 0)
{
$sousTotal = 0;
$symbol = '';
$VAT = 0;
$TTC = 0;
$iArticles = 0;
while($iArticles < count($listeArticlePourUnDossier))
{
$ARTICLE_CURRENCY = $listeArticlePourUnDossier[$iArticles]['ARTICLE_CURRENCY'];
$sousTotal = $sousTotal + ($listeArticlePourUnDossier[$iArticles]['ARTICLE_PRIX']);
?>
<tr>
<td><?php echo ($listeArticlePourUnDossier[$iArticles]['ARTICLE_NOM']); ?></td>
<td class="centrer">1</td>
<td class="centrer"><input type="text" name="txtdiscount" id="txtdiscount_<?php echo $iArticles; ?>" onkeyup="calc()"/></td>
<td class="centrer"><input type="text" name="txtPrice" id="txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($listeArticlePourUnDossier[$iArticles]['ARTICLE_PRIX'],2)); ?>"/></td>
</tr>
<?php
$iArticles++;
}
?>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">Subtotal</td>
<td class="centrer bold"><?php echo (number_format($sousTotal,2)); ?></td>
</tr>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">VAT</td>
<td class="centrer"><?phpecho (number_format($VAT,2)); ?></td>
</tr>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">G.Total</td>
<td class="centrer bold">
<?php
$TTC = $sousTotal - $VAT;
echo (number_format($TTC,2));
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
How to fill up the new price in the current price textbox as soon as a user enter a discount say 10%?
Thank you for your assistance.

You can fill the discounted amount in the price field like this, please check the below code, Hope it will help,
Here, updated td's, which you are using and js code.
Thanks.
<td class="centrer">
<input type="text" name="txtdiscount" value ="" id="txtdiscount_<?php echo $iArticles; ?>" onkeyup="calc(this.value,'<?php echo $iArticles; ?>')"
/>
</td>
<td class="centrer">
<input type="text" name="txtPrice" id="txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($data['price'],2)); ?>" />
<input type="hidden" name="hidden_txtPrice" id="hidden_txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($data['price'],2)); ?>" />
</td>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">VAT</td>
<td class="centrer">
<select name="vatDropdown" id="vatDropdown">
<option value="-1">Select VAT</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</td>
</tr>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">G.Total</td>
<td class="centrer bold" id="grandtotal">
<?php echo (number_format($TTC,2)); ?>
</td>
<input type="hidden" name="hidden_total" id="hidden_total" value="<?php echo (number_format($TTC,2)); ?>" />
</tr>
<script>
function calc(discount, article_id)
{
var price = 0;
var dis_amt = 0;
var calculatedAmt = 0;
var discount_amt = 0;
price = $("#hidden_txtPrice_"+article_id).val();
if(discount != '')
{
dis_amt = parseFloat(discount) / 100;
calculatedAmt = parseFloat(price) * parseFloat(dis_amt);
discount_amt = parseFloat(price) - parseFloat(calculatedAmt);
$("#txtPrice_"+article_id).val(discount_amt);
}
else
{
$("#txtPrice_"+article_id).val(price);
}
}
$("#vatDropdown").on('change', function(){
var dropdown_val = $(this).val();
var grandtotal = $("#hidden_total").val();
if(dropdown_val == '1')
{
var vat_dis = 15 / 100;
var vat_amt = parseFloat(grandtotal) * parseFloat(vat_dis);
var gTotal = parseFloat(grandtotal) + parseFloat(vat_amt);
$("#grandtotal").html(gTotal.toFixed(2));
}
else
{
$("#grandtotal").text(grandtotal);
}
});
</script>

user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working

/* user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working. */
<script>
function max(){ /* this is the function to check the input feilds and if find mistake alert the message in to an alert box */
_aa=document.getElementById("s1").value
if(_aa.length>10)
xx="name should be less then or equal to 10 characters"
else xx=""
_bb=document.getElementById("s2").value
if(_bb.length>10)
yy="last name should be less then or equal to 10 characters"
else yy=""
_cc=document.getElementById("s3").value
if(_cc.length<6)
zz="street adress should be greater then or equal to 6 characters"
else zz=""
_dd=document.getElementById("s4").value
if(isNaN(_dd)){jj="fill"}
else if(_dd.length!=5 || _dd.length!=0){jj="fill"} \\this does'nt work
else{jj=""}
alert([xx,yy,zz,jj]);
}
</script>
<html>
<head>
<title>Form</title>
</head>
<body>
<form >
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM <hr/></td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text"id="s1"/ ></td>
<td><p id="a1"></p></td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text"id="s2" / ></td>
<td><p id="a2"></p></td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text"id="s3" maxlength="" / ></td>
<td><p id="a3"></p></td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number"id="s5" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number"id="s6" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio"id="s7"value="6.75" name="bt" onclick="calculate(this.value)"/ >UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s8" value="8.55" name="bt" onclick="calculate(this.value)" / >UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s9"value="10.00" name="bt" onclick="calculate(this.value)" / >FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number"id="s10" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number"id="s11" min="" max="" / ></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number"id="s12" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio"id="s13"value="" name="bn" / >American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s14" value="" name="bn" / >Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s15"value="" name="bn" / >Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s16"value="" name="bn" / >MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s17"value="" name="bn" / >Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number"id="s18" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()" >place</button></td>
<td><input type="submit"id="s21" value="Cancel" / ></td>
</tr>
</table>
</body>
</html>

variable declaration was wrong
Declare all your element value in function start
And declare the all _aa with variable like var _aa
Don't forget to add {} in if else condition
Why is not working?
Because you are declare the _dd in if (_cc.length < 6) in else condition ._dd always null until if (_cc.length < 6) else statement execute
function max() {
var _aa = document.getElementById("s1").value
var _bb = document.getElementById("s2").value
var _cc = document.getElementById("s3").value
var _dd = document.getElementById("s4").value
if (_aa.length > 10) {
var xx = "name should be less then or equal to 10 characters"
} else {
xx = ""
}
if (_bb.length > 10) {
var yy = "last name should be less then or equal to 10 characters"
} else {
yy = "";
}
if (_cc.length < 6) {
var zz = "street adress should be greater then or equal to 6 characters"
} else {
zz = ""
}
if (isNaN(_dd)) {
var jj = "fill"
} else if (_dd.length != 5 || _dd.length != 0) {
jj = "fill length"
} else {
jj = ""
}
console.log([xx, yy, zz, jj]);
}
<form>
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM
<hr/>
</td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text" id="s1" /></td>
<td>
<p id="a1"></p>
</td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text" id="s2" /></td>
<td>
<p id="a2"></p>
</td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text" id="s3" maxlength="" /></td>
<td>
<p id="a3"></p>
</td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number" id="s5" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number" id="s6" min="" max="" /></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio" id="s7" value="6.75" name="bt" onclick="calculate(this.value)" />UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s8" value="8.55" name="bt" onclick="calculate(this.value)" />UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s9" value="10.00" name="bt" onclick="calculate(this.value)" />FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number" id="s10" min="" max="" /></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number" id="s11" min="" max="" /></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number" id="s12" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio" id="s13" value="" name="bn" />American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s14" value="" name="bn" />Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s15" value="" name="bn" />Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s16" value="" name="bn" />MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s17" value="" name="bn" />Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number" id="s18" min="" max="" /></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()">place</button></td>
<td><input type="submit" id="s21" value="Cancel" /></td>
</tr>
</table>

Display total sum of values when selecting them

I have an list with values which is generated by an database query.
I want to see the total sum of values that been selected (by an checkbox) by the user.
Code for checkbox:
<?php
$i = -1;
while ($row = mysql_fetch_array($res))
{
$i++;
?>
echo '<table>
<tr>
<td><input type="checkbox" onclick="bedrag_optellen(this, <?php echo $i ?>);" value= "'.$row['bedrag_incl'].'"></td>
<td>€ '.number_format($row['bedrag_incl'], 2, ',', ' ').'</td>
</tr>
</table>';
}
?>
Code for output field:
<table>
<tr>
<td width="51"><input type="text" id="bedragen_selected" name="bedragen_selected" value="" size="10" style="text-align:right;background-color: #e7e7e9" readonly="readonly" /></td>
</tr>
</table>
JavaScript
<script type="text/javascript"</script>
function bedrag_optellen(checkbox, nr)
{
var i, totaal = 0;
var elems = document.getElementsByName('bedrag_optellen[]');
var l = elems.length;
for(i=0; i<l; i++)
{
if(formElement['bedrag_optellen[]'][i].checked = true)
{
totaal += parseFloat(elems[i].value) || 0;
}
document.getElementById('bedragen_selected').value = totaal.toFixed( 2 );
}
}
</script>
The code is not working, also there is no error given.
Is there anyone to help me out?
https://jsfiddle.net/fawavmbo/

Check out this fiddle.
I have used jQuery for the simplicity it provides.
I made the following changes:
Added a class cost to the checkboxes.
Removed the onClick attribute.
Added jQuery.
For the code to work in you system, add the code below to your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is the snippet.
HTML
<table>
<tr>
<td><input class='cost' type="checkbox" value= "8"></td>
<td>€ 8</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "3"></td>
<td>€ 3</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "19"></td>
<td>€ 19</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "2"></td>
<td>€ 2</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "15"></td>
<td>€ 15</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "12"></td>
<td>€ 12</td>
</tr>
</table>
<table>
<tr>
<td width="51"><input type="text" id="bedragen_selected" name="bedragen_selected" value="" size="10" style="text-align:right;background-color: #e7e7e9" readonly="readonly" /></td>
</tr>
</table>
JS
var sum = 0;
$('.cost').click(function() {
if($(this).is(':checked')) {
sum = sum + parseInt($(this).val());
} else {
sum = sum - parseInt($(this).val());
}
$('#bedragen_selected').val(sum);
});

how to prevent isNaN before dates are selected in Datepicker

I would like to prevent NaN from showing up in these text boxes: "total_full", "total_half", "total_single". I have tried setting the initial value of all calculating / number fields to "0", but "total_single" is still NaN until "check_out" date is selected and the total_days_acc is updated?
I am not sure how much of the code I am supposed to put here, and I would hate to leave something important out, so here is a link to a question where i incorrectly posted "all" the coding. :
hide / show fields based on input value
Thank you
<td>Accommodation:</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><p>Check in Date</p></td>
<td><input type="text" name="check_in_date" id="check_in_date" class="datepicker" /></td>
<td><p> </p></td>
<td><p>Check out Date</p></td>
<td><p>
<input type="text" name="check_out_date" id="check_out_date" class="datepicker" />
</p></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>Total Days Accommodation</td>
<td><input type="text" name="total_days_acc" id="total_days_acc" /></td>
</tr>
<tr>
<td>Number of Rooms:</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Single</td>
<td><input type="text" name="no_of_rooms_single" id="no_of_rooms_single" /></td>
<td> </td>
<td>Double / Twin</td>
<td><input type="text" name="no_of_rooms_double" id="no_of_rooms_double" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Contact Person</td>
<td><input type="text" name="contact_person" id="contact_person" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Telephone Number</td>
<td><input type="text" name="tel_no" id="tel_no" /></td>
<td> </td>
<td>Fax Number</td>
<td><input type="text" name="fax_no" id="fax_no" /></td>
</tr>
<tr>
<td>Cell Number</td>
<td><input type="text" name="cell_no" id="cell_no" /></td>
<td> </td>
<td>Email</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Full Day Conference # R260.00 p/p</td>
<td><input type="text" name="full_day" id="full_day" /></td>
<td> </td>
<td>Total Cost Full Day</td>
<td><input type="text" name="total_full" id="total_full" readonly="readonly" /></td>
</tr>
<tr>
<td>Half Day Conference # R240.00 p/p</td>
<td><input type="text" name="half_day" id="half_day" /></td>
<td> </td>
<td>Total Cost Half Day</td>
<td><input type="text" name="total_half" id="total_half" readonly="readonly" /></td>
</tr>
<tr>
<td>Single Rooms # R480.00 p/p</td>
<td><input type="text" name="single_rooms" id="single_rooms" /></td>
<td> </td>
<td>Total Cost Single Rooms</td>
<td><input name="total_single" type="text" id="total_single" readonly="readonly" /></td>
</tr>
<tr>
<td>Double / Twin Rooms # R720.00 p/p</td>
<td><input type="text" name="double_rooms" id="double_rooms" /></td>
<td> </td>
<td>Total Cost Double / Twin</td>
<td><input name="total_double" type="text" id="total_double" readonly="readonly" /></td>
</tr>
<tr>
<td>Data Projector # R400.00 rental p/day</td>
<td><input type="text" name="data_proj" id="data_proj" /></td>
<td> </td>
<td>Total Cost Projector Rental</td>
<td><input name="total_project" type="text" id="total_project" readonly="readonly" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Sub Total</td>
<td><input type="text" name="sub_total" id="sub_total" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="23"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</form>
</table>
</div>
<div id="hideme">
Hello Hideme
</div>
<p> </p>
<p> </p>
</body>
</html>
<script type="text/javascript">
//Datepicker
$(function() {
$(".datepicker").datepicker({ minDate: -0, maxDate: "+100M +10D",dateFormat: 'dd-mm-yy'})
({
changeMonth: true,
changeYear: true,
});
});
//Datepicker Enquiry Date Set to Today
var enquiry_date = $.datepicker.formatDate('dd-mm-yy', new Date());
document.getElementById('enquiry_date').value = enquiry_date;
//Datepicker Conference in / out
var calcDate = function() {
var start = $('#conference_date_in').datepicker('getDate');
var end = $('#conference_date_out').datepicker('getDate');
var days = (end - start) / 1000 / 60 / 60 / 24 + 1;
if(days==0) {days=1
}
if( days >= 0 ) {
document.getElementById('total_days').value = days;
}
}
$('#conference_date_out').change(calcDate);
$('#conference_date_in').change(calcDate);
//Datepicker Check in / Out Accommodation
var calcDateAcc = function() {
var startacc = $('#check_in_date').datepicker('getDate');
var endacc = $('#check_out_date').datepicker('getDate');
var daysacc = (endacc - startacc) / 1000 / 60 / 60 / 24;
if(daysacc==0) daysacc=1
if( daysacc >= 0 ) {
document.getElementById('total_days_acc').value = daysacc;
}
}
$('#check_in_date').change(calcDateAcc);
$('#check_out_date').change(calcDateAcc);
//Calculate Total Cost FullDay Conference
function calculateFull()
{
var fulldays = parseInt(document.getElementById("full_day").value);
var no_of_delegates = parseInt(document.getElementById("no_of_delegates").value);
var fullprice = 260;
var resultfull = fulldays * no_of_delegates * fullprice;
document.getElementById("total_full").value = resultfull;
}
$('#full_day').change(calculateFull).keyup(calculateFull);
//Calculate Half Day conference total
function calculateHalf()
{
var halfdays = parseInt(document.getElementById("half_day").value);
var no_of_delegates = parseInt(document.getElementById("no_of_delegates").value);
var halfprice = 240;
var resulthalf = halfdays * no_of_delegates * halfprice;
document.getElementById("total_half").value = resulthalf;
}
$('#half_day').change(calculateHalf).keyup(calculateHalf);
//Calculate Total Cost Single Rooms
function calculateSingle()
{
var single_rooms = parseInt(document.getElementById("single_rooms").value);
var total_days_acc = parseInt(document.getElementById("total_days_acc").value);
var single_rooms_price = 480;
var resultsingle = single_rooms * total_days_acc * single_rooms_price;
document.getElementById("total_single").value = resultsingle;
}
$('#single_rooms').change(calculateSingle).keyup(calculateSingle);
$('#check_in_date').change(calculateSingle);
$('#check_out_date').change(calculateSingle);
//Hide me Testing
$("#full_day").keyup(function(){
if ($('#full_day').val() == "1") {
$("#hideme").show("fast"); //Slide Down Effect
}
else {
$("#hideme").hide("fast"); //Slide Up Effect
}
});
</script>

Instead of just inserting the value into the page, just do this:
document.getElementById("total_days").value = isNaN(days) ? 0 : days;

Calculate the sum of products using a td attribute

I have this table :
<table>
<thead>
<tr>
<th>Quantity</th>
<th> </th>
<th>Price</th>
<th>Sum</th>
</tr></thead>
<tbody>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>German format: </td>
<td data_price="1375.5">1.375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>English format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text" type="text" class="qty" value="1" /></td>
<td>French format:</td>
<td data_price="1375.5">1 375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text2" type="text" class="qty" value="1" /></td>
<td>Italian format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>Spanish format:</td>
<td data_price="1375.5">€ 1.375,50</td>
<td></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
and I want to use the value of attribute "data_price" to calculate the SUM like in this link :
http://jsfiddle.net/QmTNZ/77/
I want to use only the attribute "data_price" in calculation and not the .
Please help, I'm still beginner in jquery :)

For your price cells, you should use this format:
<td data-price="1375.5">€1,375.50</td>
i.e. with a hyphen, not underscore
You can then use:
$('td').data('price')
to access its value - see http://api.jquery.com/data
e.g.
var sum = 0;
$('.sum').each(function() {
var q = parseFloat($(this).find('.qty').val());
var p = parseFloat($(this).find('td').eq(2).data('price'));
sum += q * p;
});
$('#total').text(sum);
Working demo at http://jsfiddle.net/alnitak/gzYhN/

Try
var sum=0;
$('tbody > tr > td[data_price]').each(
function()
{
sum += parseFloat(this.attr('data_price'));
}
);

Try this: http://jsfiddle.net/ptfKJ/
This example is using your original HTML code.

Categories

Resources