javascript 使用 INPUT 标签的 VALUE 属性（及其值）读取 HTML 表单的 innerHTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7601851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags
提问by gtiwari333
I have a htmlformwith some input fields.
我有htmlform一些输入字段。
Instead of reading and sending the values of inputfields by document.ipForm.userName.value, I need to send the whole html content to html parser and extract the <name ,value>pair of each input field by some other program( and other information too).
我需要将整个 html 内容发送到 html 解析器并通过其他程序（以及其他信息）提取每个输入字段对，而不是通过 读取和发送input字段的值。document.ipForm.userName.value<name ,value>
But when i did this in JavaScript(i want pure JavaScript- not other library)
但是当我在 JavaScript 中这样做时（我想要纯 JavaScript——而不是其他库）
var contents=document.getElementById("formArea").innerHTML;
alert(contents);
It doesnot showsthe value="enteredValue"of <input/>fields even if i entered some values.
它不列入表演了value="enteredValue"的<input/>，即使我输入了一些值的字段。
My HTML File:
我的 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>
Am i missing something here or this is not possible.
我在这里遗漏了什么，或者这是不可能的。
Don't call me MAD. but i am struggling with this strange condition.
不要叫我疯子。但我正在与这种奇怪的情况作斗争。
回答by pimvdb
That's because valueis a property when the textbox is filled in, not an attribute. This means that .valueworks fine, but it's not part of the actual DOM as an attribute (like <input value="...">).
这是因为value填充文本框时是一个属性，而不是一个属性。这意味着它.value工作正常，但它不是作为属性的实际 DOM 的一部分（如<input value="...">）。
You'd need to set it explicitly: http://jsfiddle.net/BkjhZ/.
您需要明确设置它：http: //jsfiddle.net/BkjhZ/。
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);
}
回答by Jerry
You can also write an input which will change itself his attribute, like this :
您还可以编写一个输入，它会改变自己的属性，如下所示：
(...)
UserName : <input type="text" name="userName" onChange="this.setAttribute('value', this.value);">
And for checkboxes :
对于复选框：
onClick="if (this.checked) { this.setAttribute('checked', null); } else { this.removeAttribute('checked'); }"
Enjoy :)
享受 ：）
