I have a list which has one primary list name, and 10 sublists under it, which i don't want to display on my html page at a time. I want to display 4 sublists on the page and a link as "more". The moment I hover my mouse on the "more" link, it should show the rest sublinks.
This is my complete code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script >
$(document).ready(function(){
$("#planning_more").hover(function(){
$("#planning_panel").slideToggle("fast");
});
});
</script>
<style type="text/css">
<!--
a:link {color:#03F; text-decoration:none; text-emphasis:none} /* unvisited link */
a:visited {color:#03F; text-decoration:none} /* visited link */
a:hover {color:#F30; text-decoration:none} /* mouse over link */
#planning_panel,#planning_more
{
text-align:center;
}
#planning_panel
{
padding:50px;
display:none;
}
.style2 {font-size: 13px;
font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.style4 {
font-size: 18px;
font-weight: bold;
color: #FF6600;
}
.style44 {
background-image:url('Background.jpg');
}
.style45 { border-left-style: solid; border-left-color: #F60; border-left-width:thin; }
.style46 { position:relative; top: 50px; }
.style6 {color: #000000}
.auto-style1 {
color:#039;
}
-->
</style>
</head>
<body>
<div align="center">
<img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base">
<table width="800" border="0" cellspacing="0" cellpadding="5" height="627" class="style44">
<tr>
<td colspan="2" height="11" width="790">
</td>
</tr>
<tr>
<td width="263" valign="top" height="602" align="left">
<table class="style46">
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Planning</font></td></tr>
<tr><td>web-ecommerce--where-to-begin</td></tr>
<tr><td>introduction-to-ecommerce</td></tr>
<tr><td>web-site-analysis----a-study-in-damag</td></tr>
<tr><td>set-up-your-own-blog-free</td></tr>
<tr id="planning_more"><td align="right">More...</td></tr><br>
<div id="planning_panel">
planning
</div>
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Designing & Hosting</font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td align="right">More...</td></tr>
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Marketing</font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td align="right">More...</td></tr>
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Technology</font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td align="right">More...</td></tr>
</table></td>
<td width="537" valign="top" height="602" class="style45">
<h1 align="center"><span class="auto-style1"><font size="5">eCommerce: What is it?</font></span><br>
</h1>
<p class="MsoNormal" align="left" height="12" class="style45"><span class="style2">my text
</span>
</p>
</tr>
</table>
<hr width="800" noshade>
<span class="style6"><br>
<span class="style2"></span></span></div>
</body>
</html>
But this is not working. Kindly help.
Checkout the working code here: http://jsfiddle.net/loesch/rhTNC/
Your missing </table> tag seems to be causing issues. Try
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#planning_more").hover(function(){
$("#planning_panel").slideToggle("fast");
});
});
</script>
<style type="text/css">
<!--
#planning_panel,#planning_more
{
text-align:center;
}
#planning_panel
{
padding:50px;
display:none;
}
-->
</style>
<table class="style46">
<tr>
<td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4">Planning</font></td>
</tr>
<tr>
<td>web-ecommerce--where-to-begin</td>
</tr>
<tr>
<td>introduction-to-ecommerce</td>
</tr>
<tr>
<td>web-site-analysis----a-study-in-damag</td>
</tr>
<tr>
<td>set-up-your-own-blog-free</td>
</tr>
<tr id="planning_more">
<td align="right">More...</td>
</tr>
<br />
</table>
<div id="planning_panel">
planning
</div>
Related
I'm having a problem wherein I want to use PrintJS library in PHP. I created a PHP file which is invoice.php that is what I want to print out as a PDF using the library. I also created a JavaScript function in which I call the printJS function. How can I able to view the PHP file as a PDF using JavaScript
This is my invoice.php in which I want to print out using the JavaScript function in which I added the printJS function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<title>VShip Invoice</title>
<style>
body {
margin-left: auto;
margin-right: auto;
width: 210mm;
height: 297mm;
}
.invoice {
border-collapse: collapse;
width: 100%;
}
p {
font-family: 'Open Sans';
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Raleway';
}
.invoice td,
th {
padding: 8px;
border-left: 2px solid #d3d3d3;
border-right: 2px solid #d3d3d3;
}
.invoice td {
font-family: 'Open Sans';
}
.invoice th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #d3d3d3;
color: white;
text-transform: uppercase;
font-family: 'Open Sans';
}
input {
background: transparent;
border: none;
border-bottom: 1px solid #5c5c5c;
}
/* .container {
align-items: center;
display: flex;
justify-content: center;
} */
<body>
<div class="container">
<div class="content">
<!-- Logo -->
<div style="text-align:center;">
<div>
<img src="<?= base_url('assets/images/vivmo-logo.png') ?
>" alt="logo" style="width:180px;" class="logo-default" />
</div>
<div style="line-height:0.4;">
<p>5730 Roseville Rd, Sacramento, CA 95842</p>
<p>+1 844 90 VIVMO(844-908-4866)</p>
<p>support#vivmo.co</p>
</div>
</div>
<!-- End Logo -->
<!-- Bill Information Heading -->
<div style="padding-top:15px;">
<!-- Bill To -->
<div style="float:left;padding-left:30px;">
<div>
<h3 style="font-weight:800;margin-top:18px;margin-
bottom:0px;">Bill To:</h3>
</div>
<div style="margin-top:-10px;">
<h4 style="margin-bottom:0px;">Client's Name</h4>
<div style="line-height:0.4;margin-top:-8px;">
<p>5730 Roseville Rd</p>
<p>Sacramento, CA 95842</p>
</div>
</div>
</div>
<!-- End Bill To -->
<!-- Bill Invoice Number -->
<div style="float:right;">
<div style="background-color:#d3d3d3;padding:1px 61px 1px 10px;">
<h3 style="font-family:'Open Sans';color:#fff;margin-top:8px;margin-bottom:8px;font-size:1.5em;padding-left:30px;padding-right:30px;">INVOICE #0001</h3>
</div>
<div style="padding-left:25%;">
<p style="margin-top:5px;margin-bottom:5px;font-size:13.5px;font-weight:500;">Date: 10-12-2022</p>
</div>
</div>
<!-- End Bill Invoice Number -->
</div>
<!-- End Bill Information Heading -->
<br>
<!-- Bill Information Table -->
<div style="margin-top:18%;padding-left:30px;padding-right:30px;">
<table class="invoice">
<tr>
<th>Description</th>
<th>QTY</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr style="border-bottom:2px solid #d3d3d3;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!-- End Bill Information Table -->
<!-- Bill Information Total -->
<div style="margin-top:20px;">
<div style="float:left;background-color:#d3d3d3;width:50%;">
<div style="text-align:center;padding-top:13%;padding-bottom:13%;">
<h3 style="color:#fff;font-family:'Open Sans';font-size:1.6em;padding-left:16%;padding-right:16%;">THANK YOU FOR YOUR BUSINESS!</h3>
</div>
</div>
<div style="float:right;padding-right:30px;">
<table>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;">Subtotal</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Discount</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;">Subtotal Less Discount</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Tax Rate(%)</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;">Total Tax</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Shipping/Handling</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
</table>
<table>
<hr style="border:1px solid #d3d3d3;">
</table>
<div style="float:left;margin-left:30%;">
<h3 style="margin-top:0px;font-family:'Open Sans';">Total</h3>
</div>
<div style="float:right;">
<h3 style="margin-top:0px;font-family:'Open Sans';font-weight:800;">$999,000</h3>
</div>
</div>
</div>
<!-- End Bill Information Total -->
<!-- Billing Terms and Instruction -->
<div style="margin-top:33%;padding-left:30px;padding-right:30px;">
<div>
<div>
<h3 style="font-size:15px;">Terms & Instruction</h3>
</div>
</div>
<div style="border:1px solid #d3d3d3;">
<div style="padding:18px;">
<p style="font-size:13px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum fugit quaerat quos cupiditate soluta? Quasi voluptatibus debitis consequuntur asperiores saepe.
</p>
</div>
</div>
</div>
<!-- End Billing Terms and Instruction -->
<!-- Billing Footer -->
<div style="background-color:#d3d3d3;margin-top:30px;">
<div>
<div style="padding:1px 30px;">
<h5 style="color:#fff;font-family:'Raleway';font-weight:500;">vivmo.co</h5>
</div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- End Billing Footer -->
</div>
</div>
And this is the function in which I add the PrintJS function to print the PHP file
function print_invoice()
{
printJS({
printable: base_url + "shipment/invoice",
type: 'pdf',
targetStyles: ['*']
})
}
You can use like this way
function print_invoice() {
printJS({
printable: "<?php echo base_url; ?>" + "shipment/invoice.php",
type: 'pdf',
targetStyles: ['*']
})
}
function getFileAndPrint() {
// Generate pdf and get its filename
// Assuming your are writing this in a .php file
let printFile = '<?php echo $variable; ?>'
// Freedom to do anything else you may want to
// ...
// Pass pdf to printJS
printJS(printFile)
}
I have two tables parent and child now I want to link the child table data with the parent heading cell. I can't change the code structure like removing the child table because this is done in Odoo and also js link with this structure. I tried a lot but didn't achieve the correct output.
The HTML code is
Note: These columns should have more width depending upon their table data columns are Account, Partner, Subject
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Current Output of the table
So even though these tables are seperated, we can still use some styling to at least make it look like it's one table. But yeah the structure is quite bad and it would help a lot if you could make sure each row has always the same amount of columns. That the first row has 4 columns and the second one 8 does make this kind of a Hail Mary.
But the general idea is you give each column the width it needs.
/* Default to hide some generated styling*/
ul{ display:none; }
.p-0{ padding: 0!important; }
tbody{ font-size: 14px!important; }
table table {margin-bottom: 0!important; }
table table td { border-top: none!important; }
/*A small zoom(out) and min-width if screen is not big enough */
.container-fluid{ zoom: 0.8; min-width: 1100px; }
/* Default for 8 columns if they all would be equal*/
th, td{ width: 12.5%; }
/*The "Magic", specific widths for each column */
/*Obviously works best if each row has 8 columns*/
/*Play with it, but make sure it adds up to 100%*/
th:nth-child(1),
td:nth-child(1){
width: 20%;
}
th:nth-child(2),
td:nth-child(2){
width: 10%;
}
th:nth-child(3),
td:nth-child(3){
width: 5%;
}
th:nth-child(4),
td:nth-child(4){
width: 20%;
}
th:nth-child(5),
td:nth-child(5){
width: 15%;
}
th:nth-child(6),
td:nth-child(6),
th:nth-child(7),
td:nth-child(7),
th:nth-child(8),
td:nth-child(8){
width: 10%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>==
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I test my issue in Firefox. I click the save button(it is a input, and the type is button), it ought to execute:
onclick="checkchar()"
but it did not.
My part of code in jsp:
<script language="javascript">
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
//alert('before...');
document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
document.Form2.submit();
alert(" 待办事宜保存成功!");
}
...
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
I don't know why I click my save button, the method did not execute, some one can help me with this? and if is caused by the upload stylesheet (http://localhost:8080/css/Font.css)? I am not sure.
EDIT
Because the main framework is frameset, and the javascript methods and the input button is in my main page(you can see the below, which is in red rectangle I add). So use firebug it shows there do not contains any javascript code.
EDIT -2
The all code of my actingIndex.jsp:
<%# page language="java" pageEncoding="UTF-8"%>
<%--引入struts tags--%>
<%# taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>运行监控模块编辑</title>
<link href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/showText.css" type="text/css" rel="stylesheet">
<script language="javascript" src="${pageContext.request.contextPath }/script/function.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/script/limitedTextarea.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/script/showText.js"></script>
<script src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"/>
<script src="${pageContext.request.contextPath}/ckfinder/ckfinder.js"/>
<script type="text/javascript">
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
alert('before...');
document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
document.Form2.submit();
alert(" 待办事宜保存成功!");
}
function addEnter(element){
document.getElementById(element).value = document.getElementById(element).value+"<br>";
}
function checkTextAreaLen(){
var stationRun = new Bs_LimitedTextarea('stationRun', 2500);
stationRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
stationRun.draw();
var devRun = new Bs_LimitedTextarea('devRun', 2500);
devRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
devRun.draw();
}
window.onload=function(){
//checkTextAreaLen();
}
</script>
</head>
<body>
<form name="Form1" id="Form1" method="post">
<table cellSpacing="1" cellPadding="0" width="90%" align="center" bgColor="#f5fafe" border="0">
<tbody>
<tr height=10><td></td></tr>
<tr>
<td>
<TABLE style="WIDTH: 105px; HEIGHT: 20px" border="0">
<TR>
<TD align="center" background="${pageContext.request.contextPath }/images/cotNavGround.gif"><img src="${pageContext.request.contextPath }/images/yin.gif" width="15"></TD>
<TD class="DropShadow" background="${pageContext.request.contextPath }/images/cotNavGround.gif">运行监控列表</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgColor="#f5fafe" colspan=3>
<table cellspacing="0" cellpadding="1" rules="all" bordercolor="gray" border="1" id="DataGrid1"
style="BORDER-RIGHT:gray 1px solid; BORDER-TOP:gray 1px solid; BORDER-LEFT:gray 1px solid; WIDTH:100%; WORD-BREAK:break-all; BORDER-BOTTOM:gray 1px solid; BORDER-COLLAPSE:collapse; BACKGROUND-COLOR:#f5fafe; WORD-WRAP:break-word">
<tr style="FONT-WEIGHT:bold;FONT-SIZE:12pt;HEIGHT:25px;BACKGROUND-COLOR:#afd1f3">
<td align="center" width="40%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">站点运行情况</td>
<td align="center" width="40%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">设备运行情况</td>
<td align="center" width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">创建日期</td>
</tr>
<div id="showInfomation" style="visibility: hidden"></div>
<tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';">
<td style="HEIGHT:22px" align="center" width="40%">
<div class="scrollStyle" align="left" onmouseover="showInfoWithPanel(this)" onmouseout="hiddenInfoPanel(this)" style="table-layout:fixed;">
<s:property value="stationRun"/>
</div>
</td>
<td style="HEIGHT:22px" align="center" width="40%">
<div class="scrollStyle" align="left" onmouseover="showInfoWithPanel(this)" onmouseout="hiddenInfoPanel(this)" style="table-layout:fixed;">
<s:property value="devRun"/>
</div>
</td>
<td style="HEIGHT:22px" align="center" width="20%">
<s:date name="createDate" format="yyyy-MM-dd HH:mm:ss" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</form>
<form name="Form2" id="Form2" method="post">
<table cellspacing="1" cellpadding="5" width="90%" align="center" bgcolor="#f5fafe" style="border:1px solid #8ba7e3" border="0">
<tr>
<td class="ta_01" colspan=2 align="center" background="${pageContext.request.contextPath }/images/b-info.gif">
<font face="宋体" size="2"><strong>运行监控编辑</strong></font>
</td>
</tr>
<tr height=10><td></td><td></td></tr>
<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">站点运行情况：</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="stationRun" id="stationRun" cssstyle="width: 1000px; height: 160px; padding: 1px;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('stationRun');"></s:textarea>
<!--<script type="text/javascript">
CKEDITOR.replace("stationRun", {height:200, width:800});
</script>-->
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">设备运行情况：</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="devRun" id="devRun" cssstyle="width:1000px; height: 160px; padding:1px;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('devRun');"></s:textarea>
<!-- <script type="text/javascript">
CKEDITOR.replace("devRun", {height:200, width:800});
</script> -->
</td>
</tr>
<tr>
<td class="ta_01" style="width: 100%" align="center" bgcolor="#f5fafe" colspan="2">
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
<input style="font-size:12px; color:black; height:20px; width:80px" id="BT_Export" type="button" value="导出设置" name="BT_Export"
onclick="openWindow('${pageContext.request.contextPath }/system/exportExcel.jsp?belongTo=5-3','700','400')">
</td>
</tr>
</table>
</form>
</body>
</html>
You open script tag , But it is not closed,and
it is important to insert the script at the END of the page. So that the page
can register the controls first.
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
//alert('before...');
//document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
//document.Form2.submit();
alert(" 待办事宜保存成功!");
}
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
Try this checkchar() function
function checkchar(){
alert("Hello");
}
I have a html for email and i would like to send it using PHP. But saving it in a variable it gives me a lot of errors.
How can I save so mutch html and css in php variable, is there any way?
Here is the code, it is not complete:
<?php
$corpo='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- NAME: 1 COLUMN - BANDED -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
body,#bodyTable,#bodyCell{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
table{
border-collapse:collapse;
}
img,a img{
border:0;
outline:none;
text-decoration:none;
}
h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
p{
margin:1em 0;
padding:0;
}
a{
word-wrap:break-word;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
line-height:100%;
}
table,td{
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
#outlook a{
padding:0;
}
img{
-ms-interpolation-mode:bicubic;
}
body,table,td,p,a,li,blockquote{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
#bodyCell{
padding:0;
}
.mcnImage{
vertical-align:bottom;
}
.mcnTextContent img{
height:auto !important;
}
/*
#tab Page
#section background style
#tip Set the background color and top border for your email. You may want to choose colors that match your companys branding.
*/
body,#bodyTable{
/*#editable*/background-color:#F2F2F2;
}
h3{
/*#editable*/color:#606060 !important;
display:block;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:18px;
/*#editable*/font-style:normal;
/*#editable*/font-weight:bold;
/*#editable*/line-height:125%;
/*#editable*/letter-spacing:-.5px;
margin:0;
/*#editable*/text-align:left;
}
/*
#tab Page
#section heading 4
#tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
#style heading 4
*/
h4{
/*#editable*/color:#808080 !important;
display:block;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:16px;
/*#editable*/font-style:normal;
/*#editable*/font-weight:bold;
/*#editable*/line-height:125%;
/*#editable*/letter-spacing:normal;
margin:0;
/*#editable*/text-align:left;
}
/*
#tab Preheader
#section preheader style
#tip Set the background color and borders for your emails preheader area.
*/
#templatePreheader{
/*#editable*/background-color:#FFFFFF;
/*#editable*/border-top:0;
/*#editable*/border-bottom:0;
}
/*
#tab Preheader
#section preheader text
#tip Set the styling for your emails preheader text. Choose a size and color that is easy to read.
*/
.preheaderContainer .mcnTextContent,.preheaderContainer .mcnTextContent p{
/*#editable*/color:#606060;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:11px;
/*#editable*/line-height:125%;
/*#editable*/text-align:left;
}
/*
#tab Preheader
#section preheader link
#tip Set the styling for your emails header links. Choose a color that helps them stand out from your text.
*/
.preheaderContainer .mcnTextContent a{
/*#editable*/color:#606060;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
/*
#tab Header
#section header style
#tip Set the background color and borders for your emails header area.
*/
#templateHeader{
/*#editable*/background-color:#FFFFFF;
/*#editable*/border-top:0;
/*#editable*/border-bottom:0;
}
/*
#tab Header
#section header text
#tip Set the styling for your emails header text. Choose a size and color that is easy to read.
*/
.headerContainer .mcnTextContent,.headerContainer .mcnTextContent p{
/*#editable*/color:#606060;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:15px;
/*#editable*/line-height:150%;
/*#editable*/text-align:left;
}
/*
#tab Header
#section header link
#tip Set the styling for your emails header links. Choose a color that helps them stand out from your text.
*/
.headerContainer .mcnTextContent a{
/*#editable*/color:#6DC6DD;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
/*
#tab Body
#section body style
#tip Set the background color and borders for your emails body area.
*/
#templateBody{
/*#editable*/background-color:#FFFFFF;
/*#editable*/border-top:0;
/*#editable*/border-bottom:0;
}
/*
#tab Body
#section body text
#tip Set the styling for your emails body text. Choose a size and color that is easy to read.
*/
.bodyContainer .mcnTextContent,.bodyContainer .mcnTextContent p{
/*#editable*/color:#606060;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:15px;
/*#editable*/line-height:150%;
/*#editable*/text-align:left;
}
/*
#tab Body
#section body link
#tip Set the styling for your emails body links. Choose a color that helps them stand out from your text.
*/
.bodyContainer .mcnTextContent a{
/*#editable*/color:#6DC6DD;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
/*
#tab Footer
#section footer style
#tip Set the background color and borders for your emails footer area.
*/
#templateFooter{
/*#editable*/background-color:#F2F2F2;
/*#editable*/border-top:0;
/*#editable*/border-bottom:0;
}
/*
#tab Footer
#section footer text
#tip Set the styling for your emails footer text. Choose a size and color that is easy to read.
*/
.footerContainer .mcnTextContent,.footerContainer .mcnTextContent p{
/*#editable*/color:#606060;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:11px;
/*#editable*/line-height:125%;
/*#editable*/text-align:left;
}
/*
#tab Footer
#section footer link
#tip Set the styling for your emails footer links. Choose a color that helps them stand out from your text.
*/
.footerContainer .mcnTextContent a{
/*#editable*/color:#606060;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
#media only screen and (max-width: 480px){
body,table,td,p,a,li,blockquote{
-webkit-text-size-adjust:none !important;
}
} #media only screen and (max-width: 480px){
body{
width:100% !important;
min-width:100% !important;
}
} #media only screen and (max-width: 480px){
table[class=mcnTextContentContainer]{
width:100% !important;
}
} #media only screen and (max-width: 480px){
table[class=mcnBoxedTextContentContainer]{
width:100% !important;
}
}
}
} #media only screen and (max-width: 480px){
td[class=mcnImageCardTopImageContent]{
padding-top:18px !important;
}
} #media only screen and (max-width: 480px){
table[class=mcnCaptionLeftContentOuter] td[class=mcnTextContent],table[class=mcnCaptionRightContentOuter] td[class=mcnTextContent]{
padding-top:9px !important;
}
} #media only screen and (max-width: 480px){
td[class=mcnCaptionBlockInner] table[class=mcnCaptionTopContent]:last-child td[class=mcnTextContent]{
padding-top:18px !important;
}
} #media only screen and (max-width: 480px){
td[class=mcnBoxedTextContentColumn]{
padding-left:18px !important;
padding-right:18px !important;
}
} #media only screen and (max-width: 480px){
td[class=mcnTextContent]{
padding-right:18px !important;
padding-left:18px !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section Preheader Visibility
#tip Set the visibility of the emails preheader on small screens. You can hide it to save space.
*/
table[id=templatePreheader]{
/*#editable*/display:block !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section Preheader Text
#tip Make the preheader text larger in size for better readability on small screens.
*/
td[class=preheaderContainer] td[class=mcnTextContent],td[class=preheaderContainer] td[class=mcnTextContent] p{
/*#editable*/font-size:14px !important;
/*#editable*/line-height:115% !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section Header Text
#tip Make the header text larger in size for better readability on small screens.
*/
td[class=headerContainer] td[class=mcnTextContent],td[class=headerContainer] td[class=mcnTextContent] p{
/*#editable*/font-size:18px !important;
/*#editable*/line-height:125% !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section Body Text
#tip Make the body text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
td[class=bodyContainer] td[class=mcnTextContent],td[class=bodyContainer] td[class=mcnTextContent] p{
/*#editable*/font-size:18px !important;
/*#editable*/line-height:125% !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section footer text
#tip Make the body content text larger in size for better readability on small screens.
*/
td[class=footerContainer] td[class=mcnTextContent],td[class=footerContainer] td[class=mcnTextContent] p{
/*#editable*/font-size:14px !important;
/*#editable*/line-height:115% !important;
}
} #media only screen and (max-width: 480px){
td[class=footerContainer] a[class=utilityLink]{
display:block !important;
}
}</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="templateContainer">
<tr>
<td valign="top" class="headerContainer" style="padding-top:10px; padding-bottom:10px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock">
<tbody class="mcnImageBlockOuter">
<tr>
<td valign="top" style="padding:9px" class="mcnImageBlockInner">
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer">
<tbody><tr>
<td class="mcnImageContent" valign="top" style="padding-right: 9px; padding-left: 9px; padding-top: 0; padding-bottom: 0;">
<img align="left" alt="" src="https://gallery.mailchimp.com/09dc4b1b18f3f16d3f259eb11/images/803e3bf6-65ed-46f0-8786-cfd7b1a84e4e.png" width="500" style="max-width:500px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="templateContainer">
<tr>
<td valign="top" class="bodyContainer" style="padding-top:10px; padding-bottom:10px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="top" class="mcnTextBlockInner">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="600" class="mcnTextContentContainer">
<tbody><tr>
<td valign="top" class="mcnTextContent" style="padding-top:9px; padding-right: 18px; padding-bottom: 9px; padding-left: 18px;">
<h1>Designing Your Email</h1>
<h3>Creating an elegant email is simple</h3>
<p>Now that you’ve selected a template to work with, drag in content blocks to define the structure of your message. Don’t worry, you can always delete or rearrange blocks as needed. Then click “Design” to define fonts, colors, and styles.</p>
<p>Need inspiration for your design? <a class="mc-template-link" href="http://inspiration.mailchimp.com">Here’s what other MailChimp users are doing.</a></p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowBlock">
<tbody class="mcnFollowBlockOuter">
<tr>
<td align="center" valign="top" style="padding:9px" class="mcnFollowBlockInner">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowContentContainer">
<tbody><tr>
<td align="center" style="padding-left:9px;padding-right:9px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowContent" style="border: 1px solid #EEEEEE;background-color: #FAFAFA;">
<tbody><tr>
<td align="center" valign="top" style="padding-top:9px; padding-right:9px; padding-left:9px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked">
<tbody><tr>
<td align="center" valign="top" class="mcnFollowIconContent" style="padding-right:10px; padding-bottom:5px;">
<img src="http://cdn-images.mailchimp.com/icons/social-block-v2/color-facebook-96.png" alt="Facebook" class="mcnFollowBlockIcon" width="48" style="width:48px; max-width:48px; display:block;">
</td>
</tr>
<tr>
<td align="center" valign="top" class="mcnFollowTextContent" style="padding-right:10px; padding-bottom:9px;">
Facebook
</td>
</tr>
</tbody></table>
<!--[if gte mso 6]>
</td>
<td align="left" valign="top">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked">
<tbody><tr>
<td align="center" valign="top" class="mcnFollowIconContent" style="padding-right:10px; padding-bottom:5px;">
<img src="http://cdn-images.mailchimp.com/icons/social-block-v2/color-twitter-96.png" alt="Twitter" class="mcnFollowBlockIcon" width="48" style="width:48px; max-width:48px; display:block;">
</td>
</tr>
<tr>
<td align="center" valign="top" class="mcnFollowTextContent" style="padding-right:10px; padding-bottom:9px;">
Twitter
</td>
</tr>
</tbody></table>
<!--[if gte mso 6]>
</td>
<td align="left" valign="top">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked">
<tbody><tr>
<td align="center" valign="top" class="mcnFollowIconContent" style="padding-right:10px; padding-bottom:5px;">
<img src="http://cdn-images.mailchimp.com/icons/social-block-v2/color-linkedin-96.png" alt="LinkedIn" class="mcnFollowBlockIcon" width="48" style="width:48px; max-width:48px; display:block;">
</td>
</tr>
<tr>
<td align="center" valign="top" class="mcnFollowTextContent" style="padding-right:10px; padding-bottom:9px;">
LinkedIn
</td>
</tr>
</tbody></table>
<!--[if gte mso 6]>
</td>
<td align="left" valign="top">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked">
<tbody><tr>
<td align="center" valign="top" class="mcnFollowIconContent" style="padding-right:0; padding-bottom:5px;">
<img src="http://cdn-images.mailchimp.com/icons/social-block-v2/color-link-96.png" alt="Website" class="mcnFollowBlockIcon" width="48" style="width:48px; max-width:48px; display:block;">
</td>
</tr>
<tr>
<td align="center" valign="top" class="mcnFollowTextContent" style="padding-right:0; padding-bottom:9px;">
Website
</td>
</tr>
</tbody></table>
<!--[if gte mso 6]>
</td>
<td align="left" valign="top">
<![endif]-->
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>' ;
?>
Use PHP's output buffering for such things. If you turn on output buffering, everything you print out will be "buffered" (= stored) instead of printed out to the user. You can then get the buffer and save it in e.g. a variable.
Why should you do this?
With output buffering you can use PHP as a "simple template engine". What that means is, that you can create template files containing HTML and even PHP.
A simple example:
email_template.php (Using short_open_tag):
<!DOCTYPE html>
<html>
<body>
<h1>My name is <?=$test?></h1>
</body>
</html>
And in your script where you render the e-mail bodies:
$test = "Pedro Piloto";
ob_start();
require('email_template.php');
$body = ob_get_clean();
The h1 tag would then contain "My name is Pedro Piloto".
I know there is a lot of topics about this and i checked a lot of them without success.
I have one input field in my form that creates a problem when it includes whitespaces. I already made it required so it's not possible to leave it empty or only add some whitespaces.
What i noticed is that i can add a text and just add a whitespace in the end or in the beginning and my work will fail.
Actually it should not be allowed to have any whitespaces at all, also not in the middle of the text but thats is to 99% not going to happend. What i understand you can only take away whitespaces in the beginning and in the end with trim function?
Could some helpful person help me what i have to add to my code that it works...?
Goal is that when i press submit the values from my five input fields should have no whitespaces at the beginning or in the end.
Here is my whole code.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mathys Lieferungen</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript">
function changeHiddenInput (objDropDown)
{
document.getElementById("hiddenInput").value = objDropDown.value;
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.timepicker').timepicker();
$('.datepicker').datepicker({dateFormat: 'dd.mm.yy'});
$('.button').button();
$('#myForm').submit(function() {
$('#formBox').hide();
var lnr = $("input[name=lnr]");
var auto_refresh = setInterval(
function()
{
$('#csv').load(lnr.val()+'_JobStatus.csv?'+new Date().getTime(),function(data){$(this).html(data).fadeIn("slow");}); });
$('#working').show();
$("#progressbar").progressbar();
var value = 0;
var timer = setInterval (function ()
{
$("div#progressbar").progressbar ("value", value);
value++;
if (value > 100) value = 0;
}, 60);
$url = "/BT_Mathys_LNr_export_0.1/services/BT_Mathys_LNr_export?method=runJob";
$i = 1
$('#myForm :input').each(function() {
$inputName = $(this).attr('name');
if ($inputName != 'submit') {
$url = $url + "&arg"+$i+"=--context_param%20"+$inputName+"="+$(this).val();
$i++
};
});
$('#runArea').load($url, function(){
$('#csv').hide();
$('#working').hide();
$('#resultBox').show();
$html = $('#runArea').html();
$('#csv').text($html);
});
return false;
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<style type="text/css">
body {
background-color:#FFD8B2;
font-family: 'Century Schoolbook', Calibri,Arial;
font-size: 1em;
}
#logo {
position:absolute;
top:10px;
right:10px;
}
h1 {
margin-bottom:20px;
font-size: 1.5em;
font-weight:bold;
text-align:center;
}
#formBox, #resultBox, #working{
width:50%;
margin:auto;
margin-top:20%;
}
#resultBox, #working {
display:none;
}
#runArea{
border:none;
height:0;
width:0;
}
.button { font-family:Garamond; font-size: 15px; }
.ui-timepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
.ui-datepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
.ui-timepicker-hour-cell, .ui-timepicker-minute-cell { cursor:pointer; }
</style>
</head>
<body>
<div id="logo">
<img src="\\rzwsrv006\daten\Opacc_Betrieb\Marcel Mathys\Mathys\FLYER_LOGO.png" alt="Flyer" width="260" height="48">
</div>
<div id="formBox">
<h1>Lieferungen Mathys</h1>
<form method="get" id="myForm">
<table width="290px" height="auto" style="margin:auto;">
<tr>
<td><label for="lnr">Liefernummer:</label></td>
<td class="arg"><input type="text" name="lnr" class="required"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<!--<tr>
<td><label for="vAbladezeit_spaet">Abladezeit spät:</label></td>
<td><input type="text" name="vAbladezeit_spaet" class="timepicker"></td>
</tr>
<tr>
<td><label for="vAbladezeit_frueh">Abladezeit früh:</label></td>
<td><input type="text" name="vAbladezeit_frueh" class="timepicker"></td>
</tr>-->
<tr>
<td><label for="vAbladetermin">Abladetermin:</label></td>
<td><input type="text" name="vAbladetermin" class="datepicker"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td><label for="vLadezeit_spaet">Ladezeit spät:</label></td>
<td><input type="text" name="vLadezeit_spaet" class="timepicker"></td>
</tr>
<tr>
<td><label for="vLadezeit_frueh">Ladezeit früh:</label></td>
<td><input type="text" name="vLadezeit_frueh" class="timepicker"></td>
</tr>
<tr>
<td><label for="vLadedatum">Ladedatum:</label></td>
<td><input type="text" name="vLadedatum" class="datepicker"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td>Mitarbeiter:</td>
<td><select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="e.schaer#flyer.ch" name="email">Ester Schär</option>
<option value="i.gerber#flyer.ch" name="email">Irene Gerber</option>
<option value="m.maeder#flyer.ch" name="email">Marion Mäder</option>
<option value="apelsinrepubliken#hotmail.com" name="email">Jens Frejd</option>
<option value="marcel.lack#symbium.ch" name="email">Marcel Lack</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type="hidden" name="hiddenInput" id="hiddenInput" /></td>
</tr>
<tr>
<td><p style="text-align:center;"><input type="submit" name="submit" id="submit" value=" Ausführen " class="button"></p></td>
<td></td>
</tr>
</table>
</form>
</div>
<div id="working" onkeydown ="my_onkeydown_handler();">Verarbeitung läuft, bitte warten und job nicht abbrechen. Job läuft im Hintergrund<div id="progressbar">
</div>
</div>
<div id="resultBox">
<h1 id="csv"></h1>
<p style="text-align:center;"><input type="button" onClick="location.href='./'" value=" << Neue Lieferung ausführen " class="button"></p>
<!--<p style="text-align:left;">Rückmeldung:<br>
<textarea id="csv" style="width:100%;height:300px;"></textarea>
</p>-->
</div>
<iframe id="runArea" />
</body>
How about just using a regex to replace the white-space:
str.replace(/\s/g, "");