/    Sign up×
Community /Pin to ProfileBookmark

Accessing all the text fields within a form as an array

I have a form (form1) that contains multiple text fields, all numeric. I have another text field in another form (call it form2) that needs to have the sum of every text field in form1. Form1 is generated dynamically based upon a set of values in a database, so there’s no way I can see to actually hardcode a form1.text1.value + form1.text2.value type-thing. Is there any way I can get all the text fields in form1 as an array that I can iteratively add up instead? Thanks

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@pilauAug 08.2006 — Use getElementsByTagName('textarea') ?

EDIT: Sorry, I missunderstood you. If you're using text fields (i.e. input tags) just give them a className of some name, like class="fields" and then collect them all by getElementsByClass
Copy linkTweet thisAlerts:
@dkitchauthorAug 08.2006 — Use getElementsByTagName('textarea') ?[/QUOTE]

Thank you for the quick response.
Copy linkTweet thisAlerts:
@dkitchauthorAug 08.2006 — How do I do this for elements such as <input type='text' width=3 name='801'/> though? Wouldn't tag name be 'input'? If so, then how do I distinguish between this and the <input type='submit'>?
Copy linkTweet thisAlerts:
@pilauAug 08.2006 — Yeah ok this is why I edited my first post here. Anyway, I came across this function:
[CODE]function getElementsByClass(node,searchClass,tag) {
var classElements = new Array();
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("b"+searchClass+"b");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}[/CODE]


Can you guess what it does? ?
Copy linkTweet thisAlerts:
@CharlesAug 08.2006 — function getTotal (formObject) {
var e, i = 0, n = 0
while (e = formObject.elements[i++]) {
if (e.type == 'text') n += Number (e.value) || 0
}
return n
}
Copy linkTweet thisAlerts:
@dkitchauthorAug 08.2006 — Here's what I have:

The page: <i>
</i>&lt;html&gt;&lt;head&gt;
&lt;link rel='stylesheet' href='style.css' type='text/css'&gt;
&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;

&lt;script LANGUAGE='JavaScript' src='CustomPcts.js'&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;
&lt;form name=theform method=POST action='PctEntry?action=update&amp;pid=1383'&gt;
&lt;h3&gt;Enter Custom %s&lt;/h3&gt;
Total: &lt;input type=text readonly name='totalbox' width=8&gt;
&lt;table&gt;
&lt;tr class=ColorBShade2&gt;
&lt;td&gt;Project ID&lt;/td&gt;&lt;td&gt;1383&lt;/td&gt;&lt;/tr&gt;
&lt;tr class=ColorAShade7&gt;
&lt;td&gt;Sum of a1.&lt;/td&gt;&lt;td&gt;&lt;input type=text size=4 onChange='updateTotal();' name=801&gt;&lt;/td&gt;&lt;/tr&gt;


CustomPcts.js:
<i>
</i>&lt;script type="text/javascript"&gt;
function updateTotal(){
var total = getTotal(document.getElementsByName('theform')[0]);
document.getElementsById('totalbox')[0].value = total;
}
function getTotal (formObject) {
var e, i = 0, n = 0
while (e = formObject.elements[i++]) {
if (e.type == 'text') n += Number (e.value) || 0
}
return n
}
&lt;/script&gt;


What am I doing wrong?
[code]
Copy linkTweet thisAlerts:
@dkitchauthorAug 08.2006 — nevermind, found it... getElementById, not getElementsById[0]

thank you all for your help
×

Success!

Help @dkitch spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...