在 html 表单提交上发布有序列表内容的最佳方式是啥？

Posted 2023-05-09

【中文标题】在 html 表单提交上发布有序列表内容的最佳方式是啥？

【英文标题】：What is the best way to post contents of an ordered list on html form submission?在 html 表单提交上发布有序列表内容的最佳方式是什么？

【发布时间】：2011-04-17 09:36:54

【问题描述】：

过去我一直使用隐藏字段，在提交按钮 onClick 事件中，我使用自定义代码将列表内容（li 元素的文本）填充到隐藏表单字段中，并在服务器上解析出来-side 使用自定义代码。

这一直感觉像是一种 hack，我想知道是否有更现代的方法。我想找到最通用的方法，但如果工具很重要，我在客户端使用 JQuery，在服务器上使用 Ruby/Sinatra。也许将列表转换为 JSON 对象，然后在服务器端消费？

【参考方案1】：

如果你想用逗号分隔的值

var values = $.map($('ol li'), function(e,i)  
  return $(e).html();
);
$('form').append('<input type="hidden" name="field" value="' + 
   values.join(',') + '"/>');

或者你可以把它作为一个数组

var inputs = $.map($('ol li'), function(e,i)  
  return '<input name="field[]" value="' + $(e).html() + '"/>';
);
$('form').append(inputs.join(" "));

【讨论】：

谢谢。为了避免在用户输入的列表项中有逗号但使用分隔列表时出现问题，我使用了一个更“与众不同”的字符而不是逗号。

如果您使用第二个示例，您不必担心您的连接字符串会出现在内容中。您还可以使用params[:field] 在 Sinatra 中以普通 Ruby 数组的形式访问这些值。 （字段名称中的 [] 部分使大多数 Web 框架自动发生这种情况，包括 Sinatra 和 Rails。）

【参考方案2】：

目前尚不清楚您想要传递 html <ol><li>...</li>...</ol> 列表的哪个方面，但假设您的意思是成员 <li> 标记的文本内容，那么您可以这样做：

$('ol.selector li')
    .each(function(i)  
        $("<input name='something-" + i + "'>")
            .val($(this).html())
            .appendTo('form.selector');
    
;