How to implement a tag input line on a website?

M

mr_forlife2021-06-14 16:41:27

Django

mr_forlife, 2021-06-14 16:41:27

I want to tie the following tag input line to the site

snippet

thought to do through

form

from django import forms

class TagForm(forms.Form):
    tag_input = forms.CharField(label='Input tags',
                                widget=forms.widgets.TextInput(attrs={'type': 'text',
                                                                      'placeholder': 'Add tags here...'}),
                                )

I posted a test page:

HTML

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="{% static 'cms/style.css' %}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form action="#" method="post">
        {% csrf_token %}
        <div class="input-tags">
            <span class="tags"></span>
           {{ form.tag_input }}
            <div class="dropdown">

            </div>
        </div>
        <input type="submit" value="Send">
    </form>
    <script src="{% static 'cms/main.js' %}"></script>
</body>
</html>

But already in the process, I realized that the js script adds new tags to the span of the input-tags block, and the input itself is cleared with each added tag, so the POST request is empty in total.
How can this be corrected?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

s19s93, 2021-06-14
@s19s93

To be honest, I read it and did not understand what you want to do?