We Keep Coding

How to print the content inside a bootstrap modal on clicking the print button which is also inside the modal?

I want to print the content inside a bootstrap modal leaving the space for images blank on clicking print button , which is also inside the modal .
I have tried this with PHP Version 5.6.15 and mysqli in localhost.
For front-end development , I have used bootstrap and css.
I have used plugin.
First , I have a eye icon that opens the bootstrap modal:[quote.php]
<a href="#"><i class="view_data fa fa-eye" id="<?php echo $id;?>" aria-hidden="true"></i>
<div id="quote_details"></div>
Second , the content of bootstrap modal comes from an ajax call like :[quote.php]
<script src="../assets/js/jquery.printElement.js"></script>
<script>
$('.view_data').click(function(){
var id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"post",
data:{id:id},
success:function(data){
$("#quote_details").html(data);
$("#dataModal_quote").modal("show");
$('#btnPrint').on('click', function () {
$('#printThis').printElement();
});
}
});
})
</script>
and the code inside select.php is :
if(isset($_POST["id"])){
$output = '
<div id="dataModal_quote" class="modal fade">
<div class="modal-dialog" >
<div class="modal-content" style="width: 950px; margin-left: -190px;">
<div class="modal-header qutviewhead">
<h4 class="modal-title modelquthedtitle">Sample</h4>
<button type="button" class="close qotviewclosebtn" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="height: 550px; overflow: scroll; overflow-x: hidden; text-align: center; font-size: 11px;">
<div class="header">
<img src="sss.jpg" style="width: 100%; height: 130px;">
</div>
<div style="display: flex; flex-wrap: wrap;">
<div style="width: 15%;">
<img src="sidebar.jpg" style="padding-top: 15px; width: 105px; height: 100%" align="left">
</div>
<div style="width: 85%;background: url("waterm.jpg"); background-repeat: no-repeat; background-position: center; margin-top: 15px;" id="printThis">';
$sql=mysqli_query($link,"SELECT * FROM items where id=".$_POST["id"]);
while($item=mysqli_fetch_assoc($sql))
{
$qno = $item['no'];
$qdate = date('d-m-Y',strtotime($item['date']));
$cusId = $item['cid'];
$qSubject = $item['subject'];
$qRefer = $item['refer'];
$qDistAmt = $item['damount'];
$qCgst = $item['cgst'];
$qIgst = $item['igst'];
$qSgst = $item['sgst'];
$qOverAllamt =$item['total'];
$qAmtAfterDis = $item['amount_after_discount'];
$qComments = $item['comments'];
$qPDfile = $item['pdf_file'];
}
$total = $item['total'] - $item['amount_after_discount'];
$customer_mst_sql=mysqli_query($link,"select cm.*,sm.name as state from customer as cm left join state as sm on sm.id=cm.state_id where cm.id=".$cusId) ;
$customer=mysqli_fetch_assoc($customer_mst_sql);
$cus_add = explode(",",$customer['address']);
// print_r($cus_add);
$addLineOne = '';
$addLineTwo = '';
if(count($cus_add) > 3){
// greater than 3
//Two lines
$addLineOne = $cus_add[0].",".$cus_add[1].",".$cus_add[2].",";
for($i=3;$i<count($cus_add);$i++){
$addLineTwo .= $cus_add[$i].",";
}
}else{
//LESS than or equal to 3
//One line
for($i=0;$i<count($cus_add);$i++){
$addLineOne .= $cus_add[$i].",";
}
}
$addLineThree = $customer['city'].','.str_replace(" ","",$customer['state']).'-'.$customer['pincode'];
$output .= '<table align="right" style="margin-top:10px;">
<tr>
<th style="font-size: 11px; padding: 0px 5px;">Quote No</th>
<th style="font-size: 11px; padding: 0px 5px;">'.$qno.'</th>
<tr>
<th style="font-size: 11px; padding: 0px 5px;">DATE</th>
<th style="font-size: 11px; padding: 0px 5px;">'.$qdate.'</th>
</tr>
</table>
<p style="text-align: left; margin-top: 100px; line-height: 16px; font-size: 11px;">
To<br>
<b>'.$customer['company_name'].',</b>';
if(!empty($addLineOne)){
$output .= '<br>'.$addLineOne;
}
if(!empty($addLineTwo)){
$output .= '<br>'.$addLineTwo;
}
if(!empty($addLineThree)){
$output .= '<br>'.$addLineThree;
}
if(!empty($customer['company_registered_no'])){
$output .= '<br><b>GSTIN: '.$customer['company_registered_no'].'</b>.';
}
$output .= '</p>
<p style="text-align: left; line-height: 16px; font-size: 11px;">
Sir,
</p>
<p style="text-align: left; margin-left: 40px; line-height: 16px; font-size: 11px;">
SUB: '.$qSubject.'<br>
<b>Ref: '.$qRefer.'</b>
</p>
<p style="margin-left: 20px; line-height: 16px; font-size: 11px;">I herewith enclosed my quote for your kind consideration.</p>
<h4 style="font-weight: 900;"><u><b>QUOTATION</b></u></h4>
<table style="width: 100%;">
<tr>
<th style="font-size: 11px; padding: 0px 5px;">SL</th>
<th style="font-size: 11px; padding: 0px 5px;">DESCRITION</th>
<th style="font-size: 11px; padding: 0px 5px;">UNIT</th>
<th style="font-size: 11px; padding: 0px 5px;">RATE / UNIT</th>
<th style="font-size: 11px; padding: 0px 5px;">CHARGES (Rs) </th>
</tr>';
$products=array();
$product_sql=mysqli_query($link,"SELECT cpd.*,sm.name as service_name from product_details as cpd left join service as sm on sm.id=cpd.sid where cpd.qid=".$_POST["id"]);
while($product_item=mysqli_fetch_assoc($product_sql))
{
$products[]=$product_item;
}
$i=0;$total = 0;
foreach($products as $product)
{ $i=$i+1;
if(!empty($product['service_name']))
{
$ser_name=$product['service_name'];
}
else
{
$ser_name=$product['description'];
}
$output.='<tr>
<td style="font-size: 11px; padding: 0px 5px;">'.$i.'.</td>
<td style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;"><b>'.$product['description']." ".$product['service_name'].'</b></td>
<td style="font-size: 11px; padding: 0px 5px;">'.$product['quantity'].'</td>
<td style="font-size: 11px; padding: 0px 5px;">'.$product['price'].'.00</td>
<td style="font-size: 11px; padding: 0px 5px;">'.$product['quantity']*$product['price'].'.00</td>
</tr>';
$subtotal = $product['quantity']*$product['price'];
$total += $subtotal;
}
$output .= '
<tr>
<td colspan="4" style="font-size: 11px; padding: 0px 5px; text-align: right;">
Total<br>';
if($qDistAmt>0)
{
$output .=' Discount<br>';
}
if($customer['applicable']!='on')
{
if($customer['location']=='Outstation')
{
$output .='IGST#'.$qIgst.'%<br>';
}
else
{
$output .='CGST#'.$qCgst.'%<br>
SGST#'.$qSgst.'%<br>';
}
}
else
{
$output .='Exempted vide LUT Acknowledgement, ARN-'.$customer['customer_no_tax_no'].', GST#0%<br>';
}
$output .= '<b>Grand Total:</b></td>;
<td align="right">'.
$total.'.00<br>';
if($qDistAmt>0)
{
$output.= $qDistAmt.'.00<br>';
}
if($customer['applicable']!='on')
{
if($customer['location']=='Outstation')
{
$tax_amount=$qAmtAfterDis*($qIgst/100);
$output.= $tax_amount.'.00<br> ';
}
else
{
$tax_amount1=$qAmtAfterDis*($qCgst/100);
$tax_amount2=$qAmtAfterDis*($qSgst/100);
$output .= $tax_amount1.'.00<br>'.$tax_amount2.'.00<br>';
}
}
else
{
$output .='0.00<br>';
}
$output .= '<b>'.$qOverAllamt.'.00</b>
</td>
</tr>
</table>
<p style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;"><u><b>Scope of Work (Onsite and Offsite emergency)</b></u></p>
<p style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">'.$qComments.'</p>
<p style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;"><b>PAYMENT TERMS:</b></p>';
$payment_terms=array();
$payment_terms_sql=mysqli_query($link,"SELECT cpt.*,mm.name as mileston_name from crm_payment_terms as cpt left join milestons_master as mm on mm.id=cpt.milestons_id where cpt.quotation_id='".$_POST["quote_id"]."'");
while($payment_term=mysqli_fetch_assoc($payment_terms_sql))
{
$payment_terms[]=$payment_term;
}
$output .= '<p style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px; margin-left: 20px;">';
$i=0;
foreach($payment_terms as $pay)
{ $i=$i+1;
$output .= $i.".".$pay['payment_description'].'<br><br>';
}
$output .= '</p>
<p style="text-align: left; font-size: 11px; padding: 0px 5px;">Kindly send the payment as early as possible.</p>
<table style="width: 100%;">
<tr>
<th colspan="5" style="color:blue; text-align: center;"><i><b>ABC PRIVATE LIMITED</b></i></th>
</tr>
<tr>
<td style="text-align: left; font-size: 11px; padding: 0px 5px;">PAN</td>
<th style="text-align: left; font-size: 11px; padding: 0px 5px;" colspan="2">AA545615</th>
<td rowspan="5" style=" width: 335px; font-size: 11px; padding: 0px 5px; line-height: 16px;">
<b>Dr. M. Gayathri., PhD</b><br>
Director / Chartered Engineer<br>
Plot No. 1148, Four Cross street, Annanagar West,<br>
Tambaram, Chennai – 600 050<br>
Competent Person Under Factories Act, TN & PY<br>
DISH Order: H1 / 11111 / 2017, Dt.16.10.2017 to 15.10.2020<br>
MOEF-NABET ORDER/ RH Expert: NABET/EIA/RA000/000/ 17.04.2015,<br>
TN order Auditor approval <br>order: 111111/09-I.Date: 29.03.2010<br>
</td>
</tr>
<tr>
<td style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">GSTIN</td>
<th style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">33AAXCS1316B1ZL</th>
<th style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">State code: 33</th>
</tr>
<tr>
<td style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">SAC and Category</td>
<th style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;" colspan="2">999999/Other professional, technical and business services</th>
</tr>
<tr>
<td style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">CIN No.</td>
<th style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;" colspan="2">U74999999999999999999</th>
</tr>
<tr>
<td colspan="3" style="font-size: 11px; padding: 0px 5px; line-height: 16px;"><b>RTGS/NEFT: ICICI Bank Limited</b>, No: 100, School Road, Anna Nagar West Extension, Chennai 600 101, <b>AC No: 000000000000000</b>, IFSC: ICIC00000000, MICR: 601111111111</td>
</tr>
</table>
</div>
</div>
<div style="margin-top: 15px;">
<p style="background: #2e3192; color: #fff; padding: 10px 10px;">Plot No.1111, West End Colony, Anna Nagar West Extension, Chennai-600 050. <br>
Ph : 044-222222, 999999 33333. Email : gayutest#ss.com, Web : www.sssstest.in
</p>
</div>
<div class="cusfooter">
<button type="button" class="btn btn-default modcanbtn" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Cancel</button>
<button type="button" class="btn btn-default modmailbtn"><i class="fa fa-envelope" aria-hidden="true"></i> Email</button>';
$output .= 'Download</i>
<button type="button" class="btn btn-default modpribtn" id="btnPrint"> <i class="fa fa-print" aria-hidden="true"></i> Print</button>
</div>
</div>
</div>
</div> ';
echo $output;
}
I am able to get the print page but the table contents are showing as such without table design , alignment mismatches and the space for images are not left blank.
My expected result is a print page where the UI[table designs and alignment] inside the bootstrap modal matches the print page conent .
But the spaces for images in the print page should be left blank

Javascript confusion about sum values

I am developing a webpage.
I need help adding plus one to the value on click.
I also need help adding the price of all the items that are collected in a section in the "number of items selected"
I want to add the total price of all the items in the "Total amount section".
When I click on Add to cart once it shows plus 1 in the text box but does not add more to it when the button is clicked again.
body {
margin: 0;
padding: 0;
line-height: 1.5em;
background: #782609 url(images/body_bg.jpg) repeat-x;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
a:link,
a:visited {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
a:active,
a:hover {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
h1 {
font-size: 22px;
color: white;
font-weight: bold;
height: 27px;
padding-top: 40px;
padding-left: 70px;
}
h2 {
font-size: 13px;
font-weight: bold;
color: #fff;
height: 22px;
padding-top: 3px;
padding-left: 5px;
background: url(images/h2.jpg) no-repeat;
}
#maincontainer {
width: 1000px;
margin: 0 auto;
float: left;
}
#topsection {
background: url(images/header.jpg) no-repeat;
height: 283px;
}
#title {
margin: 0;
padding-top: 150px;
padding-left: 50px;
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
}
#slogan {
margin-top: 10px;
padding-left: 50px;
font-size: 12px;
font-weight: bold;
color: #ff9a59;
}
#left_column {
float: left;
width: 229px;
}
#menu_top {
float: left;
height: 33px;
width: 229px;
background: url(images/menu_top.jpg) no-repeat;
}
#right_column {
float: right;
width: 651px;
padding-right: 20px;
height: auto
}
#destination {
float: left;
padding: 10px 10px 0px 40px;
width: 280px;
border-right: dotted 1px #782609;
}
#search {
float: right;
padding: 0px 30px 0px 0px;
width: 262px;
background: url(images/form-bg.jpg) repeat-y;
}
.search_top {
background: url(images/=search.jpg) no-repeat;
width: 262px;
height: 76px;
}
.search_mid {
margin: 0px;
padding-left: 10px;
padding-top: 0px;
}
.search_bot {
background: url(images/search_bot.jpg) no-repeat;
height: 11px;
}
#contact {
width: 200px;
height: 96px;
background: url(images/contact.jpg) no-repeat;
color: #fff;
padding-left: 29px;
padding-top: 15px;
}
#bot {
float: left;
height: 22px;
width: 877px;
}
#footer {
float: left;
width: 100%;
padding-top: 16px;
height: 31px;
color: #fff;
text-align: center;
background: url(images/footer_bg.jpg) repeat-x;
}
#footer a {
color: #fff;
font-weight: bold;
}
.menu {
margin-top: 40px;
width: 210px;
}
.menu li {
list-style: none;
height: 30px;
display: block;
background: url(images/menu_bg.jpg) no-repeat;
font-weight: bold;
font-size: 12px;
padding-left: 30px;
padding-top: 7px;
}
.menu a {
color: #fff;
text-decoration: none;
}
.menu a:hover {
color: #f08661;
}
.innertube {
margin: 40px;
margin-top: 0;
margin-bottom: 10px;
text-align: justify;
border-bottom: dotted 1px #782609;
}
.post_date {
color: #177212;
}
<body>
<script>
var BOO = 1;
var COIN = 1;
var MAP = 1;
var WATCH = 1;
var HARM = 1;
var GUITAR = 1;
var incrementCount = function() {
clicks++;
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li>Home
</li>
<li>Tourism
</li>
<li>Education and Industry
</li>
<li>Culture
</li>
<li>Gallery
</li>
<li>Gift Shop
</li>
</ul>
</div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000
<br />Fax: 002-200-2000
<br />Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td>
<img src="images/BOOMRANG.jpg" width="151" height="148">
</td>
<td class="echo">
<input type="text" form="esp" id="push" value="" size="2" />
</td>
<td>
<img src="images/coin.jpg" width="140" height="139">
</td>
<td class="echo">
<input type="text" form="esp" id="q2" value="" size="2" />
</td>
<td>
<img src="images/FLAG.jpg" width="175" height="152">
</td>
<td class="echo">
<input type="text" form="esp" id="q3" value="" size="2" />
</td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3>
<input type="button" value="Add to Cart" onClick="incrementCount();" q1.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='COIN=1 ; q2.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='MAP=1 ; q3.value="1" '/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='WATCH=1 ; q4.value="1" '/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick='HARM=1 ; q5.value="1" '/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick='GUITAR=1 ; q6.value="1" '/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS: </h2>
<h2> TOTAL VALUE: </h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Travel Company Red - Free Website Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
var BOO={price:10,qty:0}
var COIN = {price:10,qty:0}
var MAP = {price:10,qty:0}
var WATCH = {price:10,qty:0}
var HARM = {price:10,qty:0}
var GUITAR = {price:10,qty:0}
var setTotalValue=function(){
var totalvalue=BOO.price*BOO.qty+COIN.price*COIN.qty+MAP.price*MAP.qty+WATCH.price*WATCH.qty+HARM.price*HARM.qty+GUITAR.price*GUITAR.qty;
document.getElementById('totalvalue').innerHTML=totalvalue;
}
var setTotalCount=function(){
var totalitems=BOO.qty+COIN.qty+MAP.qty+WATCH.qty+HARM.qty+GUITAR.qty;
document.getElementById('totalitems').innerHTML=totalitems;
}
var addBoo = function(){
BOO.qty++;
document.getElementById('q1').setAttribute("value",BOO.qty);
setTotalValue();
setTotalCount();
}
var addCoin = function(){
COIN.qty++;
document.getElementById('q2').setAttribute("value",COIN.qty);
setTotalValue();
setTotalCount();
}
var addMap = function(){
MAP.qty++;
document.getElementById('q3').setAttribute("value",MAP.qty);
setTotalValue();
setTotalCount();
}
var addWatch = function(){
WATCH.qty++;
document.getElementById('q4').setAttribute("value",WATCH.qty);
setTotalValue();
setTotalCount();
}
var addHarm = function(){
HARM.qty++;
document.getElementById('q5').setAttribute("value",HARM.qty);
setTotalValue();
setTotalCount();
}
var addGuitar = function(){
GUITAR.qty++;
document.getElementById('q6').setAttribute("value",GUITAR.qty);
setTotalValue();
setTotalCount();
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li>Home</li>
<li>Tourism</li>
<li>Education and Industry</li>
<li>Culture</li>
<li>Gallery</li>
<li>Gift Shop</li>
</ul></div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000<br />
Fax: 002-200-2000<br />
Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td><img src="images/BOOMRANG.jpg" width="151" height="148"></td>
<td class="echo"><input type="text" form="esp" id="q1" value="" size="2" /></td>
<td><img src="images/coin.jpg" width="140" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q2" value="" size="2" /></td>
<td><img src="images/FLAG.jpg" width="175" height="152"></td>
<td class="echo"><input type="text" form="esp" id="q3" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onClick ="addBoo()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addCoin()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addMap()"/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addWatch()"/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick="addHarm()"/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick="addGuitar()"/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS:<span id="totalitems"></span> </h2>
<h2> TOTAL VALUE: <span id="totalvalue"></span></h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>

Basic Javascript : using onclick to print a table

<!DOCTYPE html>
<html>
<head>
<title> Title </title>
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body>
Please select your price range (per hour) :
<select id="valueDropdown">
<option value="lessThanFive">below 5</option>
<option value="betweenSixAndTen">6-10</option>
<option value="tenPlus">10+</option>
</select>
<button type="button" onclick="toggleTable();" >Search</button>
<div id="cheapestTable" style="display: none;>
<table class="tableizer-table" >
<tr class="tableizer-firstrow"><th>SCHOOLS</th><th>Booking </th><th>web site</th><th> Price per hour </th><th> Columna1 </th><th>Courses English</th><th>Language</th><th>Social Media</th><th>Location</th></tr>
<tr><td>Brittannia</td><td>no</td><td>7</td><td> £4.00 </td><td> </td><td>General, Examn, 1to1, Business</td><td>English</td><td> </td><td>Manchester</td></tr>
<tr><td>ABLE</td><td>no</td><td>8</td><td> £5.00 </td><td> </td><td>General, Examn, 1to1</td><td>English Spanish</td><td>F, T, S, in, I</td><td>Manchester</td></tr>
</table>
</div>
<script>
function toggleTable(){
var e = document.getElementById("valueDropdown");
if(e.options[e.selectedIndex].value === 'lessThanFive'){
document.getElementById('cheapestTable').style.display = "table"
}else{
document.getElementById('result').innerHTML="hi2";
}
}
</script>
</body>
</html>
I'm trying to print a table using Javascript when the user presses a button. The button works fine.
The table is quite complex. What I've tried so far is setting the original location of the table off the screen and then bringing it back when the user pressed the button.
Table:
<div id="cheapestTable">
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: absolute ;
top: -99px;
left: -99px;
}
.. more here with formatting of individual cells etc.
Then when the button is pressed:
document.getElementById('cheapestTable').style.tableizer-table.left = "100px";
document.getElementById('cheapestTable').style.tableizer-table.top = "100px";
However the table is not appearing when the button is pressed.

You're missing the closing quote in <div id="cheapestTable" style="display: none;>.
Also, the proper style to display the DIV is block, not table.
function toggleTable() {
var e = document.getElementById("valueDropdown");
if (e.options[e.selectedIndex].value === 'lessThanFive') {
document.getElementById('cheapestTable').style.display = "block"
} else {
document.getElementById('result').innerHTML = "hi2";
}
}
table.tableizer-table {
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
Please select your price range (per hour) :
<select id="valueDropdown">
<option value="lessThanFive">below 5</option>
<option value="betweenSixAndTen">6-10</option>
<option value="tenPlus">10+</option>
</select>
<button type="button" onclick="toggleTable();">Search</button>
<div id="cheapestTable" style="display: none;">
<table class="tableizer-table ">
<tr class="tableizer-firstrow ">
<th>SCHOOLS</th>
<th>Booking</th>
<th>web site</th>
<th>Price per hour</th>
<th>Columna1</th>
<th>Courses English</th>
<th>Language</th>
<th>Social Media</th>
<th>Location</th>
</tr>
<tr>
<td>Brittannia</td>
<td>no</td>
<td>7</td>
<td>£4.00</td>
<td> </td>
<td>General, Examn, 1to1, Business</td>
<td>English</td>
<td> </td>
<td>Manchester</td>
</tr>
<tr>
<td>ABLE</td>
<td>no</td>
<td>8</td>
<td>£5.00</td>
<td> </td>
<td>General, Examn, 1to1</td>
<td>English Spanish</td>
<td>F, T, S, in, I</td>
<td>Manchester</td>
</tr>
</table>
</div>

Javascript - toggled content function only works once

Not really at ease when it comes to coding, I would appreciate your help on an issue I am facing:
On a landing page, some content should be visible on click or by clicking on a table of content on the top of the page.
On-click toggle works. However, clicking on a menu item, works only once. Then, if I go back to the menu and click on another item of the menu, nothing happens
My guess is that the problem comes from scripts which are "separated" while they should be merged together.
Here is the code:
<style type="text/css">
a img
{
border: 0;
}
</style>
<style>
.ToggleTarget {
display: none;
}
</style>
<script type="text/javascript">
function toggle(id) {
var el = document.getElementById(id);
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
el.style.background= "white";
}
}
</script>
<script type=text/javascript>
if ( location.hash.length > 1 )
{
toggle(location.hash.substring(1));
}
</script>
Content
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="#1">Title1</a>
<br>
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="#2">Title2</a>
Content
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td width="100%" style="PADDING-TOP: 3px; PADDING-Bottom: 3px" bgcolor="#005a84" valign="top" colspan="4" align="left"><a style="COLOR: rgb(75,75,75); FONT-WEIGHT: bold; TEXT-DECORATION: none" href="javascript:toggle('1');">
<p style="text-decoration: none; font-family: Arial; font-size: 13px; color: rgb(255, 255, 255); height:10px; line-height:18px;"><strong>HEADER1
</strong></p>
</a>
<div id="1" class="ToggleTarget" style="padding-left:10px"><br>
CONTENT1
</div>
</td>
</tr>
<tr>
<td width="100%" style="PADDING-TOP: 3px; PADDING-Bottom: 3px" bgcolor="#005a84" valign="top" colspan="4" align="left"><a style="COLOR: rgb(75,75,75); FONT-WEIGHT: bold; TEXT-DECORATION: none" href="javascript:toggle('2');">
<p style="text-decoration: none; font-family: Arial; font-size: 13px; color: rgb(255, 255, 255); height:10px; line-height:18px;"><strong>HEADER2
</strong></p>
</a>
<div id="2" class="ToggleTarget" style="padding-left:10px"><br>
CONTENT2
</div>
</td>
</tr>
</tbody>
</table>
Many thanks!

How about changing
href="javascript:toggle('2”);
to
href="javascript:toggle('2');
Does this solve your problem?

You can create another function to handle the links : (juste behind the toggle function would work)
function goToContent(id){
var el = document.getElementById(id);
if(el.style.display != "block"){
toggle(id);
}
el.scrollIntoView();
}
Then reference it in the html
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="javascript:goToContent('1');">Title1</a>
<br>
<br>
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="javascript:goToContent('2');">Title2</a>
See this fiddle : http://jsfiddle.net/qZLsB/13/
Although it should be working, a "cleaner" way to handle clicks would be to use JavaScript DOM events. If you feel like learning about it, you can read more on http://www.w3schools.com/js/js_htmldom_events.asp

Here is a simplified example of what you were trying to do. I think you just overcomplicated it.
http://jsfiddle.net/j9HXk/
<p onclick="toggleContent('1')"><strong>HEADER1</strong></p>
You can use the click event to do what you were doing. Then you can put some code in the onLoad event to check the hash at the end of the current URL and show/hide the appropriate section.
Let me know if you have any questions about how this is working.

Trying to get my HTML 5 audio player to play more than one file on the same page

I have coded a simple HTML5 audio player (javascript and css) thats starts when the user clicks play. I have got it to work with one file on the page. I have copied and pasted the code several times so I can have several files on the same page, the player breaks and won't play any of them. Please, any help is appreciated! Below is my HTML:
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
Here is the css:
/* globals */
html {
font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background: url('background.png');
background-repeat: no-repeat
}
body {
margin: 0 auto;
text-align: center;
}
#audioplayer {
display: block;
overflow: hidden;
width: 30px;
height: 30px;
position: relative;
}
.play,.pause {
background: #fff;
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
margin: 5px;
display: block;
overflow: hidden;
text-indent: -1000px;
}
.play:after {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width: 5px 5px 5px 10px;
width:0;
height:0;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
.pause:after {
border-color: #000;
background: #fff;
border-style:solid;
border-width: 0 3px 0 3px;
width:2px;
height:10px;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
And last but not least my Javascript:
var audio=document.getElementById("audio");var canvasWidth=canvasHeight=30;var radius=canvasWidth/2;var audioplayer=document.getElementById("audioplayer");canvas=document.createElement("canvas");canvas.setAttribute("width",canvasWidth);canvas.setAttribute("height",canvasHeight);canvas.setAttribute("id","canvas");audioplayer.appendChild(canvas);function updateUI(){var f=audio.currentTime;var g=audio.duration;var b=document.getElementById("canvas");var e=b.getContext("2d");var a=y=radius=canvasWidth/2;var d=-Math.PI/2;var c=d+((f/g)*Math.PI*2);b.getContext("2d").clearRect(0,0,canvasWidth,canvasHeight);e.fillStyle="#000";e.beginPath();e.moveTo(a,y);e.arc(a,y,radius,d,c,false);e.closePath();e.fill()}audio.addEventListener("play",function(a){document.getElementById("playpause").innerHTML='Pause'},true);audio.addEventListener("pause",function(a){document.getElementById("playpause").innerHTML='Play'},true);audio.addEventListener("ended",function(a){document.getElementById("playpause").innerHTML='Play'},true);document.getElementById("playpause").addEventListener("click",function(){if(audio.paused){audio.play()}else{if(audio.ended){audio.currentTime=0;document.getElementById("playpause").innerHTML='Pause';audio.play()}else{audio.pause()}}},true);audio.ontimeupdate=updateUI;audio.addEventListener("timeupdate",updateUI);
Iframe added to the HTML:
<tbody>
<tr>
<td style="vertical-align: top;">
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
</div>
<br>
</td>
<td style="vertical-align: top;">
<div style="text-align: right;">
</div>
<div style="text-align: right;"><big><big><span style="font-weight: bold;"><small><span class="style2"><span class="style6">May 6, 2011 <span style="font-style: italic;">(Right Click and select Save As to download to your iPod or other MP3 player)</span></span></span></small></span></big></big><br>
<big>
</big></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"> <iframe src=<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>"></iframe> <br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>

A couple of months ago I built a jQuery plugin that replaces element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.
try this
http://osvaldas.info/audio-player-responsive-and-touch-friendly

Try to enclosure another player in Iframe or HTML tag