Dropdown selections unique in repeat group

  • Views Views: 4,279
  • Last updated Last updated:

Navigation

      Access element (+)
      Birthday element
      Button element
      Calculation element
      Captcha element
      Checkbox element
      Colour Picker element
      Count element (+)
      Database join element
      Date element
      Digg element
      Display text element
      Dropdown element
      Facebook Like element
      Field element
      File Upload element
      Folder element
      Google Map element
      Image element
         Image databese join
      Internal id element
      IP element
      J!Date element
      Kaltura element
      Link element
      Notes element
      OpenStreetMap element
      Picklist element
      Radio Button element
      Rating element
      Sequence element
      Slider element
      Tags element
      Textarea element
      Thumbs element
      Time element
      Timer element
      Timestamp element
      Total element
      User element
      User group element
      Video element
      View level element
      YesNo element
      Youtube element
      Akismet validation
      Is Email validation
      Is Not validation
      Is Numeric validation
      Not empty validation
      PHP validation
      Rsa id
  • Disable already used dropdown options in a repeat group​

    Suppose that you have a repeat group which has a Dropdown element of some type, and you want to try to ensure that each repeat row has a unique value selected for the dropdown.

    The three sets of Element Javascript below provide full functionality for this.
    • When a dropdown is loaded it disables any of its Options that are already in use in the repeat group.
    • When a user changes the value of a dropdown, all the Options in all the dropdowns are re-evaluated to disable Options that are in use.
    • The same happens when you delete a row.
    Note: This code is compatible with using pre-defined events to make the dropdown readonly or disabled, and is compatible with Fabrik's Enhanced Dropdowns (which use Chosen).

    On load event​

    Code:
    /* When this element == "", disable select items which have already been set in other repeat group items */
    if (Fabrik.debug) fconsole('load',this.element.id);
    if (this.element.value === "") {
    var selects = this.element.getParent('.fabrikGroup').getElements('.fabrikRepeatGroup___' + this.origId + ' select');
    selects.each(function (el) {
    if (this.element.id !== el.id) {
    var val = el.value;
    if (val !== '') {
    this.element.getElement('option[value="' + val + '"]').setAttribute('disabled', 'disabled');
    }
    }
    }.bind(this));
    }

    On change event​

    Code:
    /* When this element is changed, collect the select items from all matching fields and disable them in other dropdowns */
    if (Fabrik.debug) fconsole('change',this.element.id);
    var values = [];
    var selects = this.element.getParent('.fabrikGroup').getElements('.fabrikRepeatGroup___' + this.origId + ' select');
    selects.each(function (select) {
    var value = select.value;
    if (value !== '' && values.indexOf(value) < 0) {
    values.push(value);
    }
    });
    selects.each(function (select) {
    if (select.getAttribute('readonly') !== 'readonly' && !select.disabled) {
    select.getElements('option').each(function (option) {
    var value = option.value;
    if (!option.selected && value !== '') {
    if (values.indexOf(value) < 0) {
    option.removeAttribute('disabled');
    } else {
    option.setAttribute('disabled', 'disabled');
    }
    }
    });
    jQuery(select).trigger("liszt:updated");
    jQuery(select).trigger("chosen:updated");
    }
    });

    On unload event​

    Code:
    /* When this element is deleted, collect the select items from all other matching fields and disable them in other dropdowns */
    if (Fabrik.debug) fconsole('unload',this.element.id);
    var values = [];
    var selects = this.element.getParent('.fabrikGroup').getElements('.fabrikRepeatGroup___' + this.origId + ' select');
    selects.each(function (select) {
    if (this.element.id !== select.id) {
    var value = select.value;
    if (value !== '' && values.indexOf(value) < 0) {
    values.push(value);
    }
    }
    }.bind(this));
    selects.each(function (select) {
    if (select.getAttribute('readonly') !== 'readonly' && !select.disabled) {
    select.getElements('option').each(function (option) {
    var value = option.value;
    if (!option.selected && value !== '') {
    if (values.indexOf(value) < 0) {
    option.removeAttribute('disabled');
    } else {
    option.setAttribute('disabled', 'disabled');
    }
    }
    });
    jQuery(select).trigger("liszt:updated");
    jQuery(select).trigger("chosen:updated");
    }
    }.bind(this));
Back
Top