How to find duplicate id's in a form?

2楼-- · 2020-07-06 06:39

By defualt Notepad++ has syntax highlighting that if you double click one word to select it, it will highlight all other occurences of the same word. You are going to have to do some (probably a lot) of manual work renaming things, I mean since fields can't come up with their own unique name.

0人赞添加讨论(0) 举报

我命由我不由天

3楼-- · 2020-07-06 06:40

I've created an example for you to have a look at, it finds all of the duplicate IDs within a form/element on a page and prints the duplicates ID names to the console.

The array contains method was taken from this post.

<html>
    <body>
        <form id="frm">
            <input type="text" id="a" />
            <input type="text" id="b" />
            <input type="text" id="c" />
            <input type="text" id="d" />
            <input type="text" id="e" />
            <input type="text" id="f" />
            <input type="text" id="a" />
            <input type="text" id="h" />
            <input type="text" id="i" />
            <input type="text" id="j" />
            <input type="text" id="d" />
            <input type="text" id="l" />            
        </form>
    </body>
    <script type="text/javascript">
        Array.prototype.contains = function(obj) { //Add a 'contains' method to arrays
            var i = this.length;
            while (i--) {
                if (this[i] === obj) {
                    return true;
                }
            }
            return false;
        }

        frm = document.getElementById('frm'); //Get the form
        els = frm.getElementsByTagName('input'); //Get all inputs within the form

        ids = new Array(els.length); //Create an array to hold the IDs

        for(e = 0; e < els.length; e++) { //Loop through all of the elements
            if(ids.contains(els[e].id)) //If teh array already contains the ID we are on
                console.log('Duplicate: '+els[e].id); //Print 'Duplicate: {ID}' to the console

            ids.push(els[e].id); //Add the ID to the array
        }

    </script>
</html>

The above code will output the following:

Duplicate: a

Duplicate: d

0人赞添加讨论(0) 举报

【Aperson】

4楼-- · 2020-07-06 06:45

One-ish liner using just array methods:

[].map.call(document.querySelectorAll("[id]"), 
     function (e) {
        return e.id;
     }).filter(function(e,i,a) {
        return ((a.lastIndexOf(e) !== i) && !console.log(e));
     })

Logs every duplicate and returns an array containing the ids if any were found.

0人赞添加讨论(0) 举报

时光不老，我们不散

5楼-- · 2020-07-06 06:48

This might help you

Source: Finding duplicate ID’s on an HTML page

Finding duplicate ID’s on an HTML page

Written by Eneko Alonso on May 6, 2011

Looks like sometimes we forgot element ID’s are meant to be unique on a HTML page. Here is a little bit of code I just wrote to find duplicate ID’s on a page (run the code on your browser’s javascript console):

var idList = {};
var nodes = document.getElementsByClassName('');
for (var i in nodes) {
  if (!isNaN(i) && nodes[i].id) {
    idList[nodes[i].id] = idList[nodes[i].id]? idList[nodes[i].id]+1:1;
  }
}
for (var id in idList) {
  if (idList[id] > 1) console.log("Duplicate id: #" + id);
}

0人赞添加讨论(0) 举报

Summer. ? 凉城

6楼-- · 2020-07-06 06:55

There is a Chrome extension named Dup-ID which if you install, you just need to press the button to check duplicated ids. Link of install: https://chrome.google.com/webstore/detail/dup-id-scans-html-for-dup/nggpgolddgjmkjioagggmnmddbgedice

0人赞添加讨论(0) 举报

一纸荒年 Trace。

7楼-- · 2020-07-06 06:57

The http://validator.w3.org/ will be the handy solution. But using jquery you can do something like this:

//See your console for duplicate ids

$('[id]').each(function(){
  var id = $('[id="'+this.id+'"]');
  if(id.length>1 && id[0]==this) {
    console.log('Duplicate id '+this.id);
    alert('duplicate found');
  }
});

Hope this helps.

0人赞添加讨论(0) 举报

How to find duplicate id's in a form?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间