/    Sign up×
Community /Pin to ProfileBookmark

multiple fields passing to js

Copy linkTweet thisAlerts:
Jun 17.2005

I’m trying to use the following javascript with multiple field names…

So where the name of the fields are firstBox,secondBox,thirdBox…
I need them to pass the field names like this:
firstBox1,secondBox1,thirdBox1
firstBox2,secondBox2,thirdBox2
and so on, to calculate correctly…

So I would have my input like this….
<input type=text name=”firstBox1″ value=”” onFocus=”startCalc();” onBlur=”stopCalc();”> +
<input type=text name=”secondBox1″ value=”” onFocus=”startCalc();” onBlur=”stopCalc();”> =
<input type=text name=”thirdBox1″>
<input type=text name=”firstBox2″ value=”” onFocus=”startCalc();” onBlur=”stopCalc();”> +
<input type=text name=”secondBox2″ value=”” onFocus=”startCalc();” onBlur=”stopCalc();”> =
<input type=text name=”thirdBox2″>

<!– Original Script BEGIN –>

<script type=”text/javascript”>
<!– This script and many more are available free online at –>
<!– The JavaScript Source!! [url]http://javascript.internet.com[/url] –>
<!– Created by: [url]www.jdstiles.com[/url] –>
<!– Begin
function startCalc(){
interval = setInterval(“calc()”,1);
}
function calc(){
one = document.autoSumForm.firstBox.value;
two = document.autoSumForm.secondBox.value;
document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
clearInterval(interval);
}
// End –>
</script>
</HEAD>

<BODY>

<form name=”autoSumForm”>
<input type=text name=”firstBox” value=”” onFocus=”startCalc();” onBlur=”stopCalc();”> +
<input type=text name=”secondBox” value=”” onFocus=”startCalc();” onBlur=”stopCalc();”> =
<input type=text name=”thirdBox”>
</form>

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceJun 18.2005 — I wouldn't use that script. It is a huge resource hog by attempting to repeatedly execute 1000 times per second. Yeah, right! :rolleyes: The following will do what you want:
[code=html]
<script type="text/javascript">
<!--//
function calc(nbr, frm){
one = Number(frm.elements["firstBox"+nbr].value);
two = Number(frm.elements["secondBox"+nbr].value);
frm.elements["thirdBox"+nbr].value = one + two;
return true;
}
//-->
</script>
</head>

<body>

<form>
<p><input type="text" name="firstBox1"> +
<input type="text" name="secondBox1"
onchange="return calc(1, this.form);"> =
<input type="text" name="thirdBox1">
</p>
</form>
[/code]
Copy linkTweet thisAlerts:
@no1uknowauthorJul 27.2005 — I really appreciate the response "phpnovice"

I was able to take your code, modify it to include around 30 php entries and calculate on the fly as the user changes data...

To big of a php file to add here...

A basic static example is as follows....

Thanks again...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>calc</title>

<script type="text/javascript">

<!--//

function calc(nbr, frm){

ITEM_LVL = Number(frm.elements["ITEM_LVL"+nbr].value);

THRS_MAX = Number(frm.elements["THRS_MAX"+nbr].value);

frm.elements["thirdBox"+nbr].value = Math.round((100*ITEM_LVL) / THRS_MAX);

return true;

}

//-->

</script>

</head>

<body>


<form>

<input type="text" name="THRS_MAX1" onFocus="return calc(1, this.form);" onKeyUp="return calc(1, this.form);"> / <input type="text" name="ITEM_LVL1" onFocus="return calc(1, this.form);" onKeyUp="return calc(1, this.form);"> = <input type="text" name="thirdBox1">%<br>

<input type="text" name="THRS_MAX2" onFocus="return calc(2, this.form);" onKeyUp="return calc(2, this.form);"> / <input name="ITEM_LVL2" type="text" onFocus="return calc(2, this.form);" onKeyUp="return calc(2, this.form)">

= <input type="text" name="thirdBox2">%

</form>


</body>

</html>
×

Success!

Help @no1uknow 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 5.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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...