Format input value for server side

[Aimery Marsily]

Hi,

I have an input like this :

<input class="tags" type="text" name="keywords" value='["repellat inventore","magni accusamus"]'>

But when sending the form on the server side I get :

[
    {"value":"repellat inventore"},
    {"value":"magni accusamus"}
]

Is it possible to have it the same way as the initial value ? A JSON format :

["repellat inventore","magni accusamus"]

Thanks

[Yair Even Or]

Why can't you transform the data before sending it to the server?

[Aimery Marsily]

Thanks for the quick reply.
It's not that I can't it's that I don't know where to do it within the plugin declaration :

new Tagify(element, {
    delimiters: ',',
    duplicates: false,
    autocomplete: true,
    addTagOnBlur: false
});

I use it in vanilla JS, so each elements with the class .foo uses your plugin and the input value shoud be just the values, as the ones passed in. Is there a callback to transform the actual input values ?

[Yair Even Or]

This isn't related to my plugin, but to your place in the code where you send the data to the server. There you need to transform the data to your required format (probably)

[Aimery Marsily]

Ok i was hoping for a way to just leave the input with the actual values separated by the delimiter. I think you can close the issue then.

[Yair Even Or]

I prefer the developer who implements the solution to take care of value format transformation in their end rather than implementing some solution within Tagify to customize the value's format.

[Erik Gurney]

Having the values passed in as a simple array would be great. This package is great, but having to deal with parsing the values server-side after a form submit was lame.

Either way, minor gripe for what this package offers 😸

[Douglas Miranda]

Example: Form and save when form changes

jQuery(document).ready(function ($) {
  $input = $('#my-form')
    .tagify()
    .on('change', function (e, tagData) {
      if (tagData === undefined) {
        return;
      }
      // string [{"value":"test"}', '{"value":"test2"}] to JSON Object
      var tags = JSON.parse(tagData);
      // Converts into a simple array ["test", "test2"], then convert to string "test,test2"
      var tags_parsed = tags.map(item => item.value).toString();
      
      // Then you can do some ajax post and send the tags_parsed to the server side.
    });
});

https://gist.github.com/douglasmiranda/1c7ddb36eee035687f5f371c77b3ea28

[Lucas Moulin]

For future reference, this is now officially supported by using the originalInputValueFormat option as explained in the README.