I have a front end entry form that allows users to update their entry. I have created a tag field using selectize.js that displays the existing tags for that entry, allows the user to enter their own tags and suggests tags to them as they type. However, I have no idea how to go about the following:
- Limit the number of tags that can be added to 5
- Ensure that the suggested tags are only from a particular tag group
- Update the entry with the new tag list when the form is submitted
Here is my code:
{# Require that a user is logged in to view this form. #}
{% requireLogin %}
{% macro errorList(errors) %}
{% if errors %}
{{ ul(errors, {class: 'errors'}) }}
{% endif %}
{% endmacro %}
{% set currentEntryId = craft.app.request.getParam('id') %}
{% set entryQuery = craft.entries().id(currentEntryId) %}
{% set entry = entryQuery.one() %}
{% set authorId = currentUser.id %}
<div class="intro-section posts-intro wf-section">
<div class="div-block-14">
<h1 class="grid-heading">{{ entry.title }}</h1>
<div class="request-a-listing-form-wrapper account-access-form-wrapper">
{% if entry.authorId == authorId %}
<form id="update-entry-form" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
{{ csrfInput() }}
{{ actionInput('entries/save-entry') }}
{{ redirectInput('artists/{slug}') }}
{{ hiddenInput('enabled', '8') }}
{{ hiddenInput('entryId', currentEntryId) }}
<div class="form-item-wrapper">
<label for="title" class="field-label">Name*</label>
{{ input('text', 'title', entry.title, {
id: 'title',
type: 'text',
class:'form-field account-access-form-field w-input',
maxlength: '256',
name: 'name',
required: true,
}) }}
{{ _self.errorList(entry.getErrors('title')) }}
</div>
<div class="form-item-wrapper">
<label for="websiteUrl" class="field-label">Website URL</label>
{{ input('text', 'fields[websiteUrl]', entry.websiteUrl, {
id: 'websiteUrl',
type: 'text',
class:'form-field account-access-form-field w-input',
name: 'websiteUrl',
required: false,
}) }}
{{ _self.errorList(entry.getErrors('websiteUrl')) }}
</div>
<div class="form-item-wrapper">
<label for="shopUrl" class="field-label">Shop URL</label>
{{ input('text', 'fields[shopUrl]', entry.shopUrl, {
id: 'shopUrl',
type: 'text',
class:'form-field account-access-form-field w-input',
name: 'shopUrl',
required: false,
}) }}
{{ _self.errorList(entry.getErrors('shopUrl')) }}
</div>
<div class="form-item-wrapper">
<label for="townCity" class="field-label">Town / City</label>
{{ input('text', 'fields[townCity]', entry.townCity, {
id: 'townCity',
type: 'text',
class:'form-field account-access-form-field w-input',
name: 'townCity',
required: false,
}) }}
{{ _self.errorList(entry.getErrors('townCity')) }}
</div>
<div class="form-item-wrapper">
<label for="briefDescription" class="field-label">Brief Bio</label>
{{ input('text', 'fields[briefDescription]', entry.briefDescription, {
id: 'townCity',
type: 'text',
class:'form-field account-access-form-field w-input',
name: 'briefDescription',
required: true,
}) }}
{{ _self.errorList(entry.getErrors('briefDescription')) }}
</div>
<div class="tags-container" >
<label for="input-tags" class="field-label">Tags</label>
<input name="fields[artistTagField][]" style="max-width: 400px;" type="text" id="input-tags" value="
{% for tagItem in entry.artistTagField %}
{{ tagItem }}
{% endfor %}
" />
</div>
<div class="mb-6">
<button style="margin-top: 40px;" type="submit" class="submit-button w-button">Publish</button>
</div>
</form>
<script>
$("#input-tags").selectize({
delimiter: ",",
persist: false,
create: function (input) {
return {
value: input,
text: input,
};
},
});
</script>
{% else %}
<h3>You do not have permission to edit this listing</h3>
{% endif %}
</div>
</div>
</div>