Check if there are equal fields in a form

Question

Check if there are equal fields in a form

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have a form with 5 selects and I'm trying to check 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 my IF gets 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's own DOM?

javascript jquery

asked by anonymous 29.11.2016 / 15:11

3 answers

Remove border that separates columns from a table Load an element in ajax as the user chooses

score 2 · Answer 1

You could check the value of each option and disable the ones 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><selectname="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>

score 1 · Answer 2

I would 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 dynamically iterated and you may have 5 or 100. The formula will always pick up the iterated select value and assign it to an array that writes the selected values if it has not been previously written. Then you just compare if the amount of values written in this array is equivalent to the amount of select in your selector.

score 0 · Answer 3

It has a much simpler form:

$("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 selects $('select') that do not have a certain id not('#' + id) , in this case, the id of the select that has just been changed, then find all that have an option with the same value .find('option[value="' + valor + '"] and already selected :selected' . Ready.

Here's a fiddle running: link