在提交之前是否有另一种方法可以在 HTML 表单中添加多个标签？答案

【问题标题】：Is there another way to add multiple tags in a HTML form before submitting?在提交之前是否有另一种方法可以在 HTML 表单中添加多个标签？
【发布时间】：2020-05-12 15:46:20
【问题描述】：

我有一个使用 HTML、JQuery 和 PHP 编写的自定义知识库的管理面板，它读取 XML 文件并允许通过 HTML 表单向文件添加更多记录。该页面发送新记录，然后通过 AJAX 进行更新。 XML 记录代表知识库文章，我最近刚刚在这些记录中添加了标签，以便更好地搜索和分类。

我遇到的问题是找到另一种方法来处理在插入之前将多个标签添加到 HTML 表单以获取新记录。我不是在寻找关于“最佳”方法的意见，而是在寻找我可能不具备的关于 HTML、JQuery 或 PHP 支持的不同功能的知识，这将使我能够实现在之前添加多个标签的目标提交表单。

我有三个目标：1) 能够选择一个标签，将其添加到表单中的列表中，然后在提交之前添加更多（如果需要）和 2) 能够以可读、可滚动的方式显示选定的标签，最后是 3) 如果可能，这样做无需以编程方式添加（然后读取）多个输入字段。

我知道我可以添加 input type=text、select 输入和 button 并使用 JavaScript 填充文本输入用所选标签填充的字符串，并用已知的安全字符分隔整个字符串以分隔每个标签。然后我可以通过我的 AJAX 查询传递这个输入字段，并处理 AJAX 调用的 PHP 文件中的字符串。这似乎是错误的做法。此外，这不符合目标 (2)。

我也知道我可以将 select 输入与 multiple 一起使用，但这也会失败 Goal (2) 并且当我有一个列表时100 个标签，我需要在列表中的不同位置添加 15 个标签，这会适得其反。

还有其他方法可以做到这一切吗？同样，首先不是寻找关于“最佳”方法的意见，甚至不是意见，只是为了获得我可能不知道的知识、更正或提示，这将实现我正在寻找的东西。

我在下面包含了我的 JQuery 代码、表单的 HTML/PHP 和我的 XML 文件示例。

jQuery:

$('#submit_add').click(function(){
    var clickBtnValue = $(this).val();
    var articleId = $("#id").val();
    var articleTitle = $("#title").val();
    var articleFilepath = $("#filepath").val();
    var articleLevel = $("#level").val();
    var ajaxurl = 'kb_add_article.php',
    data =  {'action': clickBtnValue, 'id': articleId, 'title': articleTitle, 'filepath': articleFilepath, 'level': articleLevel};
    $.post(ajaxurl, data, function (response) {
        // Response div goes here.
        alert(response);
    });
});

HTML/PHP：

//display a form
echo "<div id='add_article'>";
    echo "<form class='form-signin' method='post'>
            <table>
                <tr><td colspan='2'>Add a New Article</td></tr>
                <tr><td>ID:</td><td><input id='id' name='id' type='text' value='", ($highest_id + 1), "' disabled></td></tr>
                <tr><td>Title:</td><td><input id='title' name='title' type='text'></td></tr>
                <tr><td>File Path:</td><td><input id='filepath' name='filepath' type='text'></td></tr>
                <tr><td>Level:</td><td><select id='level' name='level'>
                            <option value='1'>1st Line</option>
                            <option value='2'>2nd Line</option>
                        </select></td></tr>
                <tr><td colspan='2'><input type='submit' class='button button1' id='submit_add' value='insert'></td></tr>
            </table>
        </form>";
echo "</div>";

XML：

<article>
    <id>1</id>
    <title>Claims Test</title>
    <filepath>Claims.md</filepath>
    <level>1</level>
    <category>dispensary</category>
    <tags>
        <tag>product:rx</tag>
        <tag>product:rx-365</tag>
    </tags>
</article>

【问题讨论】：

标签： javascript php html jquery forms

【解决方案1】：

使用 JavaScript 添加多个输入，但在名称中使用方括号，如 <input name="someName[]" />。

然后在您的 PHP 中，您可以使用 $_POST['someName']，它将包含一个包含名称为 someName[] 的所有输入的值数组。

【讨论】：