如何构造向Challonge API批量添加参与者并传递额外参数的最优表单

你可以根据你的使用场景选择以下两种可行方案： #

方案1：保留textarea，使用约定标记（轻量改造成本） #

这个方案不需要改动原有表单的基础交互，只需要给用户约定输入规则即可：

• 要求需要设置misc="*"的参与者姓名，在末尾加空格加*标识，不需要设置的正常输入即可

示例输入格式：

John Doe
Jane Doe *
Jenn Doe *

后端PHP处理逻辑示例：

// 读取textarea提交的内容，按换行拆分
$names = explode("\n", trim($_POST['name']));
$participants = [];
foreach ($names as $rawName) {
    $rawName = trim($rawName);
    if (empty($rawName)) continue;
    // 判断末尾是否带*标记
    if (str_ends_with($rawName, ' *')) {
        $name = rtrim($rawName, ' *');
        $misc = '*';
    } else {
        $name = $rawName;
        $misc = null;
    }
    $participants[] = [
        'name' => $name,
        'misc' => $misc
    ];
}
// 最终组装成要求的结构
$result = json_encode(['participants' => $participants], JSON_UNESCAPED_UNICODE);

方案2：动态行表单，每个参与者单独绑定复选框（直观易用） #

如果希望用户不需要记输入规则，直接可视化操作，可以把单个textarea改成可增删的行结构，每行对应一个参与者，单独关联复选框：

前端代码示例：

<form action="bulkadd.php" method="post" id="participantForm">
  <!-- 参与者行容器 -->
  <div id="participantRows">
    <!-- 默认第一行 -->
    <div class="participant-row">
      <input type="text" name="name[]" placeholder="输入参与者姓名" required>
      <label>
        <input type="checkbox" name="misc[]" value="*"> 标记misc
      </label>
      <button type="button" class="delRow">删除</button>
    </div>
  </div>
  <button type="button" id="addRow">添加参与者</button>
  <br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

<!-- 可选的添加行JS逻辑 -->
<script>
document.getElementById('addRow').addEventListener('click', function() {
  const row = document.querySelector('.participant-row').cloneNode(true);
  row.querySelector('input[name="name[]"]').value = '';
  row.querySelector('input[name="misc[]"]').checked = false;
  document.getElementById('participantRows').appendChild(row);
});
// 删除行逻辑
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('delRow') && document.querySelectorAll('.participant-row').length > 1) {
    e.target.parentElement.remove();
  }
});
</script>

后端PHP处理逻辑示例：

$names = $_POST['name'] ?? [];
$miscs = $_POST['misc'] ?? [];
$participants = [];
foreach ($names as $index => $name) {
    $name = trim($name);
    if (empty($name)) continue;
    // 对应索引的复选框被选中则misc为*，否则为null
    $misc = isset($miscs[$index]) ? '*' : null;
    $participants[] = [
        'name' => $name,
        'misc' => $misc
    ];
}
$result = json_encode(['participants' => $participants], JSON_UNESCAPED_UNICODE);

注意事项 #

• 两种方案最终生成的JSON结构都完全符合你要求的格式，可直接调用批量添加接口
• 如果需要misc支持更多自定义值而不是固定的*，可以把复选框改成输入框，对应调整后端取值逻辑即可

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