如何通过JS/jQuery实现表单中可编辑<ul><li>列表的提交？

当然可以实现，核心思路是用HTML构建可编辑的列表结构，通过JavaScript/jQuery处理列表的增删改操作，最后在表单提交时将列表内容转换为可提交的格式，存入隐藏表单控件中，以items参数提交。

实现步骤 #

1. HTML结构 #

先搭建基础的表单和可编辑列表，用隐藏的input来存储最终要提交的列表数据：

<form id="editableListForm" method="POST" action="/your-submit-url">
  <div class="list-container">
    <h4>可编辑项目列表</h4>
    <ul id="editableList">
      <!-- 初始列表项 -->
      <li>
        <input type="text" class="item-input" value="示例项目1">
        <button type="button" class="delete-btn">删除</button>
      </li>
      <li>
        <input type="text" class="item-input" value="示例项目2">
        <button type="button" class="delete-btn">删除</button>
      </li>
    </ul>
    <button type="button" id="add-btn">添加新项目</button>
    <!-- 隐藏输入框，用于传递列表数据 -->
    <input type="hidden" name="items" id="items-storage">
  </div>
  <button type="submit" class="submit-btn">提交表单</button>
</form>

2. jQuery/JavaScript逻辑 #

处理列表的增删操作，以及表单提交时的数据收集：

// 用jQuery实现的逻辑
$(function() {
  // 添加新项目
  $('#add-btn').click(function() {
    const newItem = `
      <li>
        <input type="text" class="item-input" placeholder="输入项目内容">
        <button type="button" class="delete-btn">删除</button>
      </li>
    `;
    $('#editableList').append(newItem);
  });

  // 删除项目（事件委托处理动态生成的元素）
  $('#editableList').on('click', '.delete-btn', function() {
    $(this).parent('li').remove();
  });

  // 表单提交前收集数据
  $('#editableListForm').submit(function() {
    const items = [];
    // 遍历所有输入框，收集非空值
    $('.item-input').each(function() {
      const val = $(this).val().trim();
      if (val) items.push(val);
    });
    // 将数组转为JSON字符串存入隐藏输入框
    $('#items-storage').val(JSON.stringify(items));
  });
});

3. 后端处理说明 #

表单提交后，后端会收到items参数，值是一个JSON格式的数组字符串，比如["项目1","项目2"]，你可以根据后端语言（如PHP、Node.js等）解析这个字符串为数组进行后续处理。

可选：用contenteditable实现纯文本编辑 #

如果不需要输入框样式，也可以让<li>本身可编辑：

<li contenteditable="true" class="editable-item">示例项目1</li>

对应的收集数据逻辑改为：

$('.editable-item').each(function() {
  const val = $(this).text().trim();
  if (val) items.push(val);
});

这种方式更轻量化，但输入体验不如输入框稳定，适合简单文本场景。

内容的提问来源于stack exchange，提问作者FourK