javascript - 没有服务器端脚本(javascript)的处理表单+在脚本中添加CSS

标签 javascript html css forms document.write

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

在每个人开始思考“只需使用服务器端脚本白痴”之前,我有一些关于该文件的条件和信息:

  • 由于 secret 信息风险,该文件仅在本地运行。再次没有服务器访问选项。计算机所在的内联网已经是最高安全级别,这不完全是公司范围的程序
  • 下面的代码显然只是一个简单形式的演示...
  • 真实文件有六页高度 secret 的信息
  • 实际上只会收集此表单上的某些字段(例如:地址不会出现在结果中)
  • 显示页面将包含编译成表格的数据以便于查看
  • 我需要能够创建 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>
    >
    

    最佳答案

    与其将整个内容编写为 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 中的字符串……这将更难维护,并且您将遇到像现在遇到的问题。

    关于javascript - 没有服务器端脚本(javascript)的处理表单+在脚本中添加CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13436516/

    相关文章:

    javascript - 如何使用 "data"字段传递数据?

    css - react : cannot read document. body.style.marginRight

    javascript - Cordova (音隙): drag image inside canvas working fine in browser but not in mobile

    javascript - 在页面加载时使用 Shopify 运行 Javascript 函数

    html - 为禁用的 Mat-Expansion 面板设置样式

    javascript - 将值设置为输入字段 onchange 从其他输入字段

    css - 不和谐的彩色文本

    javascript - 应用 CSS 动画时 Chrome 中的文本模糊

    javascript - RequireJS 和 AngularJS 多 Controller

    javascript - Rails 应用程序中 native HTML 需要图像路径