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

Question

我有以下用 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>

这段代码用 javascript 编写，这就是表单动作所调用的

firstName = document.getElementByName("firstName");
lastName = document.getElementByName("lastName");
document.write(firstName);

但是，当我提交 html 表单时，浏览器只会显示 javascript。 有谁知道这是为什么以及我该如何解决？ 谢谢

Answer 1

HTML form将其数据提交给可以提供响应的资源。 由于您的form直接提交到 a.js 文件，因此浏览器只会显示它，因为提交数据的 HTML 页面不再加载到浏览器中。 没有要获取的元素，也没有要扫描的文档。

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

有关处理表单数据的概述，请参见此处（滚动到“在服务器端：检索数据”部分）。 它以各种服务器端语言提供了几个示例。

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

Answer 2

您的表单操作正在向“../js/customerData.js”发送发布/获取请求

你的 url 看起来像这样

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

通常您会使用服务器端语言来处理来自 URL 的数据，您可以通过 $_POST["first-name"] (PHP) 获取这些值

如果您将其发送到 javaScript 文件，则它不会“解析”浏览器将其视为文本文件。为了使 Javascript 工作，将其设为 ZFC35FDC70D5FC69D2698883A822C7A53 文件并告诉浏览器运行脚本或文件带有脚本标签

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

或者，如果您使用 JS，请使用

!#

在表单动作即（ <form id = "name" action="!#"> ）

然后使用 JavaScript 事件监听器来监听表单提交

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
}

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

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

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

我希望这可以帮助你。

Answer 3

一些改进：

• 请在 css 中进行所有样式设置，并避免使用<br>语句来构建您的内容
• 无需使用action属性。 只需将您的 js 代码放在单独的脚本标签中，或者使用带有src属性的脚本标签加载它们。
• 为您的标签使用 html <label>标签
• 要获取表单值，请注册一个表单提交处理程序并从e.target.elements获取值
• 不要使用 document.write （ 为什么 document.write 被认为是“不好的做法”？ ）
• 相反，使用类似 document.body.append

 const form = document.getElementById("name") form.addEventListener("submit", e => { e.preventDefault(); // Read all form values const lastName = e.target.elements.lastName.value; // Write text to dom const ele = document.createTextNode(lastName); document.body.append(ele); })

 <form id="name"> <label for="firstName"> First name: </label> <input id = "firstName" type="text" name="firstName" placeholder="First Name"> <label for="lastName"> Last name: </label> <input id = "lastName" type="text" name="lastName" placeholder="Last Name"> <input type="submit" name="FLnames" id="FLnameVar" value="Submit"> </form>

Answer 4

设置您的：

firstName = document.getElementByName("firstName");

至：

firstName = document.getElementByName("firstName").innerHTML;

从第一个代码中，您仅获取元素的 DOM，但没有获取其中的值，因为使用.innerHTML获取该字段内的值

Answer 5

当您提交表单时，响应是什么？ 你能发帖吗？