I have this HTML code:
<html>
<head>
<script type="text/javascript">
function showStuff(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
</script>
</head>
<body>
<FORM name=myForm>
<TABLE border=0 align=center>
<TBODY>
<TR>
<TD align=right>Quiz/Test Title:</TD>
<TD align=left>
<INPUT size=25 type=text name=t>
</TD>
</TR>
<TR>
<TD align=right>
<input type="button" value="Show/Hide" onclick="showStuff('multiplechoice')">
</TD>
</TR>
</TBODY>
<TBODY id="multiplechoice" style="display: none;" align=center>
<TR>
<TD align=right>
<h3>Multiple Choice</h3>
</TD>
</TD>
<TR>
<TD align=right>Section Name:</TD>
<TD align=left>
<INPUT size=20 type=text name=section1>
</TD>
</TR>
<TR>
<TD align=right>Directions:</TD>
<TD align=left>
<INPUT size=71 type=text name=directions1>
</TD>
</TR>
<TR>
<TD align=right>Question Number:</TD>
<TD align=left>
<INPUT size=2 type=text name=n1 id=n1 value=1 onkeypress="return alpha(event,numbers)">
</TD>
</TR>
<TR>
<TD align=right>Question:</TD>
<TD align=left>
<textarea rows=2 cols=55 name=q1 id=q1></textarea>
</TD>
</TR>
<TR>
<TD align=right>Answer A:</TD>
<TD align=left>
<INPUT size=35 type=text name=a1>
</TD>
</TR>
<TR>
<TD align=right>Answer B:</TD>
<TD align=left>
<INPUT size=35 type=text name=b1>
</TD>
</TR>
<TR>
<TD align=right>Answer C:</TD>
<TD align=left>
<INPUT size=35 type=text name=c1>
</TD>
</TR>
<TR>
<TD align=right>Answer D:</TD>
<TD align=left>
<INPUT size=35 type=text name=d1>
</TD>
</TR>
<TR>
<TD align=right>Answer (A,B,C,D):</TD>
<TD align=left>
<INPUT size=1 type=text name=correct1 onkeyup="upper(this)" onkeypress="return alpha(event,letters)" maxlength="1">
</TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</body>
</html>
Ok so the problem is when I click show/hide it shows the form, but it moves everything in the form over to the left. I would like it to stay all aligned in the center. Is there anyway to do this? I left out all the other functions I have linked to everything else, so don't worry about that it all works. Any help is greatly appreciated.
why don't you place your two TBodys into separate table?
something like below:
<FORM name=myForm>
<TABLE border=0 align=center>
<TBODY>
<TR>
<TD align=right>Quiz/Test Title:</TD>
<TD align=left>
<INPUT size=25 type=text name=t>
</TD>
</TR>
<TR>
<TD align=right><input type="button" value="Show/Hide" onclick="showStuff('multiplechoice')">
</TD>
</TR>
</TBODY>
</table>
<table border=0 align=center>
<TBODY id="multiplechoice" style="display: none;" align=center>
<TR>
<TD align=right><h3>Multiple Choice</h3></TD>
</TR>
<TR>
<TD align=right>Section Name:</TD>
<TD align=left><INPUT size=20 type=text name=section1></TD>
</TR>
<TR>
<TD align=right>Directions:</TD>
<TD align=left><INPUT size=71 type=text name=directions1></TD>
</TR>
<TR>
<TD align=right>Question Number:</TD>
<TD align=left><INPUT size=2 type=text name=n1 id=n1 value=1 onkeypress="return alpha(event,numbers)"></TD>
</TR>
<TR>
<TD align=right>Question:</TD>
<TD align=left><textarea rows=2 cols=55 name=q1 id=q1></textarea></TD>
</TR>
<TR>
<TD align=right>Answer A:</TD>
<TD align=left><INPUT size=35 type=text name=a1></TD></TR>
<TR>
<TD align=right>Answer B:</TD>
<TD align=left><INPUT size=35 type=text name=b1></TD>
</TR>
<TR>
<TD align=right>Answer C:</TD>
<TD align=left><INPUT size=35 type=text name=c1></TD>
</TR>
<TR>
<TD align=right>Answer D:</TD>
<TD align=left><INPUT size=35 type=text name=d1></TD>
</TR>
<TR>
<TD align=right>Answer (A,B,C,D):</TD>
<TD align=left><INPUT size=1 type=text name=correct1 onkeyup="upper(this)" onkeypress="return alpha(event,letters)" maxlength="1"></TD>
</TR>
</TBODY>
</TABLE>
</FORM>
it fixes everything. see this working codepen
Related
I would like to print this script currency format thousand separator with comma or dot with javascript.
I mean ,for example I would print 1.001,00 instead of 1001
which code should I add for this script ?
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('input').change(function(){
var linetotals = 0;
$('[name^="price"]').each(function(){
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
$(this).val(price*quantity);
linetotals += price*quantity;
});
$('[name=subtotal]').val(linetotals);
});
});
</script>
<form name="invoice form" action="saveToDatabase.java">
<table width="30%" border="1" height="30%">
<tbody>
<tr>
<td colspan="5" align="center">Customer Invoice</td>
</tr>
<tr>
<td width="5%" bgcolor="#CCCCCC">Sn.no.</td>
<td width="25%" bgcolor="#CCCCCC">Item</td>
<td width="25%" bgcolor="#CCCCCC">Unit Price(In $)</td>
<td width="20%" bgcolor="#CCCCCC">Quantity</td>
<td width="25%" bgcolor="#CCCCCC">Line Total<br>(Price * Qnty)</td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">Iphone 5S</td>
<td width="25%"><input value="400" name="unitprice1" size="4" type="text"></td>
<td width="20%"><input name="quantity1" value="2" size="2" type="text"></td>
<td width="25%"><input name="price1" value="400" size="4" type="text"></td>
</tr>
<tr>
<td width="5%">2</td>
<td width="25%">Ipad 2</td>
<td width="25%"><input value="700" name="unitprice2" size="4" disabled="" type="text"></td>
<td width="20%"><input name="quantity2" value="1" size="2" type="text"></td>
<td width="25%"><input name="price2=" value="700" size="4" type="text"></td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">mp3</td>
<td width="25%"><input value="50" name="unitprice1" size="4" disabled="" type="text"></td>
<td width="20%"><input name="quantity1" value="3" size="2" type="text"></td>
<td width="25%"><input name="price1" value="150" size="4" type="text"></td>
</tr>
<tr>
<td colspan="5" align="right">Total<input name="subtotal" value="1250" size="12" disabled="" type="text"></td>
</tr>
</tbody>
</table>
</form>
JSfiddle link
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 have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.
Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}
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.