我有以下用 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。 有谁知道这是为什么以及我如何解决它? 谢谢

#1楼 票数:0

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

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

有关处理表单数据的概述,请参见此处(滚动到“在服务器端:检索数据”部分)。 它以各种服务器端语言给出了几个示例。

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

#2楼 票数:0

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

你的网址看起来像这样

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

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

如果你将它发送到一个 javaScript 文件,它不会被“解析”浏览器将它视为一个文本文件。为了让 Javascript 工作,把它变成一个 html 文件(或服务器文件)并告诉浏览器你正在运行一个脚本使用脚本标签

        <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 的东西发送到服务器

我希望这可以帮助你 。

#3楼 票数:0

一些改进:

  • 请在 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>

#4楼 票数:-1

设置您的:

firstName = document.getElementByName("firstName");

至:

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

从第一个代码中,您仅获取element的DOM而不获取其内部的值,为此使用.innerHTML来获取该字段内的值

#5楼 票数:-3

提交表格时有何回应? 你可以张贴吗?

  ask by kiozorg translate from so

未解决问题?本站智能推荐:

1回复

使用Javascript显示html代码而不是在浏览器中显示元素的功能

我希望我的div元素的innerHTML包含一些HTML代码,而不是像浏览器通常那样显示该html的预期结果。 我如何使用Javascript执行此操作?
4回复

提交表单时在浏览器中显示的Javascript代码,而不是脚本的结果

我正在用Javascript写一个基本的计算器,当我在html表单上打“ =”时,它返回的是整个Calculator.js,而不是结果。 我不确定为什么会这样,我希望它“提示”答案变量。 如何使它正确显示? Calculator.html Calculator.js
2回复

浏览器HTML显示内的JavaScript函数

我的JavaScript代码有问题。 我正在尝试在浏览器中输出总和,但是它不起作用。 我尝试了各种在JavaScript中显示消息的方式: console.log() , document.write() , document.getElementById() 。 这些似乎都不起作用。
1回复

如果浏览器禁用了 JavaScript,如何禁用 HTML/JavaScript 表单

首先,我是新手,我真的尽力了解这是如何工作的。 如果提交了正确的登录凭据,我有以下简单的登录表单,可通向主页。 但是,在禁用 JavaScript 的情况下在 Firefox 中运行时,登录凭据将被忽略,无论我提供什么登录详细信息,我的主页都会显示。 我在<noscript></n
1回复

当JavaScript仍在运行时,浏览器是否显示HTML更改或允许提交表单?

假设JavaScript正在同步运行(没有setTimeout )以添加或删除HTML元素,那么HTML更改是否应该在完全完成之前显示给用户? 更重要的是,如果JavaScript更改了可以包含在表单提交中的元素(例如,添加多个textarea元素),那么用户是否可以在进行过程中单击
3回复

从浏览器在 html 中运行 javascript

我在这篇文章的jsfiddle 中有一个可用的 javascript,我想用我的浏览器在本地运行。 我不太确定我还需要向 HTML 添加什么才能使其正常运行。 我读了很多帖子,但仍然无法弄清楚如何解决它。 以下是我所做的,但是运行代码片段时出现错误,有人可以帮忙吗? 谢谢。 $(
2回复

Mac上的浏览器中的JavaScript / HTML

我刚开始在Mac上使用Javascript编码,但是遇到了问题。 我正在使用文本编辑功能将非常基本的脚本嵌入HTML页面中。 我已经在Windows pc上尝试了完全相同的代码,并且可以正常工作,但是每当在Mac上尝试时,它都会出现故障(例如,字符串的所有引号都被替换为
 
 

2回复

如何让浏览器运行dom操作注入的javascript代码?

我想提供一个其他页面可以包含的小 html 片段。 html 内容如下所示: <div id="coolIncludable" style="display:none"> <!--be invisible until you are finished initializing