Fetching data from many input fields using getElementsByTagName() method

Question

<!DOCTYPE html>
<html>
<head>
<script>
function getElements()
{
  var v = document.getElementById('view');
  var x=document.getElementsByTagName("input");
  for(var i=0; i<x.length; i++){
  v.innerHTML = x[i].value+"<br>";
  }  
}
</script>
</head>
<body>

<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<input type="button" onclick="getElements()" value="How many input elements?">

<p id='view'></p>
</body>
</html>

This is my code where I want to fetch the values of the fields and iterate them below in the "p" tag but it kept showing me the value of the last input which is the submit value.

The nature of the program was for me to fetch data from many inputs elements including file, upload field and submit them to the server script.

Dipali Vasani · Accepted Answer · 2015-08-31 07:23:41Z

1

You need to change your html and javascript as following which will not give you button's value(which is not needed) :

HTML:

<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
    <button onclick="getElements()" value="How many input elements?" >How many input elements?</button>
<p id='view'></p>

JS:

function getElements()
{
  var v = document.getElementById('view');
    v.innerHTML = "";
  var x=document.getElementsByTagName("input");
  for(var i=0; i<x.length; i++){
      v.innerHTML += x[i].value+"<br>";
  }  
}

DEMO : http://jsfiddle.net/f7bLq0b4/

answered Aug 31, 2015 at 7:23

Dipali Vasani

2,5462 gold badges18 silver badges30 bronze badges

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

1 Comment

Dipali Vasani Over a year ago

please accept the answer if you have got the solution :)

Kishore Indraganti · Accepted Answer · 2015-08-31 07:23:47Z

0

Make the below change in your code to make it work.

<!DOCTYPE html>
<html>
<head>
<script>
function getElements()
{
  var v = document.getElementById('view');
  var x=document.getElementsByTagName("input");
  for(var i=0; i<x.length; i++){
  v.innerHTML += x[i].value+"<br>";
  }  
}
</script>
</head>
<body>

<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<button  onclick="getElements()">How many input elements?</button>

<p id='view'></p>
</body>
</html>

To append a string you need to use +=.

edited Aug 31, 2015 at 7:23

answered Aug 31, 2015 at 7:18

Kishore Indraganti

1,3224 gold badges19 silver badges34 bronze badges

Collectives™ on Stack Overflow

Fetching data from many input fields using getElementsByTagName() method

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related