tick box onchange calculation 1

mthompo · Aug 30, 2006

hi,

on my page is a list of items a user can choose
by way of tick boxes.
when someone ticks a box i would like the number of hours available to them to deacrease by the hours next to the tick box item.
am new to javascript - do i need to put values in hidden
form elements to send to the function?
i get 'this object dosnt support this property' error

function

Code:

function hoursleft() {
   var hoursleft = document.forms["custaddwork"].elements["hoursleft"].value;
   var hours = document.forms["custaddwork"].elements["hours"].value;
   document.forms["custaddwork"].elements["hourslefttot"].value = hoursleft - hours;
}

html

Code:

<tr>
<td class="usersml" bgcolor="#000000"> <div align="center">
<input type="text" name="hourslefttot" value="<%=x_hoursleft%>">
</div></td>
</tr>
<%Do Until rs.eof
' Load Key for record
x_stdworkid = rs("stdworkid")
x_stdworklinkid = rs("stdworklinkid")
x_stdwork = rs("stdwork")
x_stdtime = rs("stdtime")
x_stdworktypeid = rs("stdworktypeid")
%>
<tr> 
<td width="217" bgcolor="#F5F5F5"><span class="mfitsml"><%=x_stdwork%></span></td>
<td width="88" bgcolor="#F5F5F5"><div align="right"><span class="mfitsml"><%=x_stdtime%>hours</span><input type="text" name="hours" value="<%=x_stdtime%>"></div></td>
<td width="75" bgcolor="#F5F5F5"><div align="center"><span class="mfitsml"> 
<%
'standard work check box tick
if x_stdworklinkid <> 0 then
      check="Checked"
else 
     check="Unchecked" 
end if
%>
<input type="checkbox" name="chkboxstd" value="<%=x_stdworkid%>" <%=check%> onChange="hoursleft();"/>
</span></div>
</td>
</tr>
<%  
rs.MoveNext
rowcount = rowcount + 1
Loop
%>

cLFlaVA · Aug 30, 2006

i suggest keeping the value in the input field, where it's supposed to be. you can then simply add or subtract from the total based on whether or not the checkbox is clicked.

something like:

Code:

<input type="checkbox" name="cb1" value="3" onclick="doTotal(this);" />

Code:

function doTotal(cb) {
    var t = document.forms['custaddwork'].elements['hourslefttot'];
    if ( cb ) {
        t.value += parseFloat( cb.value );
    } else {
        t.value -= parseFloat( cb.value );
    }
}

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

theniteowl · Aug 30, 2006

I cannot tell from your code above exactly where the value is that you want to change and which value is the one you subtract so here is a generic example.

Code:

<html>
<head>
<script type="text/javascript">
function hoursleft(whichbox) {
  var totalhours = document.getElementById('totalhoursleft');
  var modhours = whichbox.value;
  if (whichbox.checked) {
    totalhours.value = totalhours.value - modhours;
  }
  else {
    totalhours.value = totalhours.value + modhours;
  }

}
</script>
</head>
<body>
<form name="myform" action="" method="post">
  <input type="text" value="40" id="totalhoursleft"><br>
  Remove 5 hours: <input type="checkbox" id="chkboxstd" value="5" onclick="hoursleft(this)">
</form>
</body>
</html>

Notice that I placed an ID tag in the form fields.
Rather than using document.forms.elements it is better to use the DOM getElementById convention.
In the function call I pass in the object of that field using onclick="hoursleft(this)"
Then in the function I receive the object under the name whichbox and all I have to do to get the value stored there is use whichbox.value.
I also do a test using whichbox.checked to test if the box had been checked or not. If it is checked then it subtracts the value from the totalhours and if it is unchecked it adds the value back. This way if someone removes a check from the box the value goes back appropriately.

I could shorten the code up less than it is but wanted to keep it easier to understand how it is operating.

At my age I still learn something new every day, but I forget two others.

mthompo · Aug 31, 2006

thanks for your replies
i have got something working but all it does is add the number 1 in the textbox totalhours
if i take a tick out of a box it still adds 1 in the box?

my code now looks like

Code:

function hoursleft(whichbox) {
  var totalhours = document.getElementById('totalhours');
  var modhours = document.getElementById('cb1');
  if (whichbox.checked) {
    totalhours.value = totalhours.value - modhours.value;
  }
  else {
    totalhours.value = totalhours.value + modhours.value;
  }

}

<!--this is the total hours available-->
<input type="text" name="totalhours" id="totalhours" value="<%=x_hoursleft%>">

[loop of items starts here]
<!--this is the item hours-->
<input type="text" name="cb1" id="cb1" value="<%=x_stdtime%>">

<!--this is the checkbox for this item-->
<input type="checkbox" name="check" value="<%=x_stdworkid%>" <%=check%> onClick="hoursleft(cb1);">

theniteowl · Aug 31, 2006

What is the value you are placing into the checkbox?

You should post the rendered code after the ASP has run so that we can see what the code looks like to the browser after all the ASP is complete. We cannot see what value ASP is placing into your fields and that might make a difference.

Also, if you have a loop in your ASP that is generating all of these fields dynamically then you are going to have to dynamically change the names of the fields as well or you end up with a bunch of fields having the same name and that is going to screw up your Javascript when you go to reference the fields.

At my age I still learn something new every day, but I forget two others.

mthompo · Aug 31, 2006

hi- see what you mean have changed it so each checkbox/rowtime has its own id

html for one row of the list is below - sorry if thats not enough

Code:

<input type="text" name="totalhours" id="totalhours" value="<%=x_hoursleft%>">
<tr> 
<td width="85" bgcolor="#F5F5F5"><span class="mfitsml">Item 1</span></td>
<td width="217" bgcolor="#F5F5F5"><span class="mfitsml">Air Con not working</span></td>
<td width="88" bgcolor="#F5F5F5"><div align="right"> 

<!--text box for row time-->
<input type="text" name="time1" id="time1" value="1">hours</div></td>
<td width="75" bgcolor="#F5F5F5"><div align="center"><span class="mfitsml"> 

<!--checkbox for row -->         
<input type="checkbox" name="check1" id="check1" value="17" Unchecked onClick="onClick="hoursleft(time1);">
			
</span></div>
</td>
</tr>

just to go over what should be happening

in totalhours there is the hours available for that day.
when someone clicks on a checkbox[check1] it takes the value in textbox[time1] and subtracts it from the value
of totalhours

please let me know if im not being clear

tsuji · Aug 31, 2006

Function can be called quite arbirarily to a large extent, language keyword cannot. It is repeatedly shown with the keywork "this". It should not read casually.

>onClick="hoursleft(cb1);"
[tt]onClick="hoursleft([red]this[/red]);"[/tt]

theniteowl · Aug 31, 2006

You have an error in your input statement

Code:

<input type="checkbox" name="check1" id="check1" value="17" Unchecked [COLOR=red]onClick="[/color]onClick="hoursleft(time1);">

You will need to pass two values in this function anyway so that you can pass the object of the checkbox and the object of the field you need to test.

Code:

<input type="checkbox" name="check1" id="check1" value="17" Unchecked onClick="hoursleft(this,time1);">

And change your function to this:

Code:

function hoursleft(whichbox,whichfield) {
  var totalhoursfld = document.getElementById('totalhours');
  var totalhours = totalhoursfld.value -0;
  var modhours = whichfield.value - 0;

  if (whichbox.checked) {
    totalhoursfld.value = totalhours - modhours;
  }
  else {
    totalhoursfld.value = totalhours + modhours;
  }
}

You have to know which checkbox was clicked so you know whether to add or subtract the value and you need to know which field to pull the value from so I set the function call to pass both values.

In the function I use -0 when setting the values for totalhours and modhours in order to get Javascript to treat them as numerical values rather than text. Otherwise you could end up with the number adding an extra digit rather than adding to the numerical value. Performing a mathematical expression on the value will cast it to a numerical value.

At my age I still learn something new every day, but I forget two others.

mthompo · Aug 31, 2006

thanks very much - this thread has greatly improved my understanding

are whichbox,whichfield functions in their own right?
one thing that ive found hard is understanding
what are variable names and what are function names

mthompo · Aug 31, 2006

while were on the subject have adapted the function
to bring up an alert saying that there are no more hours
how do i get it to undo the last tick and not allow any more ticks?
is it somehting to do with return false?

Code:

function hoursleft(whichbox,whichfield) {
  var totalhoursfld = document.getElementById('totalhours');
  var totalhours = totalhoursfld.value -0;
  var modhours = whichfield.value - 0;

  if (whichbox.checked) {
    totalhoursfld.value = totalhours - modhours;
  }
  else {
    totalhoursfld.value = totalhours + modhours;
  }
  
  if (totalhoursfld.value < 0) {
  javascript:alert('No more hours');
  }
  return false
  
}

cLFlaVA · Aug 31, 2006

what about this:

Code:

function hoursleft(whichbox,whichfield) {
  var totalhoursfld = document.getElementById('totalhours');
  var totalhours = totalhoursfld.value -0;
  var modhours = whichfield.value - 0;
  var newtotal;

  newtotal = (whichbox.checked) ? (totalhours - modhours) : (totalhours + modhours);
  
  if (newtotal < 0)
      alert('No more hours');
  else
      totalhoursfld.value = newtotal;
}

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

mthompo · Aug 31, 2006

that almost does it - but when you tick the box that makes the alert popup it leaves the tick in the box so when you untick, it deducts the hours from the total leaving you with a minus figure

theniteowl · Aug 31, 2006

cLFlaVA's code should work for you.

As to your question about functions vs variables, they are not functions but references to the objects themselves.

For instance the input field named time1 is an object on the page.
If that object has an id tag id="time1" then you can get a reference to that object using:
var myvariablename = getElementById('time1');

This gives you a reference to time1 under the variable name myvariablename. Then it is easy to work with the properties of the time1 object through the reference.
You can get the value of time1 by using myvariablename.value or set the value by saying myvariablename.value = somevalue.

Now the part that is likely causing you the confusion is where the values are passed to the function:

Code:

hoursleft([COLOR=red]this,time1[/color]);"

When you use the word this in the function call (without surrounding quotes) you are passing a reference to the object the function call is inside, in this case the checkbox field.
In your function the reference is assigned to the value whichbox so now whichbox is the variable by which you reference that checkbox field. The name whichbox is arbitrary and has no meaning beyond being a variable.

The second parameter in the function call is the name of the input field time1. If you put that name in quotes then it is passed stricly as text but since it is not in quotes javascript will use it as a reference to the field time1. This just saves you a step in your function.
If you passed the name time1 within quotes like this:

Code:

onClick="hoursleft(this,[COLOR=red]'[/color]time1[COLOR=red]'[/color]);"

Then the parameter would be straight text and received in the function under the variable name whichfield but it would not be a reference to the time1 field, only text.
To make it into a reference then you would have to use something like:

Code:

var myreference = document.getElementById(whichfield);

The variable whichfield contains the text time1 so by using whichfield in the line above you are assigning a reference to the time1 field to the variable myreference.

By not enclosing time1 in quotes in the function call it passes the reference directly to the variable whichfield and saves you the extra step.

At my age I still learn something new every day, but I forget two others.

theniteowl · Aug 31, 2006

Change this section:

Code:

  if (newtotal < 0) {
      alert('No more hours');
      whichbox.checked = false;
  }
  else 
      totalhoursfld.value = newtotal;

At my age I still learn something new every day, but I forget two others.

theniteowl · Aug 31, 2006

In case you do not yet know conditional statements this line may need some explanation:

Code:

newtotal = (whichbox.checked) ? (totalhours - modhours) : (totalhours + modhours);

This is a different form of an if then else statement.

thisvalue = (logical statement) ? valueiftrue : valueiffalse;

For demonstration code I usually use the if then statements as they are easier to read and understand if you are not real familiar with javascript but the conditional statement above is generally the better way to go once you are comfortable with them.

At my age I still learn something new every day, but I forget two others.

mthompo · Aug 31, 2006

i meant to say it adds the figure to the total hours so totalhours are increased - soz

your new code works great - thanks again

i will be coming back to this thread a lot

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

tick box onchange calculation 1

mthompo

Technical User

cLFlaVA

Programmer

theniteowl

Programmer

mthompo

Technical User

theniteowl

Programmer

mthompo

Technical User

tsuji

Technical User

theniteowl

Programmer

mthompo

Technical User

mthompo

Technical User

cLFlaVA

Programmer

mthompo

Technical User

theniteowl

Programmer

theniteowl

Programmer

theniteowl

Programmer

mthompo

Technical User

Similar threads

Part and Inventory Search

Sponsor