How to create HTML table with jQuery and multiplication rows and columns - javascript

I need to create HTML table using jQuery dynamically and also I need to make multiplication between rows and columns. My rows is yield and column is price. I have two variables a and b.
var a; //represent price
var b; // represent yield
Now I need to create table and multiplication like this:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" scope="col">Yield</th>
<th colspan="7" scope="col">Price</th>
</tr>
<tr>
<td>a-1.5</td>
<td>a-1</td>
<td>a-0.5</td>
<td>a</td>
<td>a+0.5</td>
<td>a+1</td>
<td>a+1.5</td>
</tr>
<tr>
<th scope="row">b-500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b</th>
<td> </td>
<td> </td>
<td> </td>
<td>a*b</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
http://jsfiddle.net/nexetdad/
So columns is based on price +/- and rows are based on yield +/-. How I can create with JavaScript table matrix so every cell need to be calculated (a*b)?
Please give me some ideas. I don't know where to start.


I think you are lack of DOM skill.
You can refer it.
<head>
<script type="text/javascript">
function addlabel(s,n){
if (n > 0){
return s + "+" + String(n);
}
else if (n < 0){
return s + String(n);
}
else{
return s;
}
}
function multiplicationTable(){
x = document.getElementById("i1").value;
x = parseInt(x);
y = document.getElementById("i2").value;
y = parseInt(y);
var table = '<table border="1px"><thead>';
table += '<tr><th></th>'
for (var a = -1.5; a<= 1.5 ; a+=0.5){
table += '<th>'+ addlabel("a", a) +'</th>';
}
table += '</tr></thead><tbody>'
// add num
for (var b = y-500, ob = y; b<= y+500 ; b+=100){
table += "<tr>";
table += "<td>" + addlabel("b",b-ob) + "</td>"
for (var a = x-1.5; a<= x+1.5 ; a+=0.5){
table += '<td>'+ a*b +'</td>';
}
table += "</tr>";
}
return table + '</tbody></table>';
}
function build(){
document.getElementById('here').innerHTML = multiplicationTable();
}
</script>
</head>
<body>
<form name="f">
<input type="text" value ="15" name="r" id="i1">
<input type="text" value ="5000" name="c" id="i2">
<input type="button" value="make table" onclick="build()">
</form>
<div id="here">
</div>
</body>
https://jsfiddle.net/tonypythoneer/z5reeomj/2/


Although i dont know much about js and jquery you can mix them and this could be done. Go for nested for loop for creating your table and use append() of jquery for appending the content of table and simple multiplication.
By the way this can done easily using php.

Related

How do I get my checkboxes to filter together with my select statement?

I have a select statement and when someone selects a state it returns all the rows with states that match. I have two checkboxes and they return only rows that match. I'm not sure how to combine these two functions so that they will listen to each other. I would like my checkbox to further filter the results For instance if you select Texas as your state and then click the textbox Spanish speaking I would like all Texas events that have Spanish Speaking. If the state is Texas and both Spanish Speaking and Family friendly are checked i'd like all events where state is Texas and both family friendly are checked to return. I have condensed my code so you can see how both of these work on my table.
<script>
$("input[name='filterStatus']").change(function () {
var classes = [];
$("input[name='filterStatus']").each(function () {
if ($(this).is(":checked")) { classes.push('.' + $(this).val()); }
});
if (classes == "") { // if no filters selected, show all items
$("#myTable-events tbody tr").show();
} else { // otherwise, hide everything...
$("#myTable-events tbody tr").hide();
$("#myTable-events tr").each(function () {
var show = true;
var row = $(this);
classes.forEach(function (className) {
if (row.find('td' + className).html() == ` `) { show = false; }
else if (row.find('td' + className).html() == ` `) { show = false; }
});
if (show) { row.show(); }
});
}
});
</script>
<!-- End of Checkbox code -->
<!-- State Dropdown Code -->
<script>
$("#filter").change(function() {
var filterValue = $(this).val();
var row = $('.row-events');
console.log(filterValue);
row.hide();
row.each(function(i, el) {
if ($(el).attr('data-type') == filterValue) {
$(el).show();
}
});
if ("all" == filterValue) {
row.show();
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id='label-state-text'>Select Your State:</label>
<select class="state" id="filter">
<option value="all" selected="selected">Select a State</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="NC">North Carolina</option>
<option value="SC">South Carolina</option>
<option value="TX">Texas</option>
</select>
</form>
<!-- Checkbox code -->
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="family" />
<label for="filter_1">Family Friendly?</label>
<input type="checkbox" name="filterStatus" value="ESP" />
<label for="filter_2">Spanish Speaking?</label>
</form>
<table id="myTable-events">
<thead>
<tr>
<th class='event_heading'> Name </th>
<th class='event_heading'> Date </th>
<th class='event_heading'> State </th>
<th class='event_heading'> Family Friendly </th>
<th class='event_heading'> Spanish Speaking </th>
</tr>
</thead>
<tr class="row-events" data-type="TX">
<td> Event 1 </td>
<td> 10/22/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 11 </td>
<td> 10/22/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 2 </td>
<td> 09/20/2023 </td>
<td> Texas </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="NC">
<td> Event 3 </td>
<td> 06/18/2023 </td>
<td> North Carolina </td>
<td class="family"> </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="SC">
<td> Event 4 </td>
<td> 05/02/2023 </td>
<td> South Carolina </td>
<td class="family"> </td>
<td class="ESP">Yes</td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 5 </td>
<td> 12/29/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 6 </td>
<td> 11/20/2023 </td>
<td> California </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AZ">
<td> Event 7 </td>
<td> 08/09/2023 </td>
<td> Arizona </td>
<td class="family"> </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 8 </td>
<td> 10/19/2023 </td>
<td> Texas </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 9 </td>
<td> 08/04/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AK">
<td> Event 10 </td>
<td> 03/26/2023 </td>
<td> Alaska </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
</table>`
I like the way each of these functions work on their own but I can't figure out how to combine them and get them to filter together.

You can combine them like this:
$("input[name='filterStatus'], #filter").change(function() {
var classes = [];
var filterValue = $("#filter").val();
var row = $('.row-events');
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.' + $(this).val());
}
});
row.hide();
row.each(function(i, el) {
if ((classes == "" || classes.some(function(className) {
return $(el).find('td' + className).html() != ` `;
})) && (filterValue == "all" || $(el).attr('data-type') == filterValue)) {
$(el).show();
}
});
});
Demo
$("input[name='filterStatus'], #filter").change(function() {
var classes = [];
var filterValue = $("#filter").val();
var row = $('.row-events');
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.' + $(this).val());
}
});
row.hide();
row.each(function(i, el) {
if ((classes == "" || classes.some(function(className) {
return $(el).find('td' + className).html() != ` `;
})) && (filterValue == "all" || $(el).attr('data-type') == filterValue)) {
$(el).show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id='label-state-text'>Select Your State:</label>
<select class="state" id="filter">
<option value="all" selected="selected">Select a State</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="NC">North Carolina</option>
<option value="SC">South Carolina</option>
<option value="TX">Texas</option>
</select>
<!-- Checkbox code -->
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="family" />
<label for="filter_1">Family Friendly?</label>
<input type="checkbox" name="filterStatus" value="ESP" />
<label for="filter_2">Spanish Speaking?</label>
</form>
<table id="myTable-events">
<thead>
<tr>
<th class='event_heading'> Name </th>
<th class='event_heading'> Date </th>
<th class='event_heading'> State </th>
<th class='event_heading'> Family Friendly </th>
<th class='event_heading'> Spanish Speaking </th>
</tr>
</thead>
<tr class="row-events" data-type="TX">
<td> Event 1 </td>
<td> 10/22/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 11 </td>
<td> 10/22/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 2 </td>
<td> 09/20/2023 </td>
<td> Texas </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="NC">
<td> Event 3 </td>
<td> 06/18/2023 </td>
<td> North Carolina </td>
<td class="family"> </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="SC">
<td> Event 4 </td>
<td> 05/02/2023 </td>
<td> South Carolina </td>
<td class="family"> </td>
<td class="ESP">Yes</td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 5 </td>
<td> 12/29/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 6 </td>
<td> 11/20/2023 </td>
<td> California </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AZ">
<td> Event 7 </td>
<td> 08/09/2023 </td>
<td> Arizona </td>
<td class="family"> </td>
<td class="ESP"> </td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 8 </td>
<td> 10/19/2023 </td>
<td> Texas </td>
<td class="family"> </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 9 </td>
<td> 08/04/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AK">
<td> Event 10 </td>
<td> 03/26/2023 </td>
<td> Alaska </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
</table>

Dynamically setting the input value with jQuery

I have a spreadsheet of data and input fields.
When the input field is empty, it should click the copy text button from the row with class "shipdate". I always copy the entry in the code. Can anyone tell me where I'm wrong.
This is my code
$(".btn-yes").click(function() {
var $val = $(document).find('.date');
$('.date').each(function() {
var $val = $(this).val();
if ($val === "") {
$('tr').each(function() {
var $this = $(this),
daata = $this.find('td.shipdate').html();
$this.find('input').val(anData);
})
} else(
console.log("empty")
)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
</tr>
</thead>
<tbody>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
</tbody>
</table>
<div>
<button class="btn-yes">
Click here
</button>
</div>
</div>

You likely meant this. Note I had to trim and remove the trailing dot in the shipdate
You can remove the .slice(0,-1) if the shipdate cell contains a date without a trailing dot
You can also freely change $(this).parent().next().text() to $(this).closest("tr").find(".shipdate").text()
in case you want to move the cells around
$(".btn-yes").click(function() {
$('.date').each(function() {
var $val = $(this).val();
var shipdate = $.trim($(this).parent().next().text()).slice(0,-1)
$(this).val($val === "" ? shipdate : $val)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
</tr>
</thead>
<tbody>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
</tbody>
</table>
<div>
<button class="btn-yes">
Click here
</button>
</div>
</div>

JavaScript sum table value

I have the HTML table below. How can I sum up all of the columns based on continent group?
<html>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center>Asia</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">IND</font>
</td>
<td>
<font style="float:right;">900,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;">25,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">CHN</font>
</td>
<td>
<font style="float:right;">9,000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">RUS</font>
</td>
<td>
<font style="float:right;">3,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;">5,000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">OTH</font>
</td>
<td>
<font style="float:right;">90,000</font>
</td>
</tr>
</table>
</html>
Example: in order to get the Total, I need to add all of the continents, in this case Asia + Europe + Others, but first I need to have the subtotal of those continents. Additional info: Those continents and nations can be editable(add/remove) based on database. How can I do that?
In simple terms, like using Microsoft Excel, where we can sum up each/any column that we want.
I know JavaScript sum() that I got from other sites, but so far it only gives me the total for all column values. Below is the code, where index equals to number of column.
function sumColumn(index) {
var total = 0;
$("td:nth-child(" + index + ")").each(function() {
total += parseFloat($(this).text(), 10) || 0;
});
return total.toFixed(2);
}

If you're trying to learn on how to use Jquery Selectors, I've modified the snippet according to what you have mentioned. However, what you are trying to do here is a bad way of handling data. You should never represent data in this form. Use PHP or ajax to load data to the elements.
$(function() {
let asia_sum = 0;
$('.asia').each( function() {asia_sum+= parseInt($(this).text()); });
let eur_sum = 0;
$('.eur').each( function() {eur_sum+= parseInt($(this).text()); });
let other_sum = 0;
$('.other').each( function() {other_sum+= parseInt($(this).text()); });
let total = asia_sum + eur_sum + other_sum;
$('#total').text(total);
$('#eur').text(eur_sum);
$('#asia').text(asia_sum);
$('#other').text(other_sum);
console.log(other_sum);
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center id='total'>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center >Asia</center>
</td>
<td>
<center id='asia'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >IND</font>
</td>
<td>
<font style="float:right;" class='asia'>900000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;" class='asia'>25000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >CHN</font>
</td>
<td>
<font style="float:right;" class='asia'>9000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center id='eur'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >RUS</font>
</td>
<td>
<font style="float:right;" class='eur'>3000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;" class='eur'>5000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center id='other'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >OTH</font>
</td>
<td>
<font style="float:right;" class='other'>90000</font>
</td>
</tr>
</table>
</body>
</html>

how to redesign all table td in tr rows

I have table like this:
<table>
<tr>
<td> A-1 </td>
<td> A-2 </td>
<td> A-3 </td>
<td> A-4 </td>
<td> A-5 </td>
<td> A-6 </td>
<td> A-7 </td>
<td> A-8 </td>
</tr>
<tr>
<td> B-1 </td>
<td> B-2 </td>
<td> B-3 </td>
<td> B-4 </td>
<td> B-5 </td>
<td> B-6 </td>
<td colspan=2> B-7 </td>
</tr> </table>
it's something like this:
A-1 A-2 A-3 A-4 A-5 A-6 A-7 A-8
B-1 B-2 B-3 B-4 B-5 B-6 B-8
During some change on page size i want to change that table to be like following table design:
<table>
<tr>
<td> A-1 </td>
<td> A-2 </td>
</tr>
<tr>
<td> A-3 </td>
<td> A-4 </td>
</tr>
<tr>
<td> A-5 </td>
<td> A-6 </td>
</tr>
<tr>
<td> A-7 </td>
<td> A-8 </td>
</tr>
<tr>
<td> B-1 </td>
<td> B-2 </td>
</tr>
<tr>
<td> B-3 </td>
<td> B-4 </td>
</tr>
<tr>
<td> B-5 </td>
<td> B-6 </td>
</tr>
<tr>
<td colspan=2> B-7 </td>
</tr> </table>
It's something like this:
A-1 A-2
A-3 A-4
A-5 A-6
..
B-7
I'm not sure if that can be done with css or javascript.

Use .querySelectorAll("#table1 td") to select all td, then use [].forEach.call, this way you can loop through a Element List, and buld the new table.
var x = document.querySelectorAll("#table1 td");
var _html = "<table>";
[].forEach.call(x, function(el, i) {
if(i%2==0) _html += "<tr>";
_html += el.outerHTML;
if(i%2==1) _html += "</tr>";
});
_html += "</table>";
alert(_html);
document.write(_html);
<table id="table1">
<tr>
<td>A-1</td>
<td>A-2</td>
<td>A-3</td>
<td>A-4</td>
<td>A-5</td>
<td>A-6</td>
<td>A-7</td>
<td>A-8</td>
</tr>
<tr>
<td>B-1</td>
<td>B-2</td>
<td>B-3</td>
<td>B-4</td>
<td>B-5</td>
<td>B-6</td>
<td>B-7</td>
<td>B-8</td>
</tr>

Javascript multiply input field by a number value

I am trying to multiply the user input on input field "full_day" by the "var fullprice", and display the result in readonly input field "total_full" what am i doing wrong that is causing it not to work?
<div id="wrapper">
<div id="header"></div>
<table width="899" border="1" align="left" cellpadding="1">
<form action="" method="get" name="myform">
<tr>
<td width="275"><label>Company Name</label></td>
<td width="180"><input type="text" name="companyname" id="companyname" /></td>
<td width="27"> </td>
<td width="223">Enquiry Date</td>
<td width="160"><input type="text" name="enquiry_date" id="enquiry_date" class="datepicker" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Conference Date In</td>
<td><input type="text" name="conference_date_in" id="conference_date_in" class="datepicker" /></td>
<td> </td>
<td>Conference Date Out</td>
<td><input type="text" name="conference_date_out" id="conference_date_out" class="datepicker" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Number of Delegates</td>
<td><input type="text" name="no_of_delegates" id="no_of_delegates" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<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 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> </td>
<td> </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> </td>
<td> </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> </td>
<td> </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> </td>
<td> </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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</form>
</table>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$(".datepicker").datepicker({ minDate: -0, maxDate: "+100M +10D",dateFormat: 'dd-mm-yy'})
({
changeMonth: true,
changeYear: true,
});
});
var enquiry_date = $.datepicker.formatDate('dd-mm-yy', new Date());
document.getElementById('enquiry_date').value = enquiry_date;
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;
if(days==0) days=1
if( days >= 0 ) {
document.getElementById('total_days').value = days;
}
}
$('#conference_date_out').change(calcDate);
$('#conference_date_in').change(calcDate);
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);
function calculateFull()
{
var fulldays = document.getElementById("full_day").value;
var fullprice = 260;
var result = fulldays * fullprice;
document.getElementById("total_full").innerHTML = result;
}
$('#full_day').change(calculateFull);
</script>

total_full is input box, so you should set value instead of innetHTML
document.getElementById("total_full").innerHTML = result;
document.getElementById("total_full").value = result;

document.getElementByid("full_day").value returns a string. You have to convert this string into a number before multiplying it with fullprice
var fulldays = parseInt(document.getElementById("full_day").value, 10);
And change document.getElementById("total_full").innerHTML = result;
to document.getElementById("total_full").value = result;

Categories