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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post

    Change text field value upon checkbox clicking

    Hi,

    I have a text field with a number value in it. Let's call it CreditsLeft.
    Below, I have checkboxes, the visitor checks these boxes and selects some services.

    1- When a checkbox is checked, I want to decrease (or increase when unchecked) the CreditsLeft value by one.

    2- What if I want a service decrease by one and another service by 2 or another 3?


    How can I do that?

    Thanks,
    Guvenc

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Cal(obj,id){
     var tar=document.getElementById(id);
     if (obj.checked){
      tar.value=parseFloat(tar.value)+parseFloat(obj.value)
     }
     else {
      tar.value=parseFloat(tar.value)-parseFloat(obj.value)
     }
    }
    //-->
    </script></head>
    
    <body>
    <input id="fred" value="100" ><br>
    <input type="checkbox" name="" value="20" onclick="Cal(this,'fred');">
    <input type="checkbox" name="" value="30" onclick="Cal(this,'fred');">
    <input type="checkbox" name="" value="2" onclick="Cal(this,'fred');">
    </body>
    
    </html>

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    That solves the problem. Many thanks for this quick reply. You are great!

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    Want to add some control over this:
    If the credits is below zero, I want to alert the visitor.

    Following code works as I want, but it displays -1 before sending the alert. How can I prevent the -1 from being displayed?



    function Cal(obj,id){
    var tar = document.getElementById(id);
    if (obj.checked){
    tar.value = parseFloat(tar.value) - parseFloat(obj.value);
    if (tar.value < 0) {
    alert("No credits left");
    tar.value = 0;
    obj.checked = false;
    return false;
    }
    }
    else {
    tar.value = parseFloat(tar.value) + parseFloat(obj.value);
    }
    }

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Cal(obj,id){
     var tar=document.getElementById(id);
     var val=0
     if (obj.checked){
      val=parseFloat(tar.value)+parseFloat(obj.value);
     }
     else {
      val=parseFloat(tar.value)-parseFloat(obj.value);
     }
     if (val<0){
      alert('insufficent funds');
      obj.checked=false;
      return;
     }
     tar.value=val
    }
    //-->
    </script></head>
    
    <body>
    Want to add some control over this:
    If the credits is below zero, I want to alert the visitor.
    
    Following code works as I want, but it displays -1 before sending the alert. How can I prevent the -1 from being displayed?
    <input id="fred" value="100" ><br>
    <input type="checkbox" name="" value="20" onclick="Cal(this,'fred');">
    <input type="checkbox" name="" value="-130" onclick="Cal(this,'fred');">
    <input type="checkbox" name="" value="2" onclick="Cal(this,'fred');">
    </body>
    
    </html>

  • #6
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    How many times do I have to thank you?

  • #7
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    I have a textbox that is enabled upon clicking a checkbox.
    If I use the method above, the credits are calculated even if the visitor does not type anything into the text field. I need the credits to be decreased by 1 if the visitor types anything into the text field. What should I do?


    function toggleCheckbox2 () {
    if (document.AddBirthday.bs.checked) {
    document.AddBirthday.bscustom.disabled = false;
    } else {
    document.AddBirthday.bscustom.disabled = true;
    }
    }

    function Cal(obj,id){
    var tar = document.getElementById(id);
    var val = 0;
    if (obj.checked){
    val = parseFloat(tar.value) - parseFloat(obj.value);
    } else {
    val = parseFloat(tar.value) + parseFloat(obj.value);
    }
    if (val < 0){
    alert('No credits left.');
    obj.checked=false;
    return;
    }
    tar.value = val;
    }

    <input type="checkbox" name="bs" value="1" onClick="javascript:Cal(this,'fred'); toggleCheckbox2();">
    before&nbsp;
    <input type="text" class="inputbox" name="bscustom" size="2" maxlength="2" value="<?php echo "$value"; ?>">
    days&nbsp;


  •  

    Posting Permissions

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