What Is The Difference Between Javascript's Getelementbyid() And Getelementsbyname() Functions?

Other than the fact that my brief research tells me the latter will return a collection rather than a a single element with the ID passed. Consider the following code: function val

Solution 1:

<inputtype="text" name="foo"id="bar">
                   ^^^^       ^^

getElementsByName gets elements by their name, getElementById gets the element by its id. There may be many elements on a page with the same name (hence getElementsByName always returns a list of elements), but there is (must) only be one element with a given id (therefore getElementById only returns a single element).

Solution 2:

The GetElementsByName method returns an array, and when you tried to call element.focus() you got an error because there is no focus method on an array. When you get an error in the event handler it won't prevent the form from posting.

If you use GetElementById you should use element to access the element, and if you use GetElementsByName you should use element[0].

Solution 3:

The name attribute is not designed to be unique, while the id attribute is.

<divname="nonUnique" /><divid="unique" />

Solution 4:

To expand a little on the answers already provided, the name attribute was provided early in the days of the browser DOM, to allow the contents of elements in forms to be submitted with reference to that name attribute, so that parameters could be passed to a CGI script at the server side. This dates from before the more modern ability to reference DOM elements for manipulation of such things as styles by JavaScript.

When the DOM was expanded to allow said modern manipulations, the id attribute was added, so that individual elements could be manipulated at will. When you want to perform DOM manipulations, you select elements to be manipulated either via the id attribute, if you're only interested in manipulating a single DOM element, or via the class attribute (suitably set by yourself), if you want to manipulate several elements together in the same manner. In this latter case, you can set the class attribute to multiple values (name strings separated by spaces), so that you can, for example, designate elements to belong to more than one class, and perform manipulations accordingly. You can mix and match id and class attributes practically at will, provided you exercise some care to avoid name clashes.

So, for example, you could have five buttons on your web page, all set to:

class="Set1"

and change the style of all those buttons, first by using a statement such as:

myButtons = document.getElementsByClassName("Set1");

to obtain an array of Element objects corresponding to your buttons, then running the following loop:

for (i=0; i<myButtons.length; i++)
    myButtons[i].style.color="#FF0000";

to change the colour of the text to red. One of those buttons could additionally have an id attribute set to "Special", and you could then do something such as:

ref = document.getElementById("Special");ref.style.backgroundColor = "#FFFF00";

to set the background colour of that one button in the set to yellow, to signal that it's intended for a special function within the set.

In short, use the name attribute for form submissions, and the id and class attributes for referring to elements you intend to perform DOM manipulations upon, or attach event handlers to, etc.

Solution 5:

In order for the form to not be submitted, return false needs to be returned (you said you used the onsubmit handler)

in the second line of your code, because a selection is indeed returned by getElementsByName (it would work with .getElementsByName("test")[0] ) a js error is thrown. The rest of the code is not executed, therefore nothing is returned and the form by-passes the rest of the validation completely.