使用 INPUT 标签的 VALUE 属性（及其值）读取 HTML 表单的 innerHTML答案

【问题标题】：reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags使用 INPUT 标签的 VALUE 属性（及其值）读取 HTML 表单的 innerHTML
【发布时间】：2011-11-27 22:44:08
【问题描述】：

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

不是通过document.ipForm.userName.value 读取和发送input 字段的值，我需要将整个html 内容发送到html 解析器并通过其他一些程序提取每个输入字段的<name ,value> 对（以及其他信息也）。

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

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

即使我输入了一些值，它不显示<input/> 字段中的value="enteredValue"。

我的 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>

是我遗漏了什么还是不可能的。

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

【问题讨论】：

据我所知，.innerHTML 中的value="" 内容永远不会反映页面加载后您在输入字段中输入的内容。它只会包含页面加载时 value="" 中存在的内容。

标签： javascript html innerhtml

【解决方案1】：

那是因为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>

View on jsFiddle

【讨论】：

【解决方案2】：

你也可以写一个输入来改变他的属性，像这样：

(...)

UserName : <input type="text" name="userName" onChange="this.setAttribute('value', this.value);">

对于复选框：

onClick="if (this.checked) { this.setAttribute('checked', null); } else { this.removeAttribute('checked'); }"

享受:)

【讨论】：