All geek questions in one place

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

I have an html form with some input fields.

Instead of reading and sending the input values ​​of the document.ipForm.userName.value fields, I need to send all the html content to the html parser and extract the pair <name ,value> each input field by some other program (and other information too).

But when I did it in JavaScript (I want a clean JavaScript other library)

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

It does not show the value="enteredValue" fields of the <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>

Something is missing or impossible.

Do not call me MAD. but I am struggling with this strange state.

+6
source share
2 answers

This is because value is a property when a text field is filled, not an attribute. This means that .value works fine, but is not part of the actual DOM as an attribute (for example, <input value="..."> ).

You will need to install it explicitly: 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); }
+11
source

You can also write input that changes its attribute, for example:

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

And for the flags:

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

Enjoy :)

0
source

Source: https://habr.com/ru/post/898309/

More articles:


All Articles