JavaScript: Loop through all elements in a form

1. June 2006

Since I've been doing alot of JavaScript programming lately, I figured I could start blogging some code snippets. Here is a JavaScript snippet that shows how to loop through all the elements in a form and retrieve their element type, name and values. I had to use this code to gather all form values so I could post them to the server using AJAX.


<html>
<head>
<script type="text/javascript">
function DisplayFormValues()
{
var str = '';
var elem = document.getElementById('frmMain').elements;
for(var i = 0; i < elem.length; i++)
{
str += "<b>Type:</b>" + elem[i].type + "&nbsp&nbsp";
str += "<b>Name:</b>" + elem[i].name + "&nbsp;&nbsp;";
str += "<b>Value:</b><i>" + elem[i].value + "</i>&nbsp;&nbsp;";
str += "<BR>";
}
document.getElementById('lblValues').innerHTML = str;
}
</script>
</head>
<body>
<form id="frmMain" name="frmMain">
<input type="hidden" name="ElemHidden" value="some hidden text" />
<input type="text" name="ElemText" value="some text" /><br />
<textarea name="ElemTextArea">Some text area text</textarea><br />
<br />
<input type="button" value="Test" onclick="DisplayFormValues();" />
</form>
<hr />
<div id="lblValues"></div>
</body>
</html>

General



Comments

po[op[
po[op[
7/1/2006 10:20:00 PM #
p'l;l
Edison
Edison
9/10/2006 1:02:00 PM #
The code snippet is exactly what I am looking for. This is a very good example of how it can help people to learn Javascript by example. Keeping it simple is the key. Thankyou very much for this.
BB
BB
12/19/2006 5:01:00 AM #
I agree with Edison, really nice! Thanks for sharing
3/28/2007 5:32:00 PM #
This code is gold.  It's exactly what I was looking for!  Thank you so much.
11/5/2009 10:23:17 AM #
Pingback from blog.wu-boy.com

[網站] 好站連結 (六) | 小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY
Comments are closed