I have been working on a very large form project for the past few days. I finally managed to get tables to work properly within a javascript file that opens a new display window. Now the issue at hand is that I can't seem to get CSS code to work within the javascript that I have created.
Before everyone starts thinking "just use server side script idiot" I have a few conditions and info about the file:
The file is only being ran local due to confidential information risks. Once again no option for server access. The intranet the computers are on are already top security and this wouldn't exactly be a company wide program
The code below is obviously just a demo with a simple form...
The real file has six pages of highly confidential information
Only certain fields on this form will actually be gathered (example: address doesnt appear in the results)
The display page will contain data compiled into tables for easier viewing
I need to be able to create css commands to easily detect certain information if it applies and along with matching design of the original form
Here is the code:
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=800,height=600')
message = "<body>";
message += "<table border=1 width=100%>";
message += "<tr>";
message += "<th colspan=2 align=center><font face=stencil color=black><h1>Results</h1><h4>one</h4></font>";
message += "</th>";
message += "</tr>";
message += "<td width=50% align=left>";
message += "<ul><li><b><font face=calibri color=red>NAME:</font></b> " + document.form1.yourname.value + "</UL>"
message += "</td>";
message += "<td width=50% align=left>";
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
message += "</td>";
message += "</table>";
message += "<body>";
DispWin.document.write(message);
DispWin.document.body.style.cssText = 'color:#blue;';
}
</script>
</head>
<body>
<h1>Form Example</h1>
Enter the following information:
<form name="form1">
<p><b>Name:</b> <input TYPE="TEXT" SIZE="20" NAME="yourname">
</p>
<p><b>Address:</b> <input TYPE="TEXT" SIZE="30" NAME="address">
</p>
<p><b>Phone: </b> <input TYPE="TEXT" SIZE="15" NAME="phone">
</p>
<p><input TYPE="BUTTON" VALUE="Display" onClick="display();"></p>
</form>
</body>
</html>
>
