Question

-5

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

rated 0 times [ 2] [ 7] / answers: 1 / hits: 20757 / 13 Years ago, thu, september 29, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

calicinthias

Add To Favorites

Follow

Total Points: 447

Total Questions: 101

Total Answers: 118

Location: Botswana

Member since Sat, Dec 31, 2022

1 Year ago

calicinthias questions

1 DataGrid blank/not displaying data? Material UI

Sun, Jan 2, 22, 00:00, 2 Years ago

1 How to test for useEffect inside a custom hook?

Wed, Jan 13, 21, 00:00, 3 Years ago

1 Scroll on Dropdown of antD component React

Mon, Aug 10, 20, 00:00, 4 Years ago

1 Vue.js trying to get DOM element by ID in computed returns null

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Adding a key-value pair to an object inside loop using React useState hook

Fri, Jun 26, 20, 00:00, 4 Years ago

View All

answered 13 Years ago jacie · Accepted Answer

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