Question

I have some input elements grouped in different divs, and I need to ensure that inputs in the same group do not have the same value.

Example:

<div class="group1">
    <input name="group1a" id="group1a"/>
    <input name="group1b" id="group1b"/>
    <input name="group1c" id="group1c"/>
    <input name="group1d" id="group1d"/>
<div>
<div class="group2">
    <input name="group2a" id="group2a"/>
    <input name="group2b" id="group2b"/>
    <input name="group2c" id="group2c"/>
    <input name="group2d" id="group2d"/>
<div>

All these inputs have some values (user entered) so I want to check if a user enters the same value in any input of group1 (same as group2, group3, …) then system is going to alert to user “you cannot enter any same value in that group”

What is the most efficient way of doing that with jQuery?

Answer 1

You could do:

$('input').blur(function(){
   var curr = this.value;
   if(curr != '' && $(this).siblings('input[value='+curr+']').length > 0){
      alert('you can\'t enter the same value twice in the same group');
      this.value = '';
   }
});

fiddle here http://jsfiddle.net/QRyWQ/