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.
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.
Share Improve this question edited Oct 16, 2011 at 6:15 gtiwari333 asked Sep 29, 2011 at 18:37 gtiwari333gtiwari333 25.2k15 gold badges77 silver badges105 bronze badges 1 |2 Answers
Reset to default 15That'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
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 :)
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 Commented Sep 29, 2011 at 18:42