<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>029</title>
</head>
<body>
<form action="" id="picker">
<label>Value 1:</label>
<input type="text" id="first">
<br/>
<label>Value 2:</label>
<input type="text" id="second">
<br/>
<label>Value 3:</label>
<input type="text" id="third">
<br/>
<label>Value 4:</label>
<input type="text" id="four">
<br/>
<button id="validate">Validate</button>
</form>
<div id="result"></div>
</body>
<script type="text/javascript">
document.getElementById('validate').addEventListener('click',function(evnt){
evnt.preventDefault();
var elems = document.getElementById('picker').elements;
var elemArray = new Object();
for (var i = 0; i < elems.length; i++) {
if(elems[i].type == "text"){
elemArray[elems[i].id] = elems[i].value;
}
}
var str = '';
Object.keys(elemArray).forEach(function(key){
var value = elemArray[key];
str += key + '->' + value + '<br/>';
});
document.getElementById('result').innerHTML = str;
});
</script>
</html>
