Check if there are equal fields in a form

Question

I have a form with 5 selects and I’m trying to verify if any of these selects are of the same value.

$('form').submit(function (event) {
    var $commitment = $("[name='commitment']").val();
    var $proActivity = $("[name='proActivity']").val();
    var $superation = $("[name='superation']").val();
    var $teamWork = $("[name='teamWork']").val();
    var $planningAndOrganization = $("[name='planningAndOrganization']").val();

    Object.prototype.in = function () {
        for (var i = 0; i < arguments.length; i++)
            if (arguments[i] == this) return true;
        return false;
    }

But when I need to validate mine IF becomes gigantic;

    if ($commitment.in($proActivity, $superation, $teamWork, $planningAndOrganization) ||
        $proActivity.in($commitment, $superation, $teamWork, $planningAndOrganization) ||
        $superation.in($commitment, $proActivity, $teamWork, $planningAndOrganization) ||
        $teamWork.in($commitment, $proActivity, $superation, $planningAndOrganization) ||
        $planningAndOrganization.in($commitment, $proActivity, $superation, $teamWork)) {
        $('.alert').show();

        return false;
    }

Is there any way to do this check using the form DOM itself?

Answer 1

You could check the value of each option and disable those that have the same value, so the user could only add different options:

$("form > select").change(function() {
  $("form > select > option").prop("disabled", false);
  var elem = $("form > select").not("[name='" + $(this).attr('name') + "']");
  for (var i = 0; i < elem.length; i++) {
    var options = document.getElementsByName(elem[i].name)[0].childNodes;
    for (var j = 0; j < options.length; j++) {
      if ($(this).val() == options[j].innerHTML) {
        options[j].disabled = true;
      }
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select name="commitment">
    <option></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <select name="proActivity">
    <option></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <select name="superation">
    <option></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</form>

Answer 2

I’d do it this way:

Example:

function validSelectsValues() {
    var domSelects = 'Seus selects aqui';
    var selected = [];
    $(domSelect).each(function() {
        if($.inArray($(this).val(), selected)) {
            continue;
        }
        $.merge(selected, $(this).val());
    });

    return $(select).size() == $(domSelects).size();
}

This way, the number of selects will be iterated dynamically and you can have 5 or 100. The formula will always take the iterated select value and assign it to an array that saves the selected values if it was not previously saved. Then you can compare whether the amount of values written in this array is equivalent to the amount of select existing in your selector.

Answer 3

It has a much simpler shape:

$("select").change(function() {
   var id =  $(this).attr('id');
   var valor = $(this).val();
   var selects = $('select').not('#' + id).find('option[value="' + valor + '"]:selected');
   if (selects.length > 0) {
      console.log('já selecionado');
   }
});

In the example, the selector does the following:
Find all the selects $('select') that nay have a certain id not('#' + id), in this case, the id of the select that has just been changed, then I find everyone who has an option with the same value .find('option[value="' + valor + '"] and are already selected :selected'. Ready.

Here a fiddle running: https://jsfiddle.net/06tatn2n/