JavaScript Increment/Decrement Form Field Value

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

May 10 '06 #1

Follow Post Reply

13092

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.

May 10 '06 #2

RobG

Stuart wrote:

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

[...]
--
Rob

May 10 '06 #3

RobG

RobG wrote:

Stuart wrote:
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">

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

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.

[...]
--
Rob

May 10 '06 #4

Stuart

"RobG" <rg***@iinet.net.au> wrote in message
news:44***********************@per-qv1-newsreader-01.iinet.net.au...

Stuart wrote:
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">

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.

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

May 10 '06 #5

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 <rg***@iinet.net.au> 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.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

May 10 '06 #6

JavaScript Increment/Decrement Form Field Value

This discussion thread is closed

Similar topics