如何将多标签输入值随HTML表单提交存入Django模型

你当前的多标签逻辑把所有标签值都存在前端JS内存的tags数组里，每次添加标签后还执行了e.target.value = ""清空了可见输入框的内容。默认表单提交只会采集表单内输入项的实时值，你存在数组里的标签根本没被放到提交数据里，Django后端拿不到对应值，自然没法存到模型中。

首先改HTML结构的两个问题：

• ul标签内部按规范只能放li元素，你把输入框塞在ul里容易触发兼容问题，把输入框移到ul外侧，改成隐藏域专门用来存储待提交的标签数据即可。
• 清空标签的按钮没有指定type属性，放在表单里默认会被识别为提交按钮，点了会直接触发表单提交，必须加上type="button"。

修正后的标签区域HTML代码：

<div class="tag-wrapper">
    <div class="tag-content">
        <p>输入标签后按回车键，或在标签后添加逗号即可完成标签添加</p>
        <ul name="features-ul"></ul>
        <!-- 隐藏输入框，专门存待提交的标签JSON数据 -->
        <input type="hidden" id="features" spellcheck="false" name="features">
    </div>
    <div class="tag-details">
        <p>还可添加<span>16</span>个标签</p>
        <button type="button">清空全部标签</button>
    </div>
</div>

接下来改JS逻辑：

1. 删掉你写的无效代码var features = {"input[name=features]" : tags}，JS普通对象不会自动绑定DOM元素，这段代码没有任何作用。
2. 增加表单提交监听事件，在提交触发时把tags数组序列化为JSON字符串，塞进刚才的隐藏输入框里，这样标签数据就会和其他表单项一起提交到后端。
3. 注意给你页面上的表单标签加上id（示例里用id="main-form"，你可以替换成自己实际的表单id）。

需要新增的JS代码，直接加到你现有JS代码的末尾即可：

// 监听表单提交，提交前把标签数据塞进隐藏输入框
document.querySelector("#main-form").addEventListener("submit", function() {
    input.value = JSON.stringify(tags);
})

首先模型层不要用普通的CharField存标签，直接用Django自带的JSONField，原生支持存储列表格式的标签数据，不需要自己手动做格式转换。
模型示例代码：

from django.db import models
from django.core.validators import MaxLengthValidator

class YourModel(models.Model):
    # 其他业务字段（比如标题、描述、价格等）按原有逻辑写即可
    # 标签存储字段
    features = models.JSONField(
        default=list,
        validators=[MaxLengthValidator(16, message="最多仅可添加16个标签")]
    )

视图层接收数据时做简单的反序列化和合法性校验，避免前端传非法格式导致报错，函数视图示例：

import json
from django.shortcuts import render, redirect
from .models import YourModel

def form_submit_view(request):
    if request.method == "POST":
        # 其他字段按原有逻辑接收即可，比如：
        # title = request.POST.get("title", "").strip()
        # 接收标签数据
        features_raw = request.POST.get("features", "[]")
        try:
            features = json.loads(features_raw)
        except json.JSONDecodeError:
            features = []
        # 过滤非法值：只保留长度大于1的字符串标签，去重后最多取16个
        valid_features = []
        for tag in features:
            if isinstance(tag, str):
                clean_tag = tag.strip()
                if len(clean_tag) > 1 and clean_tag not in valid_features:
                    valid_features.append(clean_tag)
            if len(valid_features) >= 16:
                break
        # 写入数据库
        new_obj = YourModel(
            # 把其他字段赋值补上，比如title=title
            features=valid_features
        )
        new_obj.save()
        return redirect("你的页面跳转路由名")
    return render(request, "表单模板路径.html")

你之前写的全局拦截回车提交的逻辑不用改，和标签添加逻辑不会冲突。如果后续要做编辑回显，只需要在渲染模板时把库中存的features列表转成JS数组赋值给tags变量，再调用一次createTag()就能把已有标签渲染出来。

内容的提问来源于stack exchange，提问作者Daevid The Great