I am try to write some validation script using javascript and prototype.

What I want to do is to loop through all the elements of a form and validate each answer. My code works, BUT the array of DOM elements is unsorted. I would like to sort the elements by their ID.

Here is the my code, which works fine if I ment-out elem.sort(zelementsort);

function zelementsort(a,b) {
    if (a.name > b.name)
        return -1;
    else if (b.name > a.name)
        return 1;
    else 
        return 0;
}   

var elem = document.getElementById('myform').elements;
elem.sort(zelementsort);

for(var i = 0; i < elem.length; i++)
{
     alert("Name = " + elem[i].name);

}

I wonder if the problem might be that some of the elements do not have names. Anyone have another simpler way of sorting an array of DOM elements by their .name?

I am try to write some validation script using javascript and prototype.

What I want to do is to loop through all the elements of a form and validate each answer. My code works, BUT the array of DOM elements is unsorted. I would like to sort the elements by their ID.

Here is the my code, which works fine if I ment-out elem.sort(zelementsort);

function zelementsort(a,b) {
    if (a.name > b.name)
        return -1;
    else if (b.name > a.name)
        return 1;
    else 
        return 0;
}   

var elem = document.getElementById('myform').elements;
elem.sort(zelementsort);

for(var i = 0; i < elem.length; i++)
{
     alert("Name = " + elem[i].name);

}

I wonder if the problem might be that some of the elements do not have names. Anyone have another simpler way of sorting an array of DOM elements by their .name?

• javascript
• arrays
• dom
• sorting
• prototypejs

Share Improve this question Follow edited Dec 29, 2011 at 16:34 Rob W 349k8787 gold badges807807 silver badges682682 bronze badges asked Sep 14, 2009 at 22:21 jeph perrojeph perro 6,4422828 gold badges9696 silver badges126126 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This should do it:

$$('#myForm *[name]').sortBy(function(el){ return el.name; });

This is because sort() is not a method of the DomElementList you retrieve with .elements.

The nice thing is that you can apply the Array.sort method to your DomElementList using a Javascript trick.

Then, you just have to append the nodes again in the DOM, they won't be duplicated but moved.

var myform = document.getElementById('myform'),
    elem = myform.elements;

// call the Array.sort() method on our DomElementList
Array.prototype.sort.call(elem, function()
{
    if (a.name > b.name)
        return -1;
    else if (b.name > a.name)
        return 1;
    else 
        return 0;
});

for(var i = 0; i < elem.length; i++)
{
     myform.appendChild(elem[i]);
}

Implementation without if based on native js sort function.

elements.sort(function(a, b) { return 2 * (a.name > b.name) - 1; })