reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags

Question

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.

As far as I know, the value="" stuff in .innerHTML will never reflect what you've entered into an input field after the page has loaded. It'll only contain what was present in the value="" at the time the page was loaded. — Marc B
– Marc B, Commented Sep 29, 2011 at 18:42

showdev · Accepted Answer · 2021-08-27 18:52:17Z

15

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

edited Aug 27, 2021 at 18:52

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Sep 29, 2011 at 18:41

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jerry · Accepted Answer · 2015-11-23 19:22:16Z

2

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

edited Nov 23, 2015 at 19:22

answered Nov 23, 2015 at 19:08

Jerry

1,2381 gold badge15 silver badges21 bronze badges

Collectives™ on Stack Overflow

reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related