使用 INPUT 标签的 VALUE 属性(及其值)读取 HTML 表单的innerHTML

2024-03-19

我有一个html form与一些输入字段。

而不是读取和发送值input字段由document.ipForm.userName.value,我需要将整个 html 内容发送到 html 解析器并提取<name ,value>由其他程序(以及其他信息)对每个输入字段进行配对。

但是当我在 JavaScript 中执行此操作时(我想要纯 JavaScript - 而不是其他库)

var contents=document.getElementById("formArea").innerHTML;
alert(contents);

It 不显示 the value="enteredValue" of <input/>即使我输入了一些值,字段也是如此。

我的 HTML 文件:

<html>
<head>
    <script type="text/javascript">
    function showInnerHtml(){
        var contents=document.getElementById("formArea").innerHTML;
        alert(contents);
    }
    </script>
</head>
<body>
    <div id="formArea">
        <form name="ipForm" >
          UserName : <input type="text" name="userName"> 
        </form>
    </div>
    <div> other contents.....   </div>
    <div onclick="showInnerHtml()">Show InnerHTML</div>
</body>
</html>

我在这里遗漏了一些东西还是这是不可能的。

别叫我疯子。但我正在与这种奇怪的情况作斗争。


那是因为value是填充文本框时的属性,而不是属性。这意味着.value工作正常,但它不是作为属性的实际 DOM 的一部分(例如<input value="...">).

您需要明确设置它:

document.getElementById("html").onclick = function() {
  var elems = document.getElementsByName("ipForm")[0]
    .getElementsByTagName("input");

  for (var i = 0; i < elems.length; i++) {
    // set attribute to property value
    elems[i].setAttribute("value", elems[i].value);
  }

  alert(document.getElementsByName("ipForm")[0].innerHTML);
};
<form name="ipForm">
  UserName : <input type="text" name="userName">
</form>
<button id="html">get innerHTML</button>

在 jsFiddle 上查看 http://jsfiddle.net/BkjhZ/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 INPUT 标签的 VALUE 属性(及其值)读取 HTML 表单的innerHTML 的相关文章

  • 如何从字符串调用并执行运算符?

    例如 var s 3 3 s replace d g function all n1 operator n2 r new Number n1 new Number n2 return r 注意 不使用eval 变量运算符可以吗 https
  • React Native Tab 视图的高度始终等于最高选项卡的高度

    介绍 我有一个 FlatList 它在页脚中呈现一个选项卡视图 此选项卡视图允许用户在一个 FlatList 或另一个 FlatList 之间切换 所以 最后这些是同级 FlatList Problem 第一个 FlatList A 的高度
  • 如何调试requireJS模块定义的路径/文件

    我是 RequireJS 世界的新手 我越来越Load Timeout error对于我已经在主文件中定义的模块之一 我在 Chrome 的 网络 选项卡中没有看到任何请求 可能是因为 require 之前已经加载了该文件 我已经迷上了on
  • 没有 ssl 的 Web 加密 API

    我编写了一个用于安全消息传输的小网络应用程序 以了解有关加密的更多信息 并想向我的朋友展示它并让他们玩一下 所以我将它托管在我的小服务器上 并惊讶地发现 Web Crypto API 我竭尽全力开始工作 因为它的错误消息不是很具体 需要 S
  • 为什么边框会增加元素的宽度?

    我有一个div如下 其指定宽度为 300px 边框宽度为 2px 为什么2px边框会导致宽度div是304px 如果我希望它有边框但宽度仍为 300 像素怎么办 test width 300px height auto border 2px
  • Knockout JS - 如何正确绑定 observableArray

    请看一下这个例子 http jsfiddle net LdeWK 2 http jsfiddle net LdeWK 2 我想知道如何绑定可观察数组的值 我知道上面例子中的问题 就是这一行 p Editing Fruit p
  • 图像映射区域周围不需要的边框

    我正在使用带有圆形区域的图像贴图 问题是我在 IE7 中的区域周围出现了不需要的边框 此边框不会出现在 FF 和 Chrome 中 也不会出现在 IE8 IE9 中 我尝试向图像添加 border 0 锚点的 css 属性 即 a bord
  • 如何使子元素被访问/活动时父元素的颜色发生变化

    我有一个下拉导航 我想要做的是 当我单击任何子菜单链接时 我希望父按钮的颜色在链接处于活动状态时保持更改 这是代码的小提琴链接 https jsfiddle net v28ydshL https jsfiddle net v28ydshL
  • JavaScript 按属性删除对象数组中的元素

    我有一个以下形式的对象数组 prop1 value1 banks id value property2 value2 所以我想要做的是通过搜索 id 值来删除 banks 属性中的元素 然后从banks数组中删除找到的元素 id 属性具有唯
  • 如何对结构切片而不是切片结构进行范围调整

    稍微玩了一下 Go HTML 模板后 我发现的所有循环模板中对象的示例都是将切片结构传递给模板 有点像这个示例 type UserList struct Id int Name string var templates template M
  • jQuery - 动画可折叠 DIV,向上滑动?

    我使用这个 jQuery 脚本来设置 div 的动画 以便在用户单击按钮时打开 关闭 http www dynamicdrive com dynamicindex17 animatedcollapse htm http www dynami
  • 如何使用 facebook 用户登录我的网站?

    我想知道 facebook 如何让用户登录我们的网站 我的意思是用户需要注册到我的网站才能发表评论 我如何通过我的 php 代码检查它是否是登录用户 我听说你只能用javascript检查它是否是登录用户 感谢您的任何解释 您可以使用脸书
  • 将复杂对象传递给 ui-sref 参数

    我需要这样的构建网址 列表 过滤器 状态 1 过滤器 类型 2 I do link a List a 在参数中传递复杂对象 如果传递简单对象 filter 1 可以 但我需要这个 state state list url list filt
  • 允许调用函数覆盖默认选项 - jQuery UI 对话框

    我希望 CallingFunction 能够覆盖中提供的默认选项showDivPopUp功能 function calling showDivPopUp title of pop up box message to show buttons
  • JavaScript fetch API - 为什么response.json()返回一个promise对象(而不是JSON)? [复制]

    这个问题在这里已经有答案了 我刚刚开始学习 Fetch API https developer mozilla org en US docs Web API Fetch API Using Fetch https developer moz
  • Python Flask 不更新图像[重复]

    这个问题在这里已经有答案了 这里有一些关于图像的 Flask 问题 但没有一个能解决我的问题 我有一个应用程序可以创建图像 保存它 然后显示它 一次 它应该多次执行此操作 每次更改图像时 它应该加载新图像 它不是 它只显示与其显示的文件名关
  • AngularJs:当放置在 ng-view 标签内时,ng-include 不起作用

    我正在通过 ng view 内的角度路线加载 html 页面 我正在加载的页面包含一个 ng include 标签 指向 另一个 html 文件 我尝试了以下所有语法 div src div div div div src include
  • 如何检索 JQuery 数据表的排序状态

    我对 JQuery Datatables 还很陌生 我正在尝试检索有关数据表的两个信息 当前正在对哪个列索引进行排序 也称为选择 排序顺序 升序或降序 不知道我应该如何解决这个问题 使用 jquery 查找列索引 或者 Datatables
  • Google 地图 v3 信息窗口在地图视口外打开

    如果单击地图视口顶部附近的标记 信息窗口将加载到可视区域之外 并且必须拖动地图才能查看信息窗口内容 理想情况下 我不希望地图自动平移 有没有办法以不同的方向加载信息窗口 例如如果标记位于视口的顶部 则以向下的方向显示信息窗口 不 你不能以不
  • 高图表的分散工具提示未显示

    我有一个散点图和条形图 我无法查看酒吧上方散点的工具提示 这是小提琴http jsfiddle net tZ9Rt http jsfiddle net tZ9Rt 我正在使用这两个系列 series type scatter index 2

随机推荐

  • 删除 android parse.com 上的重复安装

    我正在尝试在 Android 上重新安装时删除重复安装 我正在从 ParseInstallation 获取查询 但它不起作用 我在下面附上我的代码 public boolean checkDuplicate String id ParseI
  • 部署 Web 应用程序期间出现错误“无法打开源文件:找不到路径的一部分”

    我在部署网络应用程序期间遇到错误 错误的标题是Could not open Source file Could not find a part of the path 无法打开源文件 找不到路径的一部分 E ARCHIVES Project
  • 如何选择元素但排除第一个和最后一个元素

    如何处理不包括第一个和最后一个元素的元素 我有一个具有给定行数的表 我想在单击事件上触发行 但如果单击第一行或最后一行 则不应处理单击 我怎样才能实现这个 怎么样 tr not first last click function
  • 将 Mats 数组传递给本机代码

    我想要使 用的本机函数需要一个 7 的数组Mats static int nativeCode cv Mat inputImg cv Mat bufImgs 7 In jni part I have Mat mRgba Mat inRgba
  • 更新从后台线程更改 UI 的变量 - SWIFTUI

    通知主线程后台线程操作已完成的正确方法是什么 我现在收到此错误 Publishing changes from background threads is not allowed make sure to publish values fr
  • CSS 打印布局 - 在单页上打印

    我陷入了困境 SO 档案对我没有帮助 也许我找错地方了 这是短篇故事 我有一个需要打印在整页上的视图 我不能有第二页 并且我需要它在页面上尽可能大 解决方案必须具有合理的跨浏览器兼容性 IE9 Safari Chrome FF 我已经有了一
  • 使用专有编解码器构建 QtWebEngine 5.9.1

    我们需要在QtwebengineView中支持mp4文件 因此 我们尝试在 msvc2015 x64 上使用专有编解码器构建 Qt 5 9 1 的 qtwebengine 在 cmd 中使用以下命令 工作目录是源中的 qtwebengine
  • AngularJS:为什么 $http 在您离开当前摘要之前实际上不会发出 http 请求?

    http 的 AngularJS 文档位于http docs angularjs org api ng http docs angularjs org api ng http 声明 http 服务在执行下一个 digest 之前不会真正发送
  • 在采用数组或集合参数的方法上使用 Spring Cache 有哪些策略?

    我想使用 Spring 的 Cache 抽象将方法注释为 Cacheable 但是 某些方法被设计为采用数组或参数集合并返回集合 例如 考虑使用此方法来查找实体 public Collection
  • 如何使用 jQuery 隐藏 IE 中损坏的图像?

    我尝试过从 jQuery 站点复制的这段代码 但它在 IE7 IE8 中失败 但在其他浏览器中有效 这段代码有什么问题 它来自 jQuery 站点 http api jquery com error 我正在使用 jQuery 版本 1 4
  • 移动端和网络服务器之间的数据同步

    您将如何实施数据同步解决方案来确保移动设备和 Web 服务器上的数据同步 看看这个教程 part one http www raywenderlich com 15916 how to synchronize core data with
  • 我如何判断 CEDET 是否使用 GNU Global?

    我让 CEDET 在 emacs 24 2 上大部分工作 并使用 bzr 的最新版本 存储库 当我搜索符号或定义时 我看到 cedet 迷你缓冲区 显示解析大量文件 其中一些文件不作为头文件 文件 没有任何对我正在搜索的符号的引用 我将让
  • 确保客户端上的文件状态与 NFS 服务器同步

    我正在尝试找到正确的方法来处理 NFS 客户端上的过时数据 考虑以下场景 两台服务器挂载具有多个文件的相同 NFS 共享存储 1 台服务器上的客户端应用程序删除了一些文件 2 个服务器上的客户端应用程序尝试访问已删除的文件并失败并显示 陈旧
  • Mongoid 在 ruby​​ 1.9.3 上失败

    所以我正在玩 mongo 的东西 创建了一个新的heroku应用程序 为其添加了一个mongolab选项 但是每个mongoid方法都失败了 我用谷歌搜索了一下 看起来这个问题在 1 9 3 之前的 ruby 中很常见 但我正在运行 1 9
  • 从文件夹中获取给定扩展名的第一个文件

    我需要获取具有以下内容的文件夹中的第一个文件 tar gz扩大 我想出了 FILE path to folder ls path to folder grep tar gz head 1 但我觉得它可以做得更简单 更优雅 有更好的解决方案吗
  • 在 D3.JS 中使用面积图启动过渡和动画

    我想让面积图在程序开始时从左到右 绘制 本身 我的图表中已经有一条线执行此操作 但是我无法使该线下方的区域正确设置动画 或者在页面首次启动时 绘制 自身 目前 这就是我所在地区的情况 var area d3 svg area x funct
  • 如何只为模态体放置滚动条?

    我有以下元素 div class modal div class modal dialog style max height 85 margin top 50px margin bottom 50px div class modal con
  • 新版本的 Minikube 不允许 Pod 使用自己的服务

    我有一个 Pod 偶尔需要通过自己的主机名来调用自己 我设置了一个部署 最终创建了 Pod 和一个服务 我可以使用集群中不同 Pod 的服务名称 但该 Pod 无法使用其主机名调用自身 这适用于 Minikube v0 17 1 和 Kub
  • 在实例变量中保存块

    我们如何声明一个全局 私有实例变量 来接受其中的块 我们是否需要综合它以及它对内存管理的影响是什么 我有一个从第三方方法收到的块 我想将其保存在实例变量中并在稍后阶段使用它 这是一个 无 ARC 示例 在后台完成一些工作后存储完成回调的块
  • 使用 INPUT 标签的 VALUE 属性(及其值)读取 HTML 表单的innerHTML

    我有一个html form与一些输入字段 而不是读取和发送值input字段由document ipForm userName value 我需要将整个 html 内容发送到 html 解析器并提取