How to get rid of the NaN/NaN/NaN - javascript

In the table, for the skips day column, the last row's default value will always be the word "last" which isn't a number. Now, the result date show "NaN/NaN/NaN",is there any way that i can replace that with sth like Nil.
Many thanks.
$('input.date, input.day').on('change', function () {
var $row = $(this).closest('tr');
var start = $row.find('.date').val();
if (start) {
var set = new Date(start);
set.setDate(set.getDate() + Number($row.find(".day").val()));
$row.find(".result").val([set.getMonth() + 1, set.getDate(), set.getFullYear()].join('/'));
var dt = set.getFullYear() + "-" + ("0" + (set.getMonth() + 1)).slice(-2) + "-" + ("0" + set.getDate()).slice(-2);
$row.next('tr').find('.date').attr('value', dt).trigger('change');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="one">
<th>Date</th>
<th>Skip days</th>
<th>Result</th>
<tbody>
<tr>
<td><input type="date" class="date"></td>
<td><input type="text" value="10" class="day"> </td>
<td><input type="text" class="result"> </td>
</tr>
<tr>
<td><input type="date" class="date"></td>
<td><input type="text" value="15" class="day"> </td>
<td><input type="text" class="result"> </td>
</tr>
<tr>
<td><input type="date" class="date"></td>
<td><input type="text" value="last" class="day"> </td>
<td><input type="text" class="result"> </td>
</tr>
</tbody>
</table>


Here you go with a solution
$('input.date, input.day').on('change', function () {
var $row = $(this).closest('tr');
var start = $row.find('.date').val();
if (!isNaN($row.find(".day").val()) && start) {
var set = new Date(start);
set.setDate(set.getDate() + Number($row.find(".day").val()));
$row.find(".result").val([set.getMonth() + 1, set.getDate(), set.getFullYear()].join('/'));
var dt = set.getFullYear() + "-" + ("0" + (set.getMonth() + 1)).slice(-2) + "-" + ("0" + set.getDate()).slice(-2);
$row.next('tr').find('.date').attr('value', dt).trigger('change');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="one">
<th>Date</th>
<th>Skip days</th>
<th>Result</th>
<tbody>
<tr>
<td><input type="date" class="date"></td>
<td><input type="text" value="10" class="day"> </td>
<td><input type="text" class="result"> </td>
</tr>
<tr>
<td><input type="date" class="date"></td>
<td><input type="text" value="15" class="day"> </td>
<td><input type="text" class="result"> </td>
</tr>
<tr>
<td><input type="date" class="date"></td>
<td><input type="text" value="last" class="day"> </td>
<td><input type="text" class="result"> </td>
</tr>
</tbody>
</table>
I've used iSNaN to check the input.day value
Hope this will help you.


You could always just manually update the last cell to overwrite the Nullvalue with something like: $("#one tbody tr:last-of-type .result")[0].value = 'Nil'.
This can be seen in the following example:
$('input.date, input.day').on('change', function() {
var $row = $(this).closest('tr');
var start = $row.find('.date').val();
if (start) {
var set = new Date(start);
set.setDate(set.getDate() + Number($row.find(".day").val()));
$row.find(".result").val([set.getMonth() + 1, set.getDate(),
set.getFullYear()
].join('/'));
var dt = set.getFullYear() + "-" + ("0" + (set.getMonth() +
1)).slice(-2) + "-" + ("0" + set.getDate()).slice(-2);
$row.next('tr').find('.date').attr('value', dt).trigger('change');
}
$("#one tbody tr:last-of-type .result")[0].value = 'Nil';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table id="one">
<th>Date</th>
<th>Skip days</th>
<th>Result</th>
<tbody>
<tr>
<td>
<input type="date" class="date"></td>
<td><input type="text" value="10" class="day"> </td>
<td><input type="text" class="result"> </td>
</tr>
<tr>
<td>
<input type="date" class="date"></td>
<td><input type="text" value="15" class="day"> </td>
<td><input type="text" class="result"> </td>
</tr>
<tr>
<td>
<input type="date" class="date"></td>
<td><input type="text" value="last" class="day"> </td>
<td><input type="text" class="result"> </td>
</tr>
</tbody>
</table>
Hope this helps! :)

Related

How to replace function that works with id to classname

This is a continuation of my previous question (Multiple date selection events to assign a value to an input field) and made some progression. I managed to partially solve the issue, and this is working only for one when I am using the document.getElementById. I know as IDs must be different to work for both, and therefore I am trying to use ClassName. And here I got studk. I am struggling to make it work for the arrays using the ClassName. Any help will be highly appreciated. below is the one working for ID.
<table class='table' id="tb_actions">
<thead>
<tr>
<th class="text-center" > Due </th>
<th class="text-center" > Date Complete </th>
<th class="text-center" > Overdue </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="date" name="dt_due[]" id="datedue" class="form-control" /></td>
<td><input type="date" name="dt_complete[]" id="datecomplete" class="form-control" /></td>
<td><input type="text" name="overdue[]" id="overdue" class="form-control" /></td>
</tr>
<tr>
<td><input type="date" name="dt_due[]" id="datedue" class="form-control" /></td>
<td><input type="date" name="dt_complete[]" id="datecomplete" class="datecomplete form-control" /></td>
<td><input type="text" name="overdue[]" id="overdue" class="form-control" /></td>
</tr>
</tbody>
</table>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const d1 = document.getElementById("datedue");
const d2 = document.getElementById("datecomplete");
const od = document.getElementById("overdue");
$("#datecomplete").on("change", function () {
var dd1 = new Date($('#datedue').val());
var dd2 = new Date($('#datecomplete').val());
document.getElementById("demo1").innerHTML = dd1
document.getElementById("demo2").innerHTML = dd2
if( dd2 > dd1){
od.value = 'Yes';
od.style.color = 'red'
} else {
od.value = 'No';
od.style.color = 'blue'
}
});
</script>

you can try this as below, fiddle
<table class='table' id="tb_actions">
<thead>
<tr>
<th class="text-center" > Due </th>
<th class="text-center" > Date Complete </th>
<th class="text-center" > Overdue </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="date" name="dt_due[]" id="datedue" class="form-control" /></td>
<td><input type="date" name="dt_complete[]" id="datecomplete" class="form-control datecomplete" /></td>
<td><input type="text" name="overdue[]" id="overdue" class="form-control" /></td>
</tr>
<tr>
<td><input type="date" name="dt_due[]" id="datedue" class="form-control" /></td>
<td><input type="date" name="dt_complete[]" id="datecomplete" class="datecomplete form-control" /></td>
<td><input type="text" name="overdue[]" id="overdue" class="form-control" /></td>
</tr>
</tbody>
</table>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
$(".datecomplete").on("change", function () {
var parent = $(this).closest("tr");
var dd1 = new Date(parent.find('#datedue').val());
var dd2 = new Date(parent.find('#datecomplete').val());
var od = parent.find('#overdue');
document.getElementById("demo1").innerHTML = dd1
document.getElementById("demo2").innerHTML = dd2
if( dd2 > dd1){
$(od).val('Yes');
$(od).css('color', 'red')
} else {
$(od).val('No');
$(od).css('color', 'blue')
}
});
</script>

How to change multiple table rows' dates with one start date

Now, when a start date is selected in each row and click ok, an end date will display accordingly. So each table row has to manually click a button to show the end date.
Im wondering is it possible that if i only select one start date and click ok,
not only the first row end date is shown, but also 2nd , 3rd... etc rows' start date and end date will be automatically show accordingly to the interval days
PS: Please note that the number of rows are dynamic, coming from database and the total no of row is unknown.
Any ideas will be greatly appreciated. Thank you !!
(function($, window, document, undefined){
$(".addSkip").click(function() {
// row instance to use `find()` for the other input classes
var $row = $(this).closest('tr');
var date = new Date($row.find(".start_date").val()+" 0:00:00"),
days = parseInt($row.find(".days").val(), 10);
console.log(date.getDate());
console.log(days);
if (!isNaN(date.getTime())) {
date.setDate(date.getDate() + days);
$row.find(".end_date").val(date.toInputFormat());
} else {
alert("Invalid Date");
}
});
Date.prototype.toInputFormat = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
};
})
(jQuery, this, document);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<th>
start</th>
<th>end</th>
<th>interval</th>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<input type="button" size="10" value="ok" class="addSkip"></td>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
</tr>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<input type="button" size="10" value="ok" class="addSkip"></td>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
</tr>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<input type="button" size="10" value="ok" class="addSkip" ></td>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><input type="text" size="3" name="skip[]" class="days" value="10">
</tr>
</table>
desired result
start end interval
13/10/17 20/10/17 7
20/10/17 23/10/17 3
23/10/17 30/10/17 7
......
etc

I've removed the "ok" button in favour of a simpler change event (both on date_start and days) and added the logic for your need! if something is not clear, don't esitate to ask clarifications ;)
(function($, window, document, undefined){
$('input.start_date, input.days').on('change',function() {
var $row = $(this).closest('tr'),
$start = $row.find('.start_date'),
$end = $row.find('.end_date'),
$other = $row.find('.otherfield'),
$interval = $row.find('.days'),
date = new Date($start.val()+" 0:00:00"),
days = parseInt($interval.val(), 10);
console.log(date.getDate());
console.log(days);
if (!isNaN(date.getTime())) {
date.setDate(date.getDate() + days);
$end.val(date.toInputFormat());
$other.val(date.toInputFormat());
$row.next('tr')
.find('.start_date').val(date.toInputFormat()).trigger('change');
} else {
console.log("Invalid Date");
}
});
Date.prototype.toInputFormat = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
};
})
(jQuery, this, document);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>start</th>
<th>end</th>
<th>other</th>
<th>interval</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><textarea class="otherfield"></textarea></td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
</tr>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><textarea class="otherfield"></textarea></td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
</tr>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><textarea class="otherfield"></textarea></td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"></td>
</tr>
</tbody>
</table>

In jquery, you can do something like this to find multiple element:
$row.find("*[class^=".end_date"]")
For more details, refer jquery selectors

Using the same jQuery in multiple operations

I have a small question and I hope someone can help me with it :D
I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result
I already made this, and it works well:
<script>
$(document).ready(function(){
$('#quantity_1').keyup(function(){
var price_1 = $("#price_1").val();
var quantity_1 = $("#quantity_1").val();
quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
$("#quantity_1").val(quantity_1);
var total_1 = price_1 * quantity_1;
$( "#total_1" ).val( total_1.toFixed(2) );
});
});
</script>
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Product Name</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
</table>
Working demo here:
http://jsfiddle.net/EnterateNorte/9kswL0gf/
But I would like to be able to add more than one line, like so:
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Name 1</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
<tr>
<td>Name 5</td>
<td><input type="hidden" name="product[5][price]" id="price_5" value="10.00" />23.00</td>
<td><input type="text" name="product[5][quantity]" id="quantity_5" /></td>
<td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
</tr>
<tr>
<td>Name 3</td>
<td><input type="hidden" name="product[3][price]" id="price_3" value="130.00" />10.00</td>
<td><input type="text" name="product[3][quantity]" id="quantity_3" /></td>
<td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
</tr>
<tr>
<td>Name 4</td>
<td><input type="hidden" name="product[4][price]" id="price_4" value="12.00" />10.00</td>
<td><input type="text" name="product[4][quantity]" id="quantity_4" /></td>
<td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
</tr>
</table>
And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)

Use:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var price = $(this).parent().prev().find('input').val();
var quantity = $(this).val();
var total = price * quantity;
$(this).parent().next().find('input').val( total.toFixed(2) );
});});
Working Demo
Update: For showing Grand Total
var sum = 0;
//iterate through each textboxes and add the values
$('[name*=total]').each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseInt(this.value);
}
});
Working Demo

What you can do is to find the elements using their relative position instead of hard coded ids
$(document).ready(function () {
$('input[id^="quantity_"]').keyup(function () {
var $tr = $(this).closest('tr');
var price = $tr.find('input[id^="price_"]').val();
var quantity = this.value;
var total = (price * quantity) || 0;
$tr.find('input[id^="total_"]').val(total.toFixed(2));
});
});
Demo: Fiddle

I've updated your code in Fiddle. You need to change in your markup a bit.
<tr>
<td>Product Name</td>
<td><input type="hidden" class="price" ... />10</td>
<td><input type="text" class="quantity" ... /></td>
<td><input type="text" class="total" ... /></td>
</tr>
$(document).ready(function(){
$('.quantity').keyup(function(){
var parent = $(this).closest("tr");
var price = $(".price", parent).val();
var quantity = $(".quantity", parent).val();
var total = price * quantity;
$(".total", parent).val(total.toFixed(2));
});
});

I would recommend you to use common class
HTML:
<tr>
<td>Name 5</td>
<td>
<input type="hidden" class="price" value="10.00" />10.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
<tr>
<td>Name 3</td>
<td>
<input type="hidden" class="price" value="130.00" />130.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
Script:
$('.quantity').keyup(function () {
var tr = $(this).closest('tr');
var price = tr.find('.price').val();
var quantity = $(this).val();
var total = price * quantity;
tr.find('.total').val(total.toFixed(2));
});
DEMO

Modify your table:
<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
<tr>
<td>
<input id='totalSum' value='0' type='text' />
</td>
</tr>
</table>
Make all your 'total' inputs readonly by adding 'readonly' attribute.
js code:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var total = 0;
$('#table tr').each(function(i,item){
var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
var quantity = parseInt($(item).find('[name*=quantity]').val());
if(!isNaN(price) && !isNan(quantity)){
total += price*quantity;
}
});
$("#totalSum").val(total.toFixed(2));
});
});

How to reflect a calculation from one field to another

I'm very new to JavaScript and I have an assignment that I'm unable to resolve. So I have a table with five fields and I need to calculate the total for a month, then automatically generate the yearly total in a different cell. I got to make the total work for the month but I have no idea how to reflect that in the year cells. Any help will be much appreciated. Thanks a lot for your time :)
Here's my code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function update() {
var a = +document.forms['calc'].elements['fieldOne'].value,
b = +document.forms['calc'].elements['fieldTwo'].value,
c = +document.forms['calc'].elements['fieldThree'].value,
d = +document.forms['calc'].elements['fieldFour'].value,
e = +document.forms['calc'].elements['fieldFive'].value,
fieldTotal = ((b-d)*a)*c;
document.forms['calc'].elements['fieldTotal'].value = fieldTotal;
return false;
}
function update2() {
var f = +document.forms['calc'].elements['field6'].value,
g = +document.forms['calc'].elements['field7'].value,
h = +document.forms['calc'].elements['field8'].value,
i = +document.forms['calc'].elements['fieldFour'].value,
j = +document.forms['calc'].elements['fieldFive*12'].value,
field9=fieldFour;
field10=fieldFive*12;
fieldTotal2=fieldTotal*12;
document.write('fieldTotal2');
document.write('field9');
document.write('field10');
return false;
}
</script>
</head>
<body>
<form name="calc" action="#">
<table width="600" border="1">
<tr>
<td colspan="2"> </td>
<td width="63">Month</td>
<td width="109">Year</td>
</tr>
<tr>
<td colspan="2">Field1</td>
<td><input type="text" name="fieldOne" id="fieldOne" size="15" value="5,000" /></td>
<td><input type="text" name="field6" id="field6" size="15" value="60,000"/></td>
</tr>
<tr>
<td colspan="2">Field2</td>
<td><input type="text" name="fieldTwo" id="fieldTwo" value="3.0" size="15" /></td>
<td><input type="text" name="field7" id="field7" value="3.0" size="15" /></td>
</tr>
<tr>
<td colspan="2">Field3</td>
<td><input type="text" name="fieldThree" id="fieldThree" size="15" value="$350"/></td>
<td><input type="text" name="field8" id="field8" size="15" value="$350"/></td>
</tr>
<tr>
<td colspan="2">Field4</td>
<td><input type="text" name="fieldFour" id="fieldFour" value="1.5" size="15" /></td>
<td><input type="number" name="field9" id="field9" value="1.5" size="15" /></td>
</tr>
<tr>
<td colspan="2">Filed5</td>
<td><input type="text" name="fieldFive" id="fieldFive" size="15" value="75"/></td>
<td><input type="text" name="field10" id="field10" size="15" /></td>
</tr>
<tr>
<td width="137">Total</td>
<td width="83"><input type="button" value="Calculate" onClick="update();return false;" /></td>
<td><input type="text" name="fieldTotal" id="fieldTotal" size="15" readonly /></td>
<td><input type="text" name="fieldTotal2" id="fieldTotal2" size="15" readonly /></td>
</tr>
</table>
</form>
</body>

Based on what you described I think this should work for you.
Demo
function update() {
var frmEles = document.forms.calc.elements,
a = frmEles.fieldOne.value.replace(',',''), //Remove comma
b = frmEles.fieldTwo.value,
c = frmEles.fieldThree.value.replace('$',''), //Remove Dollar sign
d = frmEles.fieldFour.value,
e = frmEles.fieldFive.value,
fieldTotal = ((b-d)*a)*c;
//Total for the month
frmEles.fieldTotal.value = formatNumber(fieldTotal);
//Calculations for the year
frmEles.field6.value = formatNumber(a * 12);
frmEles.field7.value = formatNumber(b * 12);
frmEles.field8.value = '$' + formatNumber(c * 12); //Add back dollar sign
frmEles.field9.value = formatNumber(d * 12);
frmEles.field10.value = formatNumber(e * 12);
frmEles.fieldTotal2.value = formatNumber(fieldTotal * 12);
return false;
}
//Format the numbers with commas.
function formatNumber(n){
return n.toLocaleString();
}

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;

Categories

Resources