Initial value is duplicated and even submitted if deleted

[DarthSonic]

I am using flexdatalist v2.2.4 with ajax url to get list of options.

When using muliple options field and set a default value (for example "PHP" as value of input field) and I am selecting another option (for example "C#") the value submitted ist "PHP,PHP,C#". I see an issue #118 but the bug is not fixed in my opinion.

Further if I delete the initial value "PHP" from the list of selected options it will still be submitted with the form.

[DarthSonic]

You can see similar behaviour when using the "TOGGLE VALUE(S) ON CLICK/TAP" example at http://projects.sergiodinislopes.pt/flexdatalist/

[jovemsabio]

---

Same issue and possible workarround.

For example, if I have the code:

<input type="text" id="countries" name="countries" value="USA" />
<script>
$(document).ready( function () {
   $('#countries').flexdatalist({
       multiple: true
   });
});
</script>

Then even using alert($('#countries').val()). Or at php script for submited form data (server side), the string content shown is: USA,USA.

My opinion is that when the plugin reads a value parameter and the plugin is set to multiple at initialization, it tries to create the appearence as if it was added by the user, then the algorithm do not clear the field before, so duplicating the content. This conclusion comes from the fact that if the value parameter of <input/> is: PHP,Java the resulting value after plugin initialization is: PHP,Java,PHP,Java

For me, to continue using this good and very useful plugin, I created a hidden field which holds the actual value. Then, I set the value of the "real" input at document ready like this:

<input type="hidden" name="countries_hidden" value="Brazil" />
<input type="hidden" name="countries" value="Brazil" />
$(document).ready( function () {
   $('#countries').flexdatalist({
       multiple: true
   });
   $('#countries').val($('#countries_hidden').val()); //Must be after initialization anyway
});

Hope in the future not to have to use this method! ;-)

[jovemsabio]

Different approach to the workarraound

Testing another way to temporarily sove the problem, I wanted a solution which does not make me to create another hidden input field. So if the value is duplicated entirely, it would be ok to set the value attribute of the field to its half. So: If it is: Brazil,USA,Canada It becames duplicated in this way: Brazil,USA,Canada,Brazil,USA,Canada Well, it's just a metter of resetting to the half of this. Bellow a function I wrote which does this:

function flexdatalistSanitizeField(field) {
       var val = field.val().split(',');
       var middle = val.length /2;
       field.val(val.slice(middle).join())
}

Then, after declaring this function somewhere, just call it passing the reference of the field, after initializing flexdatalist on it. Example: flexdatalistSanitizeField($('#countries')); //Using the same field name as the former post.

I tested it and it worked well for me, so I could get rid of the countries_hidden field and stay with the original one with no modifications.

Hope it helps others!