使用 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 的相关文章

随机推荐

  • 删除 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 解析器并提取