...

View Full Version : changing value of text field through checkbox



BasBrouwers
03-03-2005, 08:34 PM
Hello,

I'm having a little problem. The code below only works half. When I uncheck the checkbox the value of the text field is reduced by one, but when I ckeck the checkbox the value is multiplied by 10!! What am I missing here?
Thanks in advance for any help you can give me.

Bas

<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>
<BODY>
<form name='temp'>
<input type='text' value=5 id='ma' name='ma'>
<input type='checkbox' id='ma_check' name='ma[]' onClick=' if ( this.checked ) document.temp.ma.value+=1; else document.temp.ma.value-=1;'>
</form>
</BODY>
</HTML>

Brandoe85
03-03-2005, 09:11 PM
Change them to numbers first:


<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>
<BODY>
<form name='temp'>
<input type='text' value=5 id='ma' name='ma'>
<input type='checkbox' id='ma_check' name='ma[]' onClick=' if ( this.checked )document.temp.ma.value=parseFloat(document.temp.ma.value)+1; else document.temp.ma.value-=1;'>
</form>
</BODY>
</HTML>


You're welcome in advance...:rolleyes:

pml
03-03-2005, 09:11 PM
Text boxes in forms are always treated as strings by default. That's probably why you didn't get it right. The "parseInt" makes a number of a string and can therefore be used for calculations.

<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>
<BODY>
<form name='temp'>
<input type='text' value=5 id='ma' name='ma'>
<input type='checkbox' id='ma_check' name='ma[]' onClick=' if ( this.checked ) document.temp.ma.value = parseInt(document.temp.ma.value)+1 ; else document.temp.ma.value = parseInt(document.temp.ma.value) - 1;'>
</form>
</BODY>
</HTML>

BasBrouwers
03-03-2005, 09:24 PM
Works like a charm! I didn't know that all values in textboxes where treated like strings. Make's sense though, seeing as they are of type text :D

Thanks again for the help!

Bas

BasBrouwers
03-03-2005, 10:50 PM
So, everything was working fine, I was very happy! Then I tried the following:

make a functin, with two parameters:
function change_required(value, dagdeel)
{
eval("document.jobinplannen."+dagdeel+".value") = parseInt(eval("document.jobinplannen."+dagdeel+".value"))+value;
}

dagdeel is the id of the textfield I want to change the value of.
value is the value to add to the current value of dagdeel

Here's my onClick for the checkbox:

onClick=' if ( this.checked )change_required(1,'ma_f_benodigd'); else change_required(-1,'ma_f_benodigd');'

Nothing happens, the function doesn't even get calles. I just don't get this. Javascript is always giving me troubles.

Bas

glenngv
03-04-2005, 05:15 AM
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function change_required(oChk, sName){
var oField = oChk.form.elements[sName];
oField.value = (oChk.checked) ? parseInt(oField.value, 10) + 1 : oField.value - 1;
}
</script>
</head>
<body>
<form name="temp">
<input type="text" value=5 id="ma" name="ma" />
<input type="checkbox" id="ma_check" name="ma[]" onclick="change_required(this, 'ma')" />
</form>
</body>
</html>
Learn to use the Square Bracket Notation to avoid the inefficient and confusing to use eval method. See my sig for more info.

When text field value will be used for subtraction, multiplication and division, it is not necessary to convert the value to numbers (although it's a good practice for consistency). When used for addition, you need the conversion because the + operator is also used for string concatenation. And when you use parseInt, it is safer to specify the radix 10 to avoid wrong conversions to hexa or octal numbers.

BasBrouwers
03-04-2005, 01:58 PM
Thanks you very much! It's working!
I was wondering what does this piece of code do exactly:

var oField = oChk.form.elements[sName];

Is i to determine the name of the form element that the textfield belongs to? If the checkbox is in another form as the textfield is, would this still work?
Just trying to understand the code, not just use it :)

Bas

glenngv
03-04-2005, 02:56 PM
All HTML controls (input, select, textarea) have the form property that refers to the form the control belongs to. Since the textbox and the checkbox in your form belongs to the same form, doing oChk.form will refer to the form named temp. And every form object has the elements collection which consists of all the HTML controls inside the form. Each element can be accessed by its name or position in the collection. So if you have:

var oField = oChk.form.elements[sName];

the oField variable will have the reference to the text field with name represented by the value of sName.

BasBrouwers
03-04-2005, 09:02 PM
Oke, thank you, that was very helpfull. Still learning javascript and this sort of information really helps me understand why something work.


Bas



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum