Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing value of text field through checkbox

    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>
    Last edited by BasBrouwers; 03-03-2005 at 08:39 PM.

  • #2
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Change them to numbers first:
    Code:
    <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...

  • #3
    pml
    pml is offline
    New Coder
    Join Date
    Mar 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hopefully this is what your're looking for...

    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>

  • #4
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Thanks again for the help!

    Bas

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    <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.

  • #7
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oke, thank you, that was very helpfull. Still learning javascript and this sort of information really helps me understand why something work.


    Bas


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •