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 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing the value of a field when a check box is ticked

    Hello

    Firstly my apologies for being such a newbie and not really having much of a clue - this is my first post - trying to learn JavaScript right now.

    Okay, the problem - I have a form and I want the value of a field to change if a checkbox is ticked. This is in the header:

    Code:
    <script type="text/javascript">
    
    <!-- Code for entering the values into the form by checking the boxes -->
    if (document.autoSumForm.chkownDomain.checked) {
    document.autoSumForm.ownDomain.value = "50";
    }
    else {
    document.autoSumForm.ownDomain.value = "0";
    }
    <!-- End of check box code -->
    
    </script>
    this is the check box code:

    Code:
    <input name="chkownDomain" type="checkbox" value="chkownDomain">
    and this is the form where the value should be 50 if the box is checked and 0 if it is not

    Code:
    <input type=text name="ownDomain" value="" onFocus="startCalc();" onBlur="stopCalc();">
    The startCalc part is something to do with the end result - I will be adding a load of values together to give a subtotal.

    I have had a good look aroud the internet and that is how I came across this site - found a good post from about a year ago - but the code had probs at the start and the working version wasn't posted at the end and I can't seem to get it to work.

    Hope you can help - any help really is appreciated.

    Thanks - Gaz

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    You attempting to run code in the head that requires the body to be in existence. During reading the head, the body doesn't exist at all.

    So what do you need? Either you need to only change the value of the textbox AT THE TIME the checkbox is clicked, or you need the value of the textbox to be set to something by default, AT PAGE LOAD based on the current value of the checkbox:

    Code:
    <script type="text/javascript">
    function handler_checkboxClicked(p_checked)
    {
      if  (p_checked)
        document.getElementById("t").value = "Clicked!";
      else
        document.getElementById("t").value = "Un-Clicked!";
    
      // OR: document.getElementById("t").value = (p_checked ? "Clicked!" : "Un-Clicked!";
    }
    </script>
    <input type="checkbox" onchange="handler_checboxClicked(this.checked);" />
    <input type="text" id="t" />
    Code:
    <input type="checkbox" id="c" />
    <input type="text" id="t" />
    <script type="text/javascript">
    if (document.getElementById("c").checked)
      document.getElementById("t").value = "CHECKED!";
    else
      document.getElementById("t").value = "UN-CHECKED!";
    
    // OR: document.getElementById("t").value = (document.getElementById("c").checked ? "CHECKED!" : "UN-CHECKED!");
    </script>

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks for your help, but I am still having problems.

    I now have the following code on my page:

    Code:
    <script type="text/javascript">
    document.getElementById("ownDomain").value = (document.getElementById("chkownDomain").checked ? "50" : "0");
    </script>
    <input name="chkownDomain" type="checkbox" value="chkownDomain">
    But still nothing is working - what have I done wrong?

    Many thanks again for your help - Gaz

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    You copied my code improperly and failed to grasp what I said.

    Your script is attempting to access something that doesn't exist yet, namely the element with the ID "chkownDomain".

    So, you either need a function so that it only runs during user input (which means everything is loaded) or you need it to run immediately after all entities required have been loaded, which means putting the script AFTER the related markup.

  • #5
    New Coder
    Join Date
    Jun 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry - i'm annoying you now. I hate being new and a little bit stupid.

    Code:
        <td>Your Website</td>
        <td><input name="chkownDomain" type="checkbox" value="chkownDomain">	
            You have your own domain name</td>
        <td><input type=text name="ownDomain" value="" onFocus="startCalc();" onBlur="stopCalc();">
    	
    	<script type="text/javascript">
    	document.getElementById("ownDomain").value = (document.getElementById("chkownDomain").checked ? "50" : "0");
    	</script>
    I have put the code after the checkbox and text field, but still does not seem to work. I know it must seem obvious to you but I can't see what is wrong. Again, really appreciate any help I can get - thank you!

  • #6
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    You're not stupid or annoying. You asked me what you did wrong and I told. My apologies for being harsh, just trying to point you in the right direction.

    You're using getElementById to find your checkbox but your fields but they have no ID:

    <input id="chkownDomain" name="chkownDomain" type="checkbox" value="chkownDomain">

    <input id="ownDomain" type=text name="ownDomain" value="" onFocus="startCalc();" onBlur="stopCalc();">

  • #7
    New Coder
    Join Date
    Jun 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, thank you.

    Still not working though. It is now putting the 0 in the field, but this does not change to a 50 when i check the box.

    Code:
        <td>Your Website</td>
        <td><input id="chkownDomain" name="chkownDomain" type="checkbox" value="chkownDomain">	
            You have your own domain name</td>
        <td><input id="ownDomain" type=text name="ownDomain" value="" onFocus="startCalc();" onBlur="stopCalc();">
    	
    	<script type="text/javascript">
    	document.getElementById("ownDomain").value = (document.getElementById("chkownDomain").checked ? "50" : "0");
    	</script>

  • #8
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Again, please read responses to your questions carefully.

    The code you have in place only works for the page loading. If you want to change the value in the text box everytime the checkbox is clicked you need to write a function, which would be the first example of the two that I gave, reposted here for convenience:

    Code:
    <script type="text/javascript">
    function handler_checkboxClicked(p_checked)
    {
      if  (p_checked)
        document.getElementById("t").value = "Clicked!";
      else
        document.getElementById("t").value = "Un-Clicked!";
    
      // OR: document.getElementById("t").value = (p_checked ? "Clicked!" : "Un-Clicked!";
    }
    </script>
    <input type="checkbox" onchange="handler_checboxClicked(this.checked);" />
    <input type="text" id="t" />

  • #9
    New Coder
    Join Date
    Jun 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    YAY!!! It works - thank you soooooo much. I can actually sleep now!

    Here is the code for anyone who wants it (know this always helps me out when i'm trawlling the forums):

    Code:
    <!-- START OF: You have your own domain name -->
    	<td><script type="text/javascript">function handler_checkboxClicked(p_checked)
    		{ if (p_checked) document.getElementById("ownDomain").value = "50"; else document.getElementById("ownDomain").value = "0"; } </script>
    	<input id="checkboxOwnDomain" type="checkbox" onchange="handler_checkboxClicked(this.checked);" />You have your own domain name</td>
        <td><input id="ownDomain" type=text name="ownDomain" value="" onFocus="startCalc();" onBlur="stopCalc();">
    <!-- END OF: You have your own domain name -->
    One problem now though, the code that adds up the values of the fields with the numbers in no longer works. This is the code:

    Code:
    <script type="text/javascript">
    
    <!-- Working out the totals -->
    function startCalc(){
      interval = setInterval("calc()",1);
    }
    function calc(){
      one = document.autoSumForm.ownDomain.value;
      two = document.autoSumForm.updateSelf.value; 
      three = document.autoSumForm.secPay.value; 
      four = document.autoSumForm.caraSale.value; 
      document.autoSumForm.webTotal.value = (one * 1) + (two * 1) + (three * 1) + (four * 1);
    }
    function stopCalc(){
      clearInterval(interval);
    }
    //  End -->
    </script>
    and it was placed in the HEAD of the document. Worked fine when manually inputting the numbers, but now that i click a check box to put the numbers in it no longer subtotals the values in the webTotal field. What's happened?

  • #10
    New Coder
    Join Date
    Jun 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Meant to also say - this is the code for the text fields that this script is adding together:

    Code:
    <input id="ownDomain" type=text name="ownDomain" value="" onFocus="startCalc();" onBlur="stopCalc();">
    I suspect it is something to do with the onFocus part of this - as the user in not clicking in the field, they are clicking a checkbox.

  • #11
    New Coder
    Join Date
    Jun 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wait, i just answered my own question - put the onFocus tags onto the checkboxes and its worked. Thanks anyway!

    I'm sure I'll be back soon!

    Thank you - Gaz


  •  

    Posting Permissions

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