...

View Full Version : Changing the value of a field when a check box is ticked



gaz2310
06-05-2006, 11:14 PM
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:


<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:


<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


<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

Beagle
06-05-2006, 11:21 PM
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:



<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" />




<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>

gaz2310
06-05-2006, 11:42 PM
Many thanks for your help, but I am still having problems.

I now have the following code on my page:


<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

Beagle
06-05-2006, 11:57 PM
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.

gaz2310
06-06-2006, 12:20 PM
I'm sorry - i'm annoying you now. I hate being new and a little bit stupid.


<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!

Beagle
06-06-2006, 04:42 PM
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();">

gaz2310
06-06-2006, 07:13 PM
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.


<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>

Beagle
06-06-2006, 08:36 PM
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:



<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" />

gaz2310
06-06-2006, 10:41 PM
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):


<!-- 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:


<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?

gaz2310
06-06-2006, 10:47 PM
Meant to also say - this is the code for the text fields that this script is adding together:


<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.

gaz2310
06-06-2006, 10:48 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum