Restricting user input without "disabled"

[Jeremy Langworthy]

Hi

I have two "totals" inputs whose values are dynamically calculated.
For obvious reasons I don't want users to be able to edit the
information in these. However, I do want this total passed to the next
page so I can store it. When I set the input to "disabled" it does not
pass it's value. Is there another way I can do this?

I was thinking about using an onFocus event to set the focus to
another field but is this the best option? Any help appreciated.

cheers

Jeremy

 

[Paul Wellner Bou]

Hi Jeremy,

you can do this disabling the field and creating another
hidden field containing the same value.

Or you can - if the total sum is calculated with values
of the other fields - calculate the sum later.

Or, another possibility which should work is putting
this into the submit button:

onclick="document.getElementById('idOfTheDisabledField').disabled = 'false';

Greetz
Paul.

 

[Paul Wellner Bou]

Why the use of getElementById when you can make it work in any browser that

supports forms?

Actually, I don't know why. Because I always use getElementById,
the force of habit. Is there any reason why the other way is better?
Ok, you don't have to assign an ID to the input.

If I use forms I am used to write document.forms['name_or_index']...
But its exactly the same, or is there a difference?
Which of those ways is the recommended one by the W3C?
(Or ECMA, but thats DOM I think)

Regards,
Paul.

 

[Lasse Reichstein Nielsen]

Actually, I don't know why. Because I always use getElementById,
the force of habit. Is there any reason why the other way is better?

The document.forms collection is supported in all browsers since
Netscape 2, while getElementById is only supported in modern browsers
(IE 5+,Mozilla, Opera 4+ (at least)). Both are in the W3C DOM.

If I use forms I am used to write document.forms['name_or_index']...

Good! I always recommed using that instead of the shorthand. To get an
element, you write
document.forms['formName'].elements['elemName']
or
document.forms.formName.elements.elemName
(I prefer the former, to keep the namespaces separate.)

Most browsers accept some shorthands for both the forms and elements
collections:
document.formName.elemName
or (notably IE)
formName.elemName
(i.e., window.formName.elemName)
None of these shorthands are part of the W3C DOM specification, so
it is safer to write write it all out.

But its exactly the same, or is there a difference?
Which of those ways is the recommended one by the W3C?

both document.getElementById and document.forms are W3C DOM.
The getElementById is DOM Core, while document.forms is DOM HTML
(Core is a W3C Recommendation since Nov 13, 2001, while DOM HTML
was only made a recommendation in January 2003, but now they are
equal).

The difference is in browser support. Using the forms collection
will work in all browsers, even the old ones.

(Or ECMA, but thats DOM I think)

It is.

/L

 

[Richard Cornford]

Most browsers accept some shorthands for both the forms and
elements collections:
document.formName.elemName
or (notably IE)
formName.elemName
(i.e., window.formName.elemName)
None of these shorthands are part of the W3C DOM
specification, so it is safer to write write it all out.

<snip>

While non of these shorthand versions are specified, the HTML DOM level
2 specification does appear to allow a short hand of referring to the
element as a named property of the form object:-

FormObject['elemName']

- or -

FormObject.elemName

- as the spec describes the form element as <quote> The FORM element
encompasses behavior similar to a collection and an element. It provides
direct access to the contained form controls as well as the attributes
of the form element.</quote>.

I, like you, prefer to use the longer form and access via the elements
collection using:-

document.forms['formName'].elements['elName']

- for exactly the same reasons of code clarity (and universal browser
support), and if it will be a problem that that form resolves slightly
slower than a shortcut form then that can usually be overcome by caching
a reference to the elements collection and subsequently referring to
named elements relative to that.

var els = document.forms['formName'].elements;
for(var c = 0;c < 10000;c++){
els['elName'+c].value = ''; //clear 10000 consecutively named
//elements without resolving the
//form object or its elements
//collection for each.
}

Richard.

 

[Grant Wagner]

Hi

I have two "totals" inputs whose values are dynamically calculated.
For obvious reasons I don't want users to be able to edit the
information in these. However, I do want this total passed to the next
page so I can store it. When I set the input to "disabled" it does not
pass it's value. Is there another way I can do this?

I was thinking about using an onFocus event to set the focus to
another field but is this the best option? Any help appreciated.

cheers

Jeremy

While all the information provided in response to this post was helpful, I
think everyone missed the most important point to make. Please do not rely
on any of the client-side code provided to "protect" these values from
being changed by the user. There are any number of things that a user can
do to submit "fake" values to your server. Your server-side processing
should ensure that the totals or other information passed to it are
rational and reasonable.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html