jQuery form validation - get values from all select elements on page and make sure there aren't any duplicates

Question

Hopefully this should be quite a quick one!

I have a list of <select> elements on my page. Each of these drop-downs is a list of booking times for an online parents evening booking system.

Each select looks like this:

<select class="appointments" id="14" name="appointments[]">
    <option>.. Select:</option>
    <option value="1">[ 4:00 ]</option>
    <option value="2">[ 4:05 ]</option>
    <option value="3">[ 4:10 ] Eliza Fox</option>
    <option value="4">[ 4:15 ]</option>
    <option value="5">[ 4:20 ]</option>
    <option value="6">[ 4:25 ] diane davison</option>
    <option value="7">[ 4:30 ]</option>
    <option value="8">[ 4:35 ]</option>
    <option value="9">[ 4:40 ]</option>
    <option value="10">[ 4:45 ]</option>
</select>

Depending on who has booked and who hasn't. The value integers are the booking slot specific to that time.

I don't want parents to be able to book two appointments at the same time, so I was thinking I could use jQuery to get an array of the value of each <select> element, then see if there are any duplicates.

If duplicates are found, I'd like to stop the form from being submitted and display an alert.

Thanks in advance,

See also http://stackoverflow.com/questions/2419114/using-jquery-how-can-i-check-that-a-collection-of-input-elements-have-unique-va — The Nail, Mar 08 '12 at 22:58

score 2 · Answer 1 · edited Jun 18 '13 at 15:33

2

Use this function

if it returns false then there's a duplicate ..

function validateTimes(){
  var appointmentsArray=[];
  $(".appointments").each(function(){       
     if( $.inArray( $(this).val() , appointmentsArray ) > -1 ){
        return false;
     }
  } );
  return true;
}

edited Jun 18 '13 at 15:33

khr055

28,690
16
36
48

answered Mar 08 '12 at 22:42

The Nail · Accepted Answer · 2012-03-08T23:01:52.210

1

I think this would be very JQuery-ish:

function checkInput() {
   $selects = $('select');
   numSelects = $selects.length;
   numUnique = $.unique($selects.map(function(){return $(this).val()})).length;

   if (numUnique < numSelects) {
       window.alert("Duplicates!");
       return false;
   }

   return true;
}

edited Mar 08 '12 at 23:01

answered Mar 08 '12 at 22:53

The Nail

8,355
2
35
48

1

Maybe you can use something like `$('select).filter(function(){....})` to filter out the ones with 'remove' values. – The Nail Mar 08 '12 at 23:17

score 1 · Answer 3 · answered Mar 08 '12 at 23:14

Maybe this is a bit more complicated but what it does is it checks for time duplicates instead of value duplicates. Don't know how useful this will be but here you go:

var isDup = function() {

    var $options = $('select').find('option'),
        opts = [],
        dup = false;

    $options.each(function() {
        // Regex could be better, matches 99:99 for example...
        var value = $(this).text().match(/\d+:\d+/);
        if (!~$.inArray(String(value), opts)) {
            opts.push(String(value));
        } else {
            dup = true;
            return false;
        }
    });

    return dup;
};

You can use it like this http://jsfiddle.net/elclanrs/mg734/. It will return isDup = true because the last option is has a time duplicate even though the name is different. Try removing that last option and isDup will turn false.

jQuery form validation - get values from all select elements on page and make sure there aren't any duplicates

3 Answers3