没有服务器端脚本（javascript）的处理表单+在脚本中添加CSS答案

【问题标题】：Processing form with no server-side script (javascript) + adding CSS inside of Script没有服务器端脚本（javascript）的处理表单+在脚本中添加CSS
【发布时间】：2012-11-18 01:08:08
【问题描述】：

过去几天我一直在处理一个非常大的表单项目。我终于设法让表格在打开一个新显示窗口的 javascript 文件中正常工作。现在手头的问题是我似乎无法让 CSS 代码在我创建的 javascript 中工作。

在大家开始思考“只使用服务器端脚本白痴”之前，我有一些关于文件的条件和信息：

由于机密信息风险，该文件仅在本地运行。再次没有服务器访问选项。计算机所在的 Intranet 已经是最高安全级别，这不完全是公司范围内的计划

下面的代码显然只是一个简单形式的演示......

真实文件有六页高度机密信息

实际上只会收集此表单上的某些字段（例如：地址未出现在结果中）

显示页面将包含编译成表格的数据，以便于查看

我需要能够创建 css 命令以轻松检测某些信息（如果它适用）以及原始表单的匹配设计

代码如下：

<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>
>

【问题讨论】：

你有什么问题？ CSS 的哪一部分不起作用，您在寻找什么结果？

标签： javascript html css forms document.write

【解决方案1】：

不用将整个东西写成 JS，只需调用一个静态页面，并让脚本根据需要更改值。

例如，制作你的模板：

whatever_after_post.html

<SomeKindOfDocType>
<html>
  <blahblah>
    <style> * { color: black} </style>
  </blahblah>
  <blahblah>
    <input type=text id="DatTing" />
  </blahblah>
</html>

接下来，从调用创建新窗口的页面开始，同样的方式...

DispWin = window.open(...

只需打开模板文件，并使用您对 DispWin 的引用来访问更改该模板值的方法，就像在任何其他页面上更改值一样（window.getElementById 与 DispWin.getElementById）。没有理由将整个 HTML 文件构建为调用它的 JS 中的字符串……这将更难维护，并且您将遇到像现在遇到的问题。

【讨论】：

【解决方案2】：

您可以创建一个标签来链接到 CSS

【讨论】：

不确定如何获得 dispwin。拉标签你能提供一个例子吗？
DispWin.document.write(');