Finding if there is a duplicate name attribute

Question

Let's say I have the following;

<input type="text" id="1" name="1" value="" />
<input type="text" id="2" name="2" value="" />
<input type="text" id="3" name="3" value="" />
<input type="text" id="4" name="2" value="" />

I am trying to have a function that will be able to figure out if there is an attribute with the same name.

So for this example, a red flag will come up that id="4" has a duplicate name attribute.

I know I have to do something like this, but I may be beating around the bush here. What do you guys think?

function findDuplicates(name) {
    var found = 0;

    $("input").each(function() { 
         if($(this).attr('name') == name)
            found++;
    });

    return found;
}

If you're asking if there's something built into JS that does this, there is not. You have to build a function yourself. This isn't a very good question as it stands, as you've not shown what you've tried. — Codeman
– Codeman, Commented Feb 18, 2015 at 23:44
@Pheonixblade9 what about what I have up there now? Can you see a more practical method of doing it or will that suffice? — bryan
– bryan, Commented Feb 18, 2015 at 23:54
Looks fine for a basic method to me. I would create an array of jQuery objects though, the jQuery DOM access gets expensive when you do it in inner loops like that. — Codeman
– Codeman, Commented Feb 18, 2015 at 23:56

score 5 · Accepted Answer · 2015-02-19 00:15:19Z

5

Try jQuery attribute selector:

if(1 < $('input[name=2][type=text]').length) {
    //duplicate
}

So your function will look like:

function findDuplicates(name) {
    return $('input[name='+ name +']').length;
}

EDIT

With plain JS:

function findDuplicates(name) {
    return document.getElementsByName(name).length;
}

edited Feb 19, 2015 at 0:15

answered Feb 18, 2015 at 23:55

user2575725

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Over a year ago

Just for completeness if somebody would want to do it without jQuery: document.getElementsByName(name).length would provide the same functionality.

Michael Podrybau · Accepted Answer · 2015-02-18 23:57:28Z

0

Make an empty div somewhere, let's say I've given my div an id of "return_value".

<script>
function validate(){
    var name1 = document.getElementById("1").value;
    var name2 = document.getElementById("2").value;
    var name3 = document.getElementById("3").value;
    var name4 = document.getElementById("4").value;

    var error = '';

    error = (name1 == name2 || name1 == name3 || name1 == name4 || name2 == name3 || name2 == name4 || name3 == name4) ? 'Duplicate Entry!' : 'Data OK!';

    getElementById("return_value").innerHTML = error;

}   
</script>

You just make your form onsubmit call the Javascript function to do the comparison, if you want to actually submit the form if the data is valid, you can do that using AJAX. Previous poster is correct in that it's difficult to answer this without more info on what specifically you are attempting to do.

answered Feb 18, 2015 at 23:57

Michael Podrybau

1657 bronze badges

3 Comments

sebnukem Over a year ago

while technically correct it's a terrible answer: it doesn't scale.

Michael Podrybau Over a year ago

The OP didn't ask for a scaling solution. He said "I have this" and listed 4 inputs. A quick and dirty question gets a quick and dirty answer.

bryan Over a year ago

I appreciate the time, but it was just an example. Would definitely need it for any amount of elements. I should have been more clear.

kidA · Accepted Answer · 2015-02-19 00:10:27Z

0

var found = 0;
var array = new Array(); //create new array

$( "input[type=text]" ).each(function( index ) {
    var name = $(index).attr('name'); //get name of current element
    if(array.indexOf(name) == -1) //check if name doesn't exist in array
    {
      array.push(name); //if true, add it to the array
    } else {
      found++; //if it exists, increment found
      var duplicate = $(index).attr('id'); //get the id of the current element
      console.log('Input with Id = ' + duplicate + ' has a duplicate name attribute');
    }


});

answered Feb 19, 2015 at 0:10

kidA

1,3871 gold badge9 silver badges20 bronze badges

Comments

martinedwards · Accepted Answer · 2015-07-22 11:51:15Z

0

If you minus 1 from the length you could return a 0 for no duplicates.

I'd also pass in the element and the attribute name for full reusability.

function hasDuplicates(el, attr, value) {
    return $(el + '[' + attr + '=' + value + ']').length - 1;
}

answered Jul 22, 2015 at 11:51

martinedwards

5,8651 gold badge36 silver badges37 bronze badges

Comments

TroySteven · Accepted Answer · 2020-01-30 20:42:28Z

The other answers requires that you know the name of the attribute you are trying to find which doesn't make sense, if he knew the name of the input field he could just view source in the browser and see if 2 elements with the same name are found.

Use the following code, you can copy and paste it in your browser's console window:

var found = 0;
var array = new Array(); //create new array

$("input[type=text]").each(function( index ) {
    var name = $(index).attr('name'); //get name of current element
    if(array.indexOf(name) == -1) //check if name doesn't exist in array
    {
         array.push(name); //if true, add it to the array
    } else {
         found++; //if it exists, increment found
         var duplicate = $(index).attr('name'); //get the name of the duplicate element
         console.log('Input with Name => ' + duplicate + ' has a duplicate name attribute');
    }
});

Collectives™ on Stack Overflow

Finding if there is a duplicate name attribute

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related