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

发布于 2024-12-07 06:49:03 字数 1163 浏览 1 评论 0原文

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

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

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

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

，它不显示 的 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>

我是否在这里遗漏了一些东西，或者这是不可能的。

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

原文

I have a html form with some input fields.

Instead of reading and sending the values of input fields 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).

But when i did this in JavaScript(i want pure JavaScript- not other library)

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

It doesnot shows the value="enteredValue" of <input/> fields even if i entered some values.

My HTML File:

<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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如若梦似彩虹 2024-12-14 06:49:03

这是因为 value 是填充文本框时的属性，而不是属性。这意味着 .value 工作正常，但它不是作为属性的实际 DOM 的一部分（如）。

您需要明确设置它：

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 上查看

That's because value is a property when the textbox is filled in, not an attribute. This means that .value works fine, but it's not part of the actual DOM as an attribute (like <input value="...">).

You'd need to set it explicitly:

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

回复收藏 0 原文

小清晰的声音 2024-12-14 06:49:03

您还可以编写一个输入，该输入将更改其属性，如下所示：

(...)

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

对于复选框：

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

享受:)

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 :)

回复收藏 0 原文

~没有更多了~

关于作者

べ繥欢鉨o。

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

微信用户

小情绪

追我者格杀勿论

ゞ记忆︶ㄣ

笨死的猪

彭明超

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

微信用户

小情绪

追我者格杀勿论

ゞ记忆︶ㄣ

笨死的猪

彭明超

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。