I'm trying to sum time with momentjs.
Here is my JavaScript function :
function all_time()
{
$(".aaa").each(function() {
$this = $(this);
var total = moment().startOf('day');
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
$this.find(".totalseluruhjam").val(total.format("HH:mm"));
}
});
});
}
And Here is My HTML Table
<form method="POST" action="http://localhost:84/payroll2/dinas_audit/claim/1105321/AD0000002">
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-01</td>
<td class="jammasuk">
07:00:00 </td>
<td class="jampulang">
23:00:00 </td>
<td class="lebih">08:00</td>
</tr>
<tr>
<td>2</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-02</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>3</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-03</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-04</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
18:21:00 </td>
<td class="lebih">01:21</td>
</tr>
<tr>
<td>5</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-05</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
20:21:00 </td>
<td class="lebih">03:21</td>
</tr>
<tr>
<td>6</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-06</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
21:21:00 </td>
<td class="lebih">04:21</td>
</tr>
<tr>
<td>7</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-07</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>8</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-08</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>9</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-09</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="table">
<tr>
<td> Total Jam Lebih : </td><td><input type="text" readonly="readonly" class='totalseluruhjam'/></td>
</tr>
<tr>
<td> Total RO Yang Di Dapat : </td><td><input type="text" readonly="readonly" class='totalseluruhro'/></td>
</tr>
</table>
</div>
<div class="box-footer">
<input value='submit' type='submit' class='btn btn-success pull-right claim'> </div>
</div>
</div>
</form>
As you can see from above. I have multiple tables. I'm able to sum .totalseluruhro` with this js
function all_ro()
{
var sum=0;
$(".aaa").each(function() {
$this = $(this);
sum += parseFloat($this.find('.ronya').val());
$('.totalseluruhro').val(sum);
})
}
But now i'm trying to sum every .jmljam and then set the result to .totalseluruhjam. I trying to sum jmljam with function all_time() but it's not working. I can't see any error from browser console. So, how to sum .jmljam ?
Please check my Fiddle https://jsfiddle.net/s9wfh9ye/23/
Give a shot with this.
function all_time()
{
var total = moment().startOf('day');
$(".aaa").each(function() {
$this = $(this);
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
}
});
});
$(".totalseluruhjam").val(total.format("HH:mm"));
}
and here is the updated fiddle https://jsfiddle.net/s9wfh9ye/24/
Related
I work with filtering, and i have issues, i have 4 option input in which i have some data which i need to filter in table, for now i filter data only for one column, but problem is if i will add one more filter, script will not work, and filter data from the last selected value. But i need if i have 2-4 selected values in option data is filtering.
My code:
JS:
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr").hide();
filters.forEach(filter => {
$("#orderListData td" + filter).parent().show();
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
JSFIddle - https://jsfiddle.net/qunzorez/k3ygL07f/11/
So if in options number 3 u will chosse 023 and tap add filters it's will work, but if i chosse 023 and options number 4 BOOKED it's will filter only booked status, where is problem?
By doing $("#orderListData td" + filter).parent().show() on every filter, you are essentially showing every row that matches EVEN ONE of the filters. While you have to show only those rows which can satisfy ALL filters.
So instead of looping through filters and checking if any td element satisfies it, loop through the rows and check if it satisfies every filter.
Use this code to do so ( Only the filterData function is changed )
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr");
rows.hide();
//Check if any row satisfy all filters
$.each(rows, (i, row) => {
if (filters.every(filter => $(row).find(filter).length)) {
$(row).show();
}
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.row::after {
display: table;
clear: both;
content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3"> <input class="form-control" type="text" id="search" placeholder="Search for ...""></div>
<div class=" col-2">
<select class="form-control secondary-select" id="materialCode">
<option></option>
<option>16014344C</option>
<option>16016398A</option>
<option>16009838A</option>
</select>
<p><strong>Material Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="plantCode">
<option></option>
<option>0119</option>
<option>0379</option>
</select>
<p><strong>Plant Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="vsCode">
<option></option>
<option>023</option>
<option>0379</option>
</select>
<p><strong>Value Stream Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="statusCode">
<option></option>
<option>BOOKED</option>
<option>RELEASED</option>
</select>
<p><strong>Status</strong></p>
</div>
<div class="col-1">
<button id="filterButton" class="button button-clear butt-heith">
Apply filters
</button>
</div>
</div>
<button id="cancelFilters" class="button button-deactivate float-right">
Cancel filters
</button>
<table class="table-editor" id="ordersList">
<thead>
<tr>
<th>Production order code</th>
<th>Material code</th>
<th>Target quantity</th>
<th>Plant code</th>
<th>Value stream code</th>
<th>Status</th>
<th>Release date</th>
<th>Activation date</th>
<th>Booking date</th>
<th>TPT (d)</th>
</tr>
</thead>
<tbody id="orderListData">
<tr>
<td>
14298947
</td>
<td class="column1">
11027174A
</td>
<td>
1
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 06:57:42
</td>
<td></td>
<td>
2020-03-02 08:12:22
</td>
<td>
0.1 </td>
</tr>
<tr>
<td>
80150671
</td>
<td class="column1">
11019682A
</td>
<td>
800
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:02:32
</td>
<td></td>
<td>
2020-03-02 15:30:51
</td>
<td>
0.3 </td>
</tr>
<tr>
<td>
80150672
</td>
<td class="column1">
15000987A
</td>
<td>
503
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:28:04
</td>
<td></td>
<td>
2020-03-13 00:00:00
</td>
<td>
10.6 </td>
</tr>
<tr>
<td>
80150673
</td>
<td class="column1">
11011572E
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:32
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150674
</td>
<td class="column1">
18300753C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:57
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150675
</td>
<td class="column1">
11014966C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:31:26
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150676
</td>
<td class="column1">
11014264D
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:33:48
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150677
</td>
<td class="column1">
18300753C
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:34:16
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150678
</td>
<td class="column1">
11020109B
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:34:38
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150679
</td>
<td class="column1">
15001454B
</td>
<td>
100
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:37:59
</td>
<td></td>
<td>
2020-03-12 00:00:00
</td>
<td>
9.6 </td>
</tr>
</tbody>
</table>
I am trying to adding image on html table dynamically using JQuery, but I am confusing how to find out a table 2,3..etc tr with in first td to add image.
My table structure has no id or class how to find, but before table have some text as below.
<table width="100%" border="0" cellspacing="1" cellpadding="5">
<tbody>
<tr valign="top">
<td colspan="2"><b>Order Details:</b><br> <br>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
<b>Code</b>
</td>
<td>
<b>SKU</b>
</td>
<td>
<b>Quantity</b>
</td>
<td>
<b>Price</b>
</td>
<td>
<b>Grand Total</b>
</td>
</tr>
<tr>
<td>10172</td>
<td>Product 1<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>
₹ 250.00
</td>
</tr>
<tr>
<td>10165</td>
<td>Product 2<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>₹ 250.00
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Subtotal: </td>
<td>₹ 250.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Tax: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Shipping Cost: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Grand Total: </td>
<td>₹ 250.00</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody></table>
How to Add product Image before of the SKU.
Any help plz..?
As you don't have a thead or even use th for the headers, you'll have to skip the first row, you can use ">" to specify the direct hierarchy, eg:
$("table>tbody>tr>td>table>tbody>tr:not(:first-child)").each(function() {
var codecell = $(this).find("td:eq(0)");
var img = "/pathtoimage/" + codecell.text() + ".jpg"
codecell.after("<td><img src='" + img + '/></td>");
});
Updated: Fixed typo for ("td:eq(0)") vs ("td").eq(0) vs ("td")[0]
Hi I want to Export html to pdf, I have use jsPDF all are working pdf also exporting but i want to get same html in pdf, html styles are not working what can I do for that can anyone help me please? Is their are any way to use html styles in jsPDF?? This is my html code. I got a script function from this link http://jsfiddle.net/xzZ7n/1/
<div class="panel col-xs-12 col-sm-12 col-md-11" style="" id="quotation">
<header><img src="~/images/doc/header_footer/TOUR_Header.png" width="600" /></header>
<table width="600" border="0" style="font-size:12px;border:none;" ng-repeat="endetails in enquiryQuote" id="enq_details">
<tr>
<td><b>Enquiry Date</b></td>
<td>{{endetails.system_date_time | date:fullDate}}</td>
<td><b>Enquiry ref.</b></td>
<td>{{endetails.reference_no}}</td>
</tr>
<tr>
<td><b>Dep. date</b></td>
<td>{{endetails.departing_date | date:fullDate}}</td>
<td><b>Depart. from</b></td>
<td>{{endetails.departing_from}}</td>
</tr>
<tr>
<td><b>Ret. date</b></td>
<td>{{endetails.returning_date | date:fullDate}}</td>
<td><b>Travel. to</b></td>
<td>{{endetails.travelling_to}}</td>
</tr>
<tr>
<td><b>Customer</b></td>
<td>{{endetails.name}}</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="300" border="0" style="font-size:12px;border:none;" ng-repeat="total in invoice_total">
<tr>
<td><b>Total Price</b></td>
<td>{{total.total_amount}}</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product in invheader[0].invoice_hotel">
<tr>
<td><font color="red;">Hotel Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Hotel name</b></td>
<td style="width:300px;">{{product.hotel_name}}</td>
<td style="width:150px;"><b>No of rooms</b></td>
<td style="width:300px;">{{product.no_of_rooms}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Location</b></td>
<td style="width:300px;">{{product.city_code}}</td>
<td style="width:150px;">Room view</td>
<td style="width:300px;">{{product.product_hotel_room_views.roomview_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Checkin</b></td>
<td style="width:300px;">{{product.check_in| date:fullDate}}</td>
<td style="width:150px;">Room type</td>
<td style="width:300px;">{{product.product_hotel_room_types.room_type_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Checkout</b></td>
<td style="width:300px;">{{product.check_out| date:fullDate}}</td>
<td style="width:150px;">Board basis</td>
<td style="width:300px;">{{product.product_hotel_board_basis.bb_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>No of nights</b></td>
<td style="width:300px;"> </td>
<td style="width:150px;"> </td>
<td style="width:300px;"> </td>
</tr>
<tr>
<td colspan="4">
<b>Passengers - Rooms</b>
<div ng-repeat="item in product.product_hotel_room"><b>Adult :</b> {{item.adults}} and <b>Child :</b> {{item.child}}</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b></td>
<td>{{product.payable}}</td>
<td><b>Rate</b></td>
<td>{{product.rate}}</td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_flight in invheader[0].invoice_flight">
<tr>
<td><font color="red;">Flight Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Depatur City</b></td>
<td style="width:300px;">{{product_flight.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_flight.arrival_city}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Depature date</b></td>
<td style="width:300px;">{{product_flight.depature_date | date:fullDate}}</td>
<td style="width:150px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_flight.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td colspan="4">
<b>Passengers</b>
<br />
<div ng-repeat="item_flight_pass in product_flight.invoice_flight_passengers"><b>Name :</b>{{item_flight_pass.title}}.{{item_flight_pass.first_name}} {{item_flight_pass.last_name}} </div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_flight.budget}}</td>
<td><b>Total</b> {{product_flight.total_sell_amt}} </td>
<td><b>Commision</b> {{product_flight.commission_on}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_car in invheader[0].invoice_car">
<tr>
<td><font color="red;">Car Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up</b></td>
<td style="width:300px;">{{product_car.pickup}}</td>
<td style="width: 178px;"><b>Drop off</b></td>
<td style="width:300px;">{{product_car.dropoff}}</td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up date</b></td>
<td style="width:300px;">{{product_car.datein | date:fullDate}}</td>
<td style="width: 178px;"><b>Drop off Date</b></td>
<td style="width:300px;">{{product_car.dateout | date:fullDate}}</td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up Time</b></td>
<td style="width:300px;">{{product_car.timein | date:fullDate}}</td>
<td style="width: 180px;"><b>Drop off Time</b></td>
<td style="width:300px;">{{product_car.timeout | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Car Type</b></td>
<td style="width:300px;">{{product_car.type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_car.payable}}</td>
<td><b>Total</b> {{product_car.buyamount}}</td>
<td><b>Commision</b> {{product_car.commissionon}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_tour in invheader[0].invoice_tour">
<tr>
<td><font color="red;">Tour Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Tour Details</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Pick Up</b></td>
<td style="width:300px;">{{product_tour.pick_up}}</td>
<td style="width:150px;"><b>Drop off</b></td>
<td style="width:300px;">{{product_tour.drop_off}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Pick Up date</b></td>
<td style="width:300px;">{{product_tour.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Drop off Date</b></td>
<td style="width:300px;">{{product_tour.dateout | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Pick Up Time</b></td>
<td style="width:300px;">{{product_tour.timein | date:fullDate}}</td>
<td style="width:165px;"><b>Drop off Time</b></td>
<td style="width:300px;">{{product_tour.timeout | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_tour.payable}}</td>
<td><b>Total</b> {{product_tour.buyamount}}</td>
<td><b>Commision</b> {{product_tour.commissionon}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_rail in invheader[0].invoice_rail">
<tr>
<td><font color="red;">Rail Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure</b></td>
<td style="width:300px;">{{product_rail.departurecity}}</td>
<td style="width:150px;"><b>Arrival</b></td>
<td style="width:300px;">{{product_rail.arrivalcity}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_rail.type}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_rail.budget}}</td>
<td><b>Total</b> {{product_rail.amount}}</td>
<td style="width:165px;"><b>Quote Price</b> {{product_rail.quote_price}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_transfer in invheader[0].invoice_transfers">
<tr>
<td><font color="red;">Transfers Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>From City</b></td>
<td style="width:300px;">{{product_transfer.from_city}}</td>
<td style="width:150px;"><b>To City</b></td>
<td style="width:300px;">{{product_transfer.to_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Vehicle Type</b></td>
<td style="width:300px;">{{product_transfer.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_transfer.budget}}</td>
<td><b>Buy Amount</b> {{product_transfer.amount}}</td>
<td style="width:165px;"><b>Payable</b> {{product_transfer.payable}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_cruise in invheader[0].invoice_cruise">
<tr>
<td><font color="red;">Cruise Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure City</b></td>
<td style="width:300px;">{{product_cruise.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_cruise.arrival_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_cruise.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:165px;"><b>Departure date</b></td>
<td style="width:300px;">{{product_cruise.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_cruise.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Depature Time</b></td>
<td style="width:300px;">{{product_cruise.departure_time | date:fullDate}}</td>
<td style="width:165px;"><b>Arivalo Time</b></td>
<td style="width:300px;">{{product_cruise.arrival_time | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_cruise.budget}}</td>
<td><b>Amount</b> {{product_cruise.amount}}</td>
<td style="width:165px;"><b>Commistion Amount</b> {{product_cruise.commission_amount}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_insurance in invheader[0].invoice_insurance">
<tr>
<td><font color="red;">Insurance Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure City</b></td>
<td style="width:300px;">{{product_insurance.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_insurance.arrival_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_insurance.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:165px;"><b>Departure date</b></td>
<td style="width:300px;">{{product_insurance.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_insurance.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Depature Time</b></td>
<td style="width:300px;">{{product_insurance.departure_time | date:fullDate}}</td>
<td style="width:165px;"><b>Arivalo Time</b></td>
<td style="width:300px;">{{product_insurance.arrival_time | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_insurance.budget}}</td>
<td><b>Amount</b> {{product_insurance.amount}}</td>
<td style="width:165px;"><b>Commistion Amount</b> {{product_insurance.commission_amount}}</td>
<td> </td>
</tr>
</table>
<footer><img src="~/images/doc/header_footer/TOUR_Footer.png" width="600" /></footer>
</div>
<div class="rightpan" id='printablediv'>
<p>Print Content</p>
<input type='button' id="cmd" value="Download" class="button1 sbtbutton" />
<div>
<div style="display: none;" id="editor"></div>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
var element = $("#printablediv"); // global variable
var getCanvas; // global variable
$("#cmd").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#editor").append(canvas);
getCanvas = canvas;
var img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Vistordetails.pdf');
form.width(cache_width);
}
});
});
Late Answer!!
Use Html2Canvas plugin to convert a div to canvas
next add the canvas image to JsPDF doc
As I say, I am using a table to create a form. input-small and its label fits great in various places. I have opened up three rows in one column to place a 3 row textarea. Simple I thought, but I get a messed up table that appears OK in the live view but has half the input-small placeholders are missing, in the design view (Dreamweaver)it is full of broken tags.
Here is the code without the textarea and with.
Without
<table width="581" border="0" summary="Contact">
<caption>
Personal Details
</caption>
<tr>
<td width="120">Full Name</td>
<td width="226"><input class="input-small" type="text" placeholder=".input-small"></td>
<td width="71">Phone</td>
<td width="146"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td>Postal Address</td>
<td rowspan="4"> </td>
<td>Email</td>
<td><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
<td rowspan="2">Emergency Contact</td>
<td rowspan="2"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Postcode</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
With
<table width="581" border="0" summary="Contact">
<caption>
Personal Details
</caption>
<tr>
<td width="120">Full Name</td>
<td width="226"><input class="input-small" type="text" placeholder=".input-small"></td>
<td width="71">Phone</td>
<td width="146"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td>Postal Address</td>
<td rowspan="4"><textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></td>
<td>Email</td>
<td><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
<td rowspan="2">Emergency Contact</td>
<td rowspan="2"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Postcode</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Cheers
Your problem is that the textarea is not closed:
<td rowspan="4"><textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></textarea></td>
See </textarea>. It is needed.
Close off the field with </textarea>:
<textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></textarea>
i'm trying to create an Excel-Form to a Web-form and now i'm stuck at this part: http://jsfiddle.net/J9NAS/40/
<table id="model">
<tr>
<th class="auto-style2">Basic</th>
<th class="auto-style2">Maxi</th>
<th>Short</th>
<th>Name</th>
<th class="auto-style2">Selection</th>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>A</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox1" type="checkbox" value="HA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>B</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox2" type="checkbox" value="PA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>C</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox3" type="checkbox" value="IA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>D</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox4" type="checkbox" value="SPIN" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>E</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox5" type="checkbox" value="VB" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>F</td>
<td>asdasd)</td>
<td class="auto-style2">
<input id="Checkbox6" type="checkbox" value="BWCPN" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>G</td>
<td>asddas</td>
<td class="auto-style2">
<input id="Checkbox7" type="checkbox" value="GBH" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>H</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox8" type="checkbox" value="GR" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>I</td>
<td>dsad</td>
<td class="auto-style2">
<input id="Checkbox9" type="checkbox" value="IR" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>J</td>
<td>asdasds.</td>
<td class="auto-style2">
<input id="Checkbox10" type="checkbox" value="CC" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>K</td>
<td>asdasd.</td>
<td class="auto-style2">
<input id="Checkbox11" type="checkbox" value="GA" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>L</td>
<td>Rasdasd.</td>
<td class="auto-style2">
<input id="Checkbox12" type="checkbox" value="GPAT" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>M</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox13" type="checkbox" value="GPIN" class="maxi" />
</td>
</tr>
</table>
<h1>Callflow:</h1>
<div id="status"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#status").change(function () {
if (("#Checkbox1").attr("checked") === true) {
$("#status").append("#Checkbox1").val();
};
});
});
</script>
i want to show the user what kind of Model he chose (Basic or Maxi). The criteria are shown with the 'X's and depending on what features a user chooses, the text field below the form should show "basic" or "maxi".
Can someone help me with that? My JQuery/JS Skills are very basic, yet.
Try
$(document).ready(function () {
var $basic = $('.basic'), $maxi = $('.maxi'), $status = $('#status');
$basic.add($maxi).change(function(){
if($maxi.filter(':checked').length){
$status.text('Maxi')
} else if($basic.filter(':checked').length){
$status.text('Baisc')
} else {
$status.text('')
}
})
});
Demo: Fiddle
You're using a wrong selector. #status belongs to div
$("#status").change(function () {
so you need to have like
$("input[type=checkbox]").change(function () {
based on the value you can show/hide the div.