chris.paschen
Chris Paschen
[this is a follow up to an original topic started in the community forum: http://fabrikar.com/forums/index.ph...own-multi-select-quantity.46282/#post-239400]
I need to restrict a databasejoin dropdown to only allow 3 selections.
Based on several other posts I've added the following JS on the onClick for the element:
That adds an 'alert' to the element whenever the user has more than 3 selected.
However, I need a way to actually prevent the 4th one from being added?
Is there a way to stop values from being added (i.e. when > 2), but still allow items to be un-selected from the list?
NOTE: I have used the PHP validation using:
However, I'd like to have the validation in real-time.
I tried a couple options like:
based on other generic JS code snippets I've seen (trying to make them work with what I think it proper syntax for Fabrik). But this actually causes the script to do nothing (the notification doesn't even work any more).
Any ideas what I could add to the first code (or how to change it) to make it work to limit the max number of selections?
I need to restrict a databasejoin dropdown to only allow 3 selections.
Based on several other posts I've added the following JS on the onClick for the element:
/* enforce only 3 selections */
if(jQuery("#" + this.baseElementId ).val().length>3) {
jQuery("#" + this.baseElementId ).parent().next("div.fabrikErrorMessage").html('<span style="color:red">You must select no more than 3 items.</span>');
}else{
jQuery("#" + this.baseElementId ).parent().next("div.fabrikErrorMessage").html('');
}
if(jQuery("#" + this.baseElementId ).val().length>3) {
jQuery("#" + this.baseElementId ).parent().next("div.fabrikErrorMessage").html('<span style="color:red">You must select no more than 3 items.</span>');
}else{
jQuery("#" + this.baseElementId ).parent().next("div.fabrikErrorMessage").html('');
}
That adds an 'alert' to the element whenever the user has more than 3 selected.
However, I need a way to actually prevent the 4th one from being added?
Is there a way to stop values from being added (i.e. when > 2), but still allow items to be un-selected from the list?
NOTE: I have used the PHP validation using:
$this->setMessage('Too many fiction categories selected');
return count($formModel->formData['ked_books_books___fiction_categories']) < 4;
return count($formModel->formData['ked_books_books___fiction_categories']) < 4;
However, I'd like to have the validation in real-time.
I tried a couple options like:
/* enforce only 3 selections */
var last_valid_selection = null;
if(jQuery("#" + this.baseElementId ).val().length>3) {
$(jQuery('#' + this.baseElementID ).val(last_valid_selection));
jQuery("#" + this.baseElementId ).parent().next("div.fabrikErrorMessage").html('<span style="color:red">You must select no more than 3 items.</span>');
}else{
last_valid_selection = $(jQuery('#' + this.baeElementID ).val());
jQuery("#" + this.baseElementId ).parent().next("div.fabrikErrorMessage").html('');
}
var last_valid_selection = null;
if(jQuery("#" + this.baseElementId ).val().length>3) {
$(jQuery('#' + this.baseElementID ).val(last_valid_selection));
jQuery("#" + this.baseElementId ).parent().next("div.fabrikErrorMessage").html('<span style="color:red">You must select no more than 3 items.</span>');
}else{
last_valid_selection = $(jQuery('#' + this.baeElementID ).val());
jQuery("#" + this.baseElementId ).parent().next("div.fabrikErrorMessage").html('');
}
based on other generic JS code snippets I've seen (trying to make them work with what I think it proper syntax for Fabrik). But this actually causes the script to do nothing (the notification doesn't even work any more).
Any ideas what I could add to the first code (or how to change it) to make it work to limit the max number of selections?