/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Arithmetic Operation on HTML form element

Copy linkTweet thisAlerts:
Jun 29.2010

Dear friends,
Please consider the following concern.

Suppose I have a 5 rows 3 columns form fields. When I will put any values in Col1 and Col2; Sum Column will calculate sum operation like Col1+Col2. Due to PHP and MySql issue, I had to make the input field as array element. But entry time the sum value will generate by JavaScript.

<form method=”post” action=”process.php” id=”frmArithmetic”>
<input name=”txtCol1[]” type=”text” onBlur=”doSum()” />
<input name=”txtCol2[]” type=”text” onBlur=”doSum()” />
<input name=”txtTotal[]” type=”text” value=”” readonly=readonly/>
<input type=”Submit” name=”btnSave” id=”btnSave” value=”Save”/>

</form>
—————————————

Col1 Col2 Sum

—– —– ——

1 ——— 2 ——— 3
2 ——— 5 ——— 7

[Save]
—————————————–

Any JavaScript solution will be appreciated.

Regards,
Iqbal

to post a comment
JavaScript

25 Comments(s) ↴

Copy linkTweet thisAlerts:
@Iqbal_HossainauthorJun 29.2010 — http://www.w3schools.com/js/js_operators.asp[/QUOTE]
Thanks for your reply. But I did not want your link.

I wan to know the JavaScript solution for array element handling what I mentioned in my post.
Copy linkTweet thisAlerts:
@tirnaJun 29.2010 — maybe use this as a starting point and guide:

[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
<!--

function doSum() {
var col1 = isNaN(parseFloat(document.getElementById('txtCol1[]').value))? 0 : parseFloat(document.getElementById('txtCol1[]').value);
var col2 = isNaN(parseFloat(document.getElementById('txtCol2[]').value))? 0 : parseFloat(document.getElementById('txtCol2[]').value);

document.getElementById("txtTotal[]").value = col1 * col2;
}

//-->
</script>
</head>
<body>

<form method="post" action="process.php" id="frmArithmetic">
<input name="txtCol1[]" type="text" onBlur="doSum()" />
<input name="txtCol2[]" type="text" onBlur="doSum()" />
<input name="txtTotal[]" type="text" value="" readonly='readonly' />
<input type="Submit" name="btnSave" id="btnSave" value="Save"/>
</form>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@Iqbal_HossainauthorJun 29.2010 — Thank you for your post. But script not working... ?
Copy linkTweet thisAlerts:
@Iqbal_HossainauthorJun 29.2010 — maybe use this as a starting point and guide:

[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
<!--

function doSum() {
var col1 = isNaN(parseFloat(document.getElementById('txtCol1[]').value))? 0 : parseFloat(document.getElementById('txtCol1[]').value);
var col2 = isNaN(parseFloat(document.getElementById('txtCol2[]').value))? 0 : parseFloat(document.getElementById('txtCol2[]').value);

document.getElementById("txtTotal[]").value = col1 * col2;
}

//-->
</script>
</head>
<body>

<form method="post" action="process.php" id="frmArithmetic">
<input name="txtCol1[]" type="text" onBlur="doSum()" />
<input name="txtCol2[]" type="text" onBlur="doSum()" />
<input name="txtTotal[]" type="text" value="" readonly='readonly' />
<input type="Submit" name="btnSave" id="btnSave" value="Save"/>
</form>

</body>
</html>
[/code][/QUOTE]
Thank you for your post. But script not working... ?
Copy linkTweet thisAlerts:
@KorJun 29.2010 — Under an XHTML Doctype, javascript events must be written in lowercase. same as all the HTML/XHTML attributes. Thus: on[B][COLOR="Blue"]b[/COLOR][/B]lur, not on[B][COLOR="Blue"]B[/COLOR][/B]lur

Another error, [B]tirna[/B] : Form's elements have only names, not ids, thus getElementById() will refer nothing. (Except, probably in IE, which, incorrectly, is able to take the name as id, if id is missing)
Copy linkTweet thisAlerts:
@tirnaJun 29.2010 — my sincerest apologies :o

I have given my code tester a good spanking and told them if it happens again they're fired ? - basically id's were not added to the input elements

This now works in IE8 and FF3.6

[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
<!--

function doSum() {
var col1 = isNaN(parseFloat(document.getElementById('txtCol1').value))? 0 : parseFloat(document.getElementById('txtCol1').value);
var col2 = isNaN(parseFloat(document.getElementById('txtCol2').value))? 0 : parseFloat(document.getElementById('txtCol2').value);

document.getElementById("txtTotal").value = col1 * col2;
}
//-->
</script>
</head>
<body>

<form method="post" action="process.php" id="frmArithmetic">
<input name="txtCol1[]" id="txtCol1" type="text" onBlur="doSum()" />
<input name="txtCol2[]" id="txtCol2" type="text" onBlur="doSum()" />
<input name="txtTotal[]" id="txtTotal" type="text" value="" readonly='readonly' />
<input type="Submit" name="btnSave" id="btnSave" value="Save"/>
</form>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@KorJun 29.2010 — Try this:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
function doSum(f){
var v1=Number(f['txtCol1[]'].value);
var v2=Number(f['txtCol2[]'].value);
f['txtTotal[]'].value=v1+v2;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form method="post" action="process.php" id="frmArithmetic"&gt;
&lt;input name="txtCol1[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtCol2[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtTotal[]" type="text" value="" readonly="readonly"&gt;
&lt;input type="Submit" name="btnSave" id="btnSave" value="Save"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@Iqbal_HossainauthorJun 29.2010 — Under an XHTML Doctype, javascript events must be written in lowercase. same as all the HTML/XHTML attributes. Thus: on[B][COLOR="Blue"]b[/COLOR][/B]lur, not on[B][COLOR="Blue"]B[/COLOR][/B]lur

Another error, [B]tirna[/B] : Form's elements have only names, not ids, thus getElementById() will refer nothing. (Except, probably in IE, which, incorrectly, is able to take the name as id, if id is missing)[/QUOTE]
In my script there is no problem with onblur or onBlur. Tirna's script is okay but the script is not appropriate with my case.
Copy linkTweet thisAlerts:
@KorJun 29.2010 — 
document.getElementById("txtTotal").value = col1 [COLOR="Red"]*[/COLOR] col2;
[/QUOTE]
We suppose do perform an addition (a sum) , not to multiply the values ?
Copy linkTweet thisAlerts:
@Iqbal_HossainauthorJun 29.2010 — my sincerest apologies :o

I have given my code tester a good spanking and told them if it happens again they're fired ? - basically id's were not added to the input elements

This now works in IE8 and FF3.6

[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
<!--

function doSum() {
var col1 = isNaN(parseFloat(document.getElementById('txtCol1').value))? 0 : parseFloat(document.getElementById('txtCol1').value);
var col2 = isNaN(parseFloat(document.getElementById('txtCol2').value))? 0 : parseFloat(document.getElementById('txtCol2').value);

document.getElementById("txtTotal").value = col1 * col2;
}
//-->
</script>
</head>
<body>

<form method="post" action="process.php" id="frmArithmetic">
<input name="txtCol1[]" id="txtCol1" type="text" onBlur="doSum()" />
<input name="txtCol2[]" id="txtCol2" type="text" onBlur="doSum()" />
<input name="txtTotal[]" id="txtTotal" type="text" value="" readonly='readonly' />
<input type="Submit" name="btnSave" id="btnSave" value="Save"/>
</form>

</body>
</html>
[/code][/QUOTE]
Sorry dear, Nothing happened. Would you understand my problem dear?
Copy linkTweet thisAlerts:
@tirnaJun 29.2010 — Sorry dear, Nothing happened. Would you understand my problem dear?[/quote]

I recopied and pasted the posted code (second version) into a html file and it works in my IE8 and FF3.6

What errors are you getting?
Copy linkTweet thisAlerts:
@KorJun 29.2010 — In my script there is no problem with onblur or onBlur. [/QUOTE]
It is simply a matter of standard. [I]XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive.[/I]

http://www.w3.org/TR/xhtml1/#h-4.2

Some browsers might be not so tolerant with the "camel case".
Copy linkTweet thisAlerts:
@Iqbal_HossainauthorJun 29.2010 — Try this:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
function doSum(f){
var v1=Number(f['txtCol1[]'].value);
var v2=Number(f['txtCol2[]'].value);
f['txtTotal[]'].value=v1+v2;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form method="post" action="process.php" id="frmArithmetic"&gt;
&lt;input name="txtCol1[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtCol2[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtTotal[]" type="text" value="" readonly="readonly"&gt;
&lt;input type="Submit" name="btnSave" id="btnSave" value="Save"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
[/QUOTE]
Both trina and your code only works at last but only for one row. It is not working the next rows.... Just one row is working. And this is my main problem dear.
Copy linkTweet thisAlerts:
@KorJun 29.2010 — Both trina and your code only works at last but only for one row. It is not working the next rows.... Just one row is working. And this is my main problem dear.[/QUOTE]
I see only one row in your code. How the second row looks like? And the third?

Dear ?
Copy linkTweet thisAlerts:
@tirnaJun 29.2010 — Under an XHTML Doctype, javascript events must be written in lowercase. same as all the HTML/XHTML attributes. Thus: on[B][COLOR=blue]b[/COLOR][/B]lur, not on[B][COLOR=blue]B[/COLOR][/B]lur

Another error, [B]tirna[/B] : Form's elements have only names, not ids, thus getElementById() will refer nothing. (Except, probably in IE, which, incorrectly, is able to take the name as id, if id is missing)[/quote]

[B][U]id's in forms are valid in XHTML [/U][/B]

This code passes the w3c validator as XHTML STRICT with an id for the form

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
<form action="test.php" method="post" id="myID" >
<div>
<input type="text" name="txtTest" />
<input type="submit" value="submit" />
</div>
</form>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@Iqbal_HossainauthorJun 29.2010 — Please consider the image attached here... Hope will understand my problem dear friends...

[upl-file uuid=b91538a9-9c11-424d-82d0-51d40cea1e72 size=9kB]problem.gif[/upl-file]
Copy linkTweet thisAlerts:
@KorJun 29.2010 — [B][U]id's in forms are valid in XHTML [/U][/B][/QUOTE]
You were not attentive. I said that the form's [I]elements[/I] have no id [I]in your code[/I], thus the method [B]getElementById()[/B] has no ids to find as reference. I said nothing about validation.

Before stating something, read attentively what others have written.
Copy linkTweet thisAlerts:
@KorJun 29.2010 — Please consider the image attached here... Hope will understand my problem dear friends...[/QUOTE]
Picture is of no help. Post the HTML code.
Copy linkTweet thisAlerts:
@tirnaJun 29.2010 — You were not attentive. I said that the form's [I]elements[/I] have no id [I]in your code[/I], thus the method [B]getElementById()[/B] has no ids to find as reference. I said nothing about validation.

Before stating something, read attentively what others have written.[/quote]

yep ok - I misread your post.

But in any case, id's in form elements is still XHTML Strict valid according to the w3c validator

(some test code)

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
<form action="test.php" method="post" id="myID" >
<div>
<input type="text" name="txtTest" id="txtTest" />
<input type="submit" value="submit" />
</div>
</form>
</body>
</html>
[/CODE]

and as long as it passes the w3c validator and the js works in the browsers that I support I am happy ?, so I'll keep using id's in form elements because it is what I prefer to use and what I am used to.
Copy linkTweet thisAlerts:
@tirnaJun 29.2010 — Please consider the image attached here... Hope will understand my problem dear friends...[/quote]

NCIS is about to start on the telly, so I'll try to come back later this evening and have a look at it then if no-one finishes it off for you before then.
Copy linkTweet thisAlerts:
@KorJun 29.2010 — 
But in any case, id's in form elements is still XHTML Strict valid according to the w3c validator[/QUOTE]
Man, for God's sake, but [I]who[/I] said that ids in form elements is not valid? I said only that [I]in your code[/I], your form's elements [I]have no id[/I]. [I]You have not set the id for the form elements[/I]. You forgot. You missed. It does not matter. The point is only this: if an element has no id, it can not be referred with the getElementById() method. Is it clear now?

English might not be my native language, but I used to think I know it enough to make myself understood. ?
Copy linkTweet thisAlerts:
@tirnaJun 29.2010 — earlier you said:


....Form's elements have only names, not ids, thus getElementById() will refer nothing.....
[/QUOTE]

[B]ok no problem - I'll forgive you this time and put it down to English not being your native language.[/B]

This to me is clearly a general statement and in no way referred specifically to the elements in my forms.

I took your statement to mean you were saying that elements in all forms have names etc etc

In the future, if you want to refere to something specific in my code you should refer to it directly.

ad break on the telly is over - gotta go - see you around ?
Copy linkTweet thisAlerts:
@KorJun 29.2010 — [B]Iqbal Hossain[/B], looking at the notation used for your names in form's elements, I presume you intend to send them as arrays to a php application. If so, the code could look like:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
function doSum(f){
var v1=f['txtCol1[]'], v2=f['txtCol2[]'], s=f['txtTotal[]'];
for(var i=0;i&lt;v1.length;i++){
s[i].value=Number(v1[i].value)+Number(v2[i].value);
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form method="post" action="process.php" id="frmArithmetic"&gt;
&lt;input name="txtCol1[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtCol2[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtTotal[]" type="text" value="" readonly="readonly"&gt;
&lt;br&gt;
&lt;input name="txtCol1[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtCol2[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtTotal[]" type="text" value="" readonly="readonly"&gt;
&lt;br&gt;
&lt;input name="txtCol1[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtCol2[]" type="text" onblur="doSum(this.form)"&gt;
&lt;input name="txtTotal[]" type="text" value="" readonly="readonly"&gt;
&lt;input type="Submit" name="btnSave" id="btnSave" value="Save"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@Iqbal_HossainauthorJun 30.2010 — Thanks Kor. I already did it last night on same way which is similar to your script.

Thank you again (specially KOR and Tirna) all for good try and suggestion.
×

Success!

Help @Iqbal_Hossain 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.24,
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,
)...