JavaScript Increment/Decrement Form Field Value

05-10-06, 01:13 PM

Stuart

Hi all,

Iv'e got a page that has a mass amount of input fields, all of which require
a decimal figure. To make it easier when it comes to inputting data, I'm
trying to setup + and - links that will increment/decrement the form field
value by 1 when clicked.

I'm using the following code, however when I click on one of the links, I
get the following error -

document.forms.tmp.input_field is null or not an object.

It's as if JavaScript is not reading the parameter being passed through the
function.

Here's the code -

<html>
<head>
<script language="JavaScript">
function increment(input_field) {
document.forms.tmp.input_field.value = document.forms.tmp.input_field.value
+ 1;
document.forms.tmp.input_field.focus();
}
function decrement(input_field) {
document.forms.tmp.input_field.value =
document.forms.tmp.input_field.value - 1;
document.forms.tmp.input_field.focus();
}
</script>
</head>
<body>
<form name="tmp">
<p><input type="text" name="temporary" id="temporary" value="0"> 
<a href="#" onClick="javascript:increment(temporary);">+</a> 
<a href="#" onClick="javascript:decrement(temporary);">-</a></p>
</form>
</body>
</html>

Any help would be appreciated. I just can't seem to see the problem...

Thanks in advance,

Stuart

05-10-06, 01:38 PM

Richard Cornford

Stuart wrote:
<snip>
> I'm using the following code, however when I click on one of the links, I
> get the following error -
>
> document.forms.tmp.input_field is null or not an object.
>
> It's as if JavaScript is not reading the parameter being passed through
> the function.
<snip>
> function increment(input_field) {
> document.forms.tmp.input_field.value =
> document.forms.tmp.input_field.value + 1;
> document.forms.tmp.input_field.focus();
> }

Your - input_field - parameter is irrelevant to the evaluation of the
dot-notation property accessor - document.forms.tmp.input_field.value
-, in that context the 'input_field' is expected to correspond
literally with a property name of the form object.

You should use bracket notation property accessors if you want property
names to be dynamically determined from an expression:-

<URL: http://jibbering.com/faq/#FAQ4_39 >

Richard.

05-10-06, 01:59 PM

RobG

Stuart wrote:
[..]
> document.forms.tmp.input_field is null or not an object.
>
> It's as if JavaScript is not reading the parameter being passed through the
> function.
>
> Here's the code -
>
> <html>
> <head>
> <script language="JavaScript">

The language attribute is deprecated, type is required:

<script type="text/javascript">

> function increment(input_field) {
> document.forms.tmp.input_field.value = document.forms.tmp.input_field.value
> + 1;

Firstly, the name/if of the field is "temporary", there is no field
called 'input_field'.

Secondly, you might consider standardising how you access form controls.

Thirdly, the value of the field is always a string, so you need to
convert it to a number in order to perform addition. The simplest way
to do that is to use the unary '+' operator. Putting it all together,
you get:

var inp = document.forms['tmp'].elements['temporary'];
inp.value = +inp.value + 1;

A shorter alternative for the form control reference is:

var inp = document.tmp.temporary;

> document.forms.tmp.input_field.focus();
> }
> function decrement(input_field) {
> document.forms.tmp.input_field.value =
> document.forms.tmp.input_field.value - 1;
> document.forms.tmp.input_field.focus();
> }

You could write a single function that does both:

function modValue(el, n){
el.value = +el.value + n;
if (el.focus) el.focus();
}

of course you need to ensure that the value is a number before
attempting anything.

> </script>
> </head>
> <body>
> <form name="tmp">
> <p><input type="text" name="temporary" id="temporary" value="0"> 
> <a href="#" onClick="javascript:increment(temporary);">+</a> 

There is no need to use an A element, nor to use 'javascript:' in the
onclick attribute. It is non-standard to reference an element by its
name/ID, pass a reference to the form control using correct syntax:

<span style="cursor:pointer;"
onclick="modValue(document.tmp.temporary, 1);">+</span> 

> <a href="#" onClick="javascript:decrement(temporary);">-</a></p>

<span style="cursor:pointer; "
onclick="modValue(document.tmp.temporary, -1);">-</span></p>

Of course you should probably use a class rather than in-line CSS.

[...]

05-10-06, 02:02 PM

RobG

RobG wrote:
> Stuart wrote:
>
> The language attribute is deprecated, type is required:
>
> <script type="text/javascript">
>>
> Firstly, the name/if of the field is "temporary", there is no field
> called 'input_field'.

Sorry, missed the use of input_field. You could use it in referencing
the form as:

document.forms.tmp.elements[input_field].value

but I think passing a reference rather than the name/id is better anyway.

[...]

05-10-06, 02:23 PM

Stuart

"RobG" <rgqld> wrote in message
news:ac22
[..]
> onclick="modValue(document.tmp.temporary, -1);">-</span></p>
>> Of course you should probably use a class rather than in-line CSS.
>
> [...]
>> --
> Rob

Your modValue() function was just what I needed. Thanks for that. Also, the
problem with the adding/subtracting was going to be my next question...

Thanks for your help,

Stuart

05-10-06, 11:05 PM

Dr John Stockton

JRS: In article <4461e3c8$0$16036$5a62ac22@per-qv1-newsreader-
01.iinet.net.au>, dated Wed, 10 May 2006 22:59:49 remote, seen in
news:comp.lang.javascript, RobG <rgqld> posted :

>Thirdly, the value of the field is always a string, so you need to
>convert it to a number in order to perform addition.

That's virtually a terminological inexactitude, as it appears to happen
- see below. Change "you need to convert it" to "it must be converted"
and all is (in either case) well with the sentence, except for possibly
being superfluous.

> The simplest way
>to do that is to use the unary '+' operator.

Agreed.

> Putting it all together,
>you get:
>
> var inp = document.forms['tmp'].elements['temporary'];
> inp.value = +inp.value + 1;

In my js-quick.htm, using IE4, executing

document.forms['F'].elements['X0'].value++

increments that field numerically. Decrements likewise.

The remaining question is whether that code line is sanctioned by
applicable standards and/or tests in sufficient browsers.

Similar Threads
increment/decrement what is Ruby's style of increment/decrement? I mean like in C++ someVar++ or someVar--
auto increment/decrement I have the following 2 routines to increment/decrement a number displayed in an edit box. The two buttons are U1up and U1dn. Each time the button is pressed the number does...
Increment/decrement question This code: #include <stdio.h> int main(void) { int n1, n2; //two integers n1 = 1; n2 = 1;
Increment and Decrement an integer atomically Hi All How do I do this in standard C++ ? I need to increment and decrement a counter atomically w/o using any locking. How do I do this ? Something along the lines of...
how to increment/decrement by minute...??? Hi, What I'm trying to accomplish with this proc, is to add a row to a table for each minute starting midnight tomorrow, working my way back to this morning. the @startTime...