"RobG" <rgqld@iinet.net.au> wrote in message
news:4461e3c8$0$16036$5a62ac22@per-qv1-newsreader-01.iinet.net.au...[color=blue]
> Stuart wrote:[color=green]
>> 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">[/color]
>
> The language attribute is deprecated, type is required:
>
> <script type="text/javascript">
>
>[color=green]
>> function increment(input_field) {
>> document.forms.tmp.input_field.value =
>> document.forms.tmp.input_field.value + 1;[/color]
>
> 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;
>
>[color=green]
>> 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();
>> }[/color]
>
> 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.
>
>[color=green]
>> </script>
>> </head>
>> <body>
>> <form name="tmp">
>> <p><input type="text" name="temporary" id="temporary" value="0">
>> <a href="#" onClick="javascript
:increment(temporary);">+</a> [/color]
>
> 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>
>
>[color=green]
>> <a href="#" onClick="javascript
:decrement(temporary);">-</a></p>[/color]
>
> <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[/color]
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
