我的html表单操作在浏览器中显示javascript代码

我用html编写了以下代码

<form id = "name" action="../js/customerData.js">
    First name: <input id = "firstName" type="text" name="firstName" placeholder="First Name"><br>
    Last name: <input id = "lastName" type="text" name="lastName" placeholder="Last Name"><br>
    <input type="submit" name="FLnames" id="FLnameVar" value="Submit">
</form>

---

但是，当我提交html表单时，浏览器只显示javascript。有人知道这是为什么吗？我如何修复它？感谢

HTML

表单

将其数据提交给可以提供响应的资源。由于您的

表单

直接提交到.js文件，因此浏览器仅显示它，因为提交数据的HTML页面不再加载到浏览器中。没有要获取的元素，也没有要扫描的文档

您需要将表单数据发布到可以处理HTTP请求并提供类似.php文件的HTTP响应的资源。

（滚动至“在服务器端：检索数据”部分）。它给出了几种不同服务器端语言的示例

---

另外，

getElementByName（）

不存在，它是

getElementsByName（）

。但是，在查看提交的表单数据时，您将无法使用它，因为（再次）将不再加载该文档及其所有元素。相反，在处理表单数据时，您必须查询

请求

对象。

您的表单操作正在向“./js/customerData.js”发送post/get请求

您的url如下所示

/js/customerData.js?first-name=jio&lastName=jio&FLnames=Submit

通常，您会使用服务器端语言来处理URL中的数据，在URL中，您可以通过$_POST[“first name”]（PHP）获得这些值

如果您将其发送到javaScript文件，它不会被“解析”，浏览器会将其视为文本文件。为了使javaScript正常工作，请将其设置为html文件（或服务器文件），并告诉浏览器您正在运行带有脚本标记的脚本

        <script type="text/javascript">          
         //...
        </script>.  

在回调中，使用JS获取元素值

function Callback ()
{
let fname =  document.getElementById("firstName").innerHTML;
// then you use the value to post 
}

使用此方法保存的最后一个阶段是使用类似ajax的东西发送到服务器

我希望这对您有所帮助。

一些改进：

• 请使用css进行所有样式设置，避免使用
  语句来构造内容
• 无需使用

  操作

  属性。只需将js代码放在一个单独的脚本标记中，或者使用带有

  src

  属性的脚本标记将其加载
• 对标签使用html
  标记
• 要获取表单值，请注册表单提交处理程序并从

  e.target.elements

• 不要使用document.write（）
• 相反，请使用类似document.body.append的内容

const form=document.getElementById（“名称”）
表单.addEventListener（“提交”，e=>{
e、 预防默认值（）；
//读取所有表单值
const lastName=e.target.elements.lastName.value；
//将文本写入dom
const ele=document.createTextNode（lastName）；
文件.正文.附加（ele）；
})

名字：
姓氏：

浏览器的意思是只显示javascript。在我按下“提交”按钮后，浏览器只显示javascript代码。您可以发布javascript代码吗？我发布了，这是在customerData.js中发布代码的第二个代码段。我想我们再也不能安全地显示

attachEvent（）

。任何仍然使用IE 8的人都应该得到他们应得的。我同意，但对于传统参考和运行任何低于XPS的windows pc上的默认设置，它只在IE 8或更低版本中使用（顺便说一下，这是2009年），正如我所说，这似乎比以前工作得更好，不再显示javascript代码，但我确实收到一个错误，说它无法读取nullOk的属性'addEventListener'，这意味着var ele=document.getElementById（'name'）；不是通过ID查找您的表单表单的ID是什么

var ele = document.getElementById('name');
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

function Callback ()
{
let fname =  document.getElementById("firstName").innerHTML;
// then you use the value to post 
}