JavaScript: Distinguish between a Form Property and a Form Field

Question

Given a simple form:

<form id="data" action="">
    <input type="text" name="id">
    <input type="text" name="info">
    <button type="submit" name="ok">
</form>

I can read the properties and form fields as follows:

var data=document.querySelector['form#data'];
alert(data.action);
alert(data['action']);
alert(data.info);
alert(data['info']);
alert(data['id']);
alert(data.id);

Now, for the most part, form['info'] is an alternative for form.info . However I prefer to use form['info'] for form fields and form.info for actual properties.

The question is: in JavaScript, how can I determine whether form['info'] (or form.info ) is a form field or a form property? I know it is from the form above, but how would I know without knowing about a specific form?

Supplementary to that, if I have a form field named the same as a property (such as id above), which takes precedence?

Answer 1

OK, I have the answer.

1. In the case of data['id'] or data.id , the form field takes precedence over the form property. This can be problematic, so it might be safer to use form.getAttribute('id') to be safe.

2. Because of the confusion, it would be better to always use data.elements . That only contains the form's elements, so that's easy.

Answer 2

I will answer the question based on my understanding of your question.

In the code given by you:

<form id="data" action="">
    <input type="text" name="id">
    <input type="text" name="info">
    <button type="submit" name="ok">
</form>

If you do a query selector data=document.querySelector('form#data');

And then if you try to access data.id

Your Question is

• Would the output be the "id attribute of the form" or "the child node/object named id"

• Which one takes the precedence

The output would be the node/object named "id" and not the ID attribute of the form. The purpose of DOM is to traverse the object model tree, hence a node takes preference over an attribute/property.

To know if the returned output is an attribute or not:

• Attribute returns a text. That's the endpoint.
• HTML Element returns an object (which can again be used to traverse the DOM tree)

Answer 3

I think I understand your question: how to determine whether a form property references a standard property of an HTML form element or a form control, eg:

<form name="formName">
  <input name="inputName">

so that:

form.name

is a property of the form that will return a string, whereas:

form.inputName

is a property that will return a form control element (or NodeList for radio buttons).

The short answer is you can't just from the name, since form properties can be shaddowed by same-named form controls, eg

<input type="submit" name="submit">

means you can't call form.submit() because now form.submit references the submit button, not the method.

You might consider ducktyping, so:

var thing = form.blah;
if (typeof thing == 'string' || typeof thing == 'function') {
   // probably a property of the form itself

} else if {thing == form[thing.name]) {
  // probably a form control
}

and so on. But in javascript it's normally not a good idea to do that, far better to just look for the feature you want to use and if available, use it. Say you want to get the value:

if (form.blah && typeof form.blah.value == 'string') {
  // do stuff with form.blah.value
}

But typically you know enough about the form's properties (eg by using suitable naming conventions for controls and properties and avoiding known standard form properties like "submit", "reset", "action", "name" etc.) to not have to do that.

So the bottom line is always use sensible names for form controls that do not clash with standard form property names, then you can tell from the name if it's a form property or control name. One scheme is to always use camel case and two word names, so rather than "name", use "userName" or "employeeName", etc. For submit button, use "submitButton", for reset, use "resetButton", though it's not common to name them.