/    Sign up×
Community /Pin to ProfileBookmark

How to subtract between two textfields?

Copy linkTweet thisAlerts:
Feb 24.2005

I try to subtract the value between two textfields, user enter one value(must be 1-100), then the result will load in the other textfield. But the problem is when the user enter more than 100, then the result will change to negative. How to solve this problem?

Many thanks
Student

<script>
function soma2(){
var wtemp=0
wresult=100
for (var k=2;k<3;k++){ // loop to get all inputs
wtemp=eval(“parseFloat(document.all.box”+k+”.value)”)
if(!isNaN(wtemp)) wresult-=wtemp // if value is a number – add it.
}
document.all.result2.value=wresult // change the last input…Result one
}
</script>
<script>
function soma3(){
var vtemp=0
vresult=100
for (var i=31;i<35;i++){ // loop to get all inputs
vtemp=eval(“parseFloat(document.all.box”+i+”.value)”)
if(!isNaN(vtemp)) vresult-=vtemp // if value is a number – add it.
}
document.all.result3.value=vresult // change the last input…Result one
}
</script>

<style type=”text/css”>
<!–
.style5 {color: #FF0000; font-style: italic; font-size: x-small; }
–>
</style>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”41%”><div align=”center”>Individual assessment</div></td>
<td width=”59%”><input name=box2 type=”text” id=”box2″ onchange=”soma2()” size=”2″>
% </td>
</tr>
<tr>
<td><div align=”center”>pair / group work assessment </div></td>
<td><input name=result2 type=”text” id=”result2″ onFocus=”this.blur()” size=”2″>
% <span class=”style5″>(The system will auto count the number)</span> </td>
</tr>
</table>

to post a comment
JavaScript

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@the_treeFeb 24.2005 — More often than not, simple is better.[CODE]<script type="text/javascript">
a = document.myForm.firstnumber;
b = document.myForm.othernumber;
c = a - b;
document.write (a+' minus '+b+' is '+c)
</script>[/CODE]
Copy linkTweet thisAlerts:
@KorFeb 24.2005 — To [b]the tree[/b] -

Maybe you wanna have typed this ? :

a = document.myForm.firstnumber[color=red].value*1[/color];

b = document.myForm.othernumber[color=red].value*1[/color];

c = a - b;


To [b]fisher999[/b]

I confess I don't quite see what you mean. can you detail?

...and... no need to use eval() method (I always try to avoid it, looks malicious to me ? )

Instead of, for instance:

wtemp=eval("parseFloat(document.all.box"+k+".value)")

you may use:

wtemp=parseFloat(document.getElementsByName('box'+k)[0].value));

This way you code becomes crosbrowser (document.all is a deprecated IE only reference)
Copy linkTweet thisAlerts:
@fisher999authorFeb 24.2005 — Sorry, because I am a newer on javascript. My concept is simple: there are two textfields - A and B . User need to enter (1-100) into A field, then the B textfield will subtract A and gain the result in B textfield. If user enter not (1-100) will alert them using pop window.

How to solve this problem?

Many thanks

Student

?
Copy linkTweet thisAlerts:
@KorFeb 24.2005 — Somethig like this? :
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var s=100;
function subs(val){
var a = val*1;
if((a<1)||(a>100)){
alert('enter a number between 1 and 100');
document.getElementById('a').value='';
document.getElementById('b').value='';
}
else{
document.getElementById('b').value=100-a;
}
}
</script>
</head>
<body>
<input id="a" type="text" onkeyup="subs(this.value)"><br>
<input id="b" type="text">
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@KorFeb 24.2005 — Or like this:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
valB=100;
function subs(val){
var a = val*1;
if((a<1)||(a>100)){
alert('enter a number between 1 and 100');
document.getElementById('a').value='';
document.getElementById('b').value=valB;
}
else{
document.getElementById('b').value=100-a;
}
}
onload=function(){document.getElementById('b').value=valB}
</script>
</head>
<body>
<input id="a" type="text" onkeyup="subs(this.value)"><br>
<input id="b" type="text" readonly>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@fisher999authorFeb 24.2005 — Yeah! I like the second one!!! Can I passed the numbers through PHP and store in MySQL?

Many thanks

Student
Copy linkTweet thisAlerts:
@KorFeb 24.2005 — This case you should use a form and give it the submit action to your php application.

[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
valB=100;
function subs(val){
var a = val*1;
if((a<1)||(a>100)){
alert('enter a number between 1 and 100');
document.getElementById('a').value='';
document.getElementById('b').value=valB;
}
else{
document.getElementById('b').value=100-a;
}
}
onload=function(){document.getElementById('b').value=valB}
</script>
</head>
<body>
<form name="myform" method="post" action="yourphpapp.php">
<input name ="a" id="a" type="text" onkeyup="subs(this.value)"><br>
<input name="b" id="b" type="text" readonly>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@fisher999authorFeb 24.2005 — I have one question contain five textfield, so I edit the code but error occur. Can you help me?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

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

<meta http-equiv="Content-Style-Type" content="text/css">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<script language="JavaScript" type="text/JavaScript">

valI=100;

function subs14(val){

var e = val*1;

var f = val*1;

var g = val*1;

var h = val*1;

if((e<0)||(e>100)||(f<0)||(f>100)||(g<0)||(g>100)||(h<0)||(h>100)){

alert('enter a number between 0 and 100');

document.getElementById('e').value='';

document.getElementById('f').value='';

document.getElementById('g').value='';

document.getElementById('h').value='';

document.getElementById('i').value=valI;

}

else{

document.getElementById('i').value=100-l;

}

}

onload=function(){document.getElementById('i').value=vali}

</script>

</head>

<body>

<form name="myform" method="post" action="yourphpapp.php">

<input name ="e" id="e" type="text" onkeyup="subs14(this.value)"><br>

<input name ="f" id="f" type="text" onkeyup="subs14(this.value)"><br>

<input name ="g" id="g" type="text" onkeyup="subs14(this.value)"><br>

<input name ="h" id="h" type="text" onkeyup="subs14(this.value)"><br>

<input name="i" id="i" type="text" readonly>

<br>

<input type="submit" value="Submit">

</form>

</body>

</html>


Many thanks

Student
Copy linkTweet thisAlerts:
@UltimaterFeb 24.2005 — [i]Originally posted by fisher999 [/i]

function subs14(val){

var e = val*1;

var f = val*1;

var g = val*1;

var h = val*1;

if((e<0)||(e>100)||(f<0)||(f>100)||(g<0)||(g>100)||(h<0)||(h>100)){

alert('enter a number between 0 and 100');

document.getElementById('e').value='';

document.getElementById('f').value='';

document.getElementById('g').value='';

document.getElementById('h').value='';

document.getElementById('i').value=valI;

}

else{

document.getElementById('i').value=100-l;

}

}
[/QUOTE]
This function is a [b]mess[/b]!

The function is called when the user triggers an onkeyup event.

The function accepts an argument with the current value of

whatever input.
[code=php]
var e = val*1;
var f = val*1;
var g = val*1;
var h = val*1;
[/code]
This makes no sense because e will equal f [b]every time[/b]

along with f == g == h

The function is much cleaner and re-usable, if you

only send it an argument of the element

(and not it's value via [i]this.value[/i])

Here, make the following changes to your form.
<i>
</i>&lt;form name="myform" method="post" action="yourphpapp.php"&gt;
&lt;input name ="e" id="e" type="text" onkeyup="subs14([color=green]this[/color])"&gt;&lt;br&gt;
&lt;input name ="f" id="f" type="text" onkeyup="subs14([color=green]this[/color])"&gt;&lt;br&gt;
&lt;input name ="g" id="g" type="text" onkeyup="subs14([color=green]this[/color])"&gt;&lt;br&gt;
&lt;input name ="h" id="h" type="text" onkeyup="subs14([color=green]this[/color])"&gt;&lt;br&gt;
&lt;input name="i" id="i" type="text" readonly&gt;
&lt;br&gt;
&lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;
Copy linkTweet thisAlerts:
@UltimaterFeb 24.2005 — [i]Originally posted by fisher999 [/i]

onload=function(){document.getElementById('i').value=vali}
[/QUOTE]

I don't see [i]vali[/i] defined.

I think you meant to define it like so:

var vali=100

and you would have mis-used it inside your function with a mis-capitalization [i]valiI[/i].

here let me give you my function now:
<i>
</i>var vali=100
function subs14(val){

var ele = val.value-0
if((ele&lt;0)||(ele&gt;100)){
alert('enter a number between 0 and 100');
val.value='';val.focus();
document.getElementById('i').value=vali;
}
else document.getElementById('i').value=100-ele;

}
onload=function(){document.getElementById('i').value=vali}
Copy linkTweet thisAlerts:
@fisher999authorFeb 25.2005 — Thanks for Ultimater reply. But you code cannot solve my problem. I try to enter 20 in "e"textfield and then enter 95 in "f" field. The script allow to enter 95! (because the result total must be 100) and the value of result field "i" is wrong.

Any ways to solve my problem? please teach me!

Many thanks

Student


?
Copy linkTweet thisAlerts:
@fisher999authorFeb 26.2005 — Try many times, can anyone help me? :mad:
Copy linkTweet thisAlerts:
@UltimaterFeb 27.2005 — Maybe this is what your looking for:

[size=-3]<i>
</i>&lt;head&gt;
&lt;script&gt;
function One2Hundred(){
if((arguments[0].value-0 &gt; 100)||(arguments[0].value-0 &lt; 0)){
alert("Enter a number 1 through 100!");
arguments[0].select();
return false;
}
if(isNaN(arguments[0].value)){
alert("Please enter a number and nothing else but a number!");
arguments[0].select();
return false;
}
return true
}
function Subtract_EM(){
var $A,$B,$C;
if(document.getElementsByName){
$A=document.getElementsByName("A")[0]
$B=document.getElementsByName("B")[0]
$C=document.getElementsByName("C")[0]
}
else if(document.forms["form1"].A){
$A=document.forms["form1"].A
$B=document.forms["form1"].B
$C=document.forms["form1"].C
}
else if(document.form1.A){
$A=document.form1.A
$B=document.form1.B
$C=document.form1.C
}
else if(document.all){
for(i=0;i&lt;document.all.length;i++){
if(document.all[i].name=="A"){$A=document.all[i]}
if(document.all[i].name=="B"){$B=document.all[i]}
if(document.all[i].name=="C"){$C=document.all[i]}
}
}

$C.value=Math.abs($A.value-$B.value)
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name="form1"&gt;
&lt;input name="A" onblur="One2Hundred(this)" size=1 maxlength=3&gt;
&lt;input name="B" onblur="One2Hundred(this)" size=1 maxlength=3&gt;
&lt;input type="button" value="Subtract" onclick="Subtract_EM()"&gt;
&lt;input name="C" size=1 maxlength=3&gt;
&lt;/form&gt;
&lt;/body&gt;
[/size]
Copy linkTweet thisAlerts:
@KorMar 01.2005 — [code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var names = ['e','f','g','h'];var s;var oldi;var oldtot;
function subs14(f,t){
oldtot=f.elements['i'].value
s=0;
calc(f);
if(s>100){alert('The substract result can not be negative!/n Choose a smaller number');
t.value=oldi;
f.elements['i'].value=oldtot;
}
else{oldi=t.value;
f.elements['i'].value=f.elements['i'].value-s;
}
}
function calc(f){
f.elements['i'].value=100;
for(var i=0;i<names.length;i++){
s=s+f.elements[names[i]].value*1;
}
}
</script>
</head>
<body>
<form name="myform" method="post" action="yourphpapp.php">
<input name ="e" id="e" type="text" onkeyup="subs14(this.form,this)"><br>
<input name ="f" id="f" type="text" onkeyup="subs14(this.form,this)"><br>
<input name ="g" id="g" type="text" onkeyup="subs14(this.form,this)"><br>
<input name ="h" id="h" type="text" onkeyup="subs14(this.form,this)"><br>
<input name="i" id="i" type="text" readonly value="100">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
[/code]
×

Success!

Help @fisher999 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.3,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

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