Каков наилучший способ размещения содержимого упорядоченного списка при отправке HTML-формы?

Question

Раньше я всегда использовал скрытое поле, и на событии onClick кнопки отправки я помещаю содержимое списка (текст элементов li) в скрытое поле формы с помощью пользовательского кода и анализирую его на сервере с использованием пользовательского кода.

Это всегда было похоже на взлом, и мне было интересно, есть ли более современный подход. Я хотел бы найти наиболее общий подход, но если инструменты имеют значение, я использую JQuery на клиенте и Ruby / Sinatra на сервере. Может быть, превратить список в объект JSON, а затем использовать на стороне сервера?

Answer 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(" "));

Answer 2

Не совсем точно, какой аспект списка html <ol><li>...</li>...</ol> вы хотите передать, но, если вы имеете в виду текстовое содержимое тегов <li> member, то вы можете сделать это примерно так:

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