What is the best way to post contents of an ordered list on html form submission?

Question

In the past I have always used a hidden field, and on the submit button onClick event I stuff the list contents (the text of the li elements) into a hidden form field using custom code, and parse it out on the server-side using custom code.

This has always felt like a hack and I was wondering if there is a more modern approach. I'd like to find the most generic approach, but if tooling matters, I'm using JQuery on the client, and Ruby/Sinatra on the server. Maybe turn the list into a JSON object and then consume on the server side?

Answer 1

It's not clear exactly what aspect of a html <ol><li>...</li>...</ol> list you'd want to pass, but assuming you mean the text contentents of the member <li> tags, then you might do it something like this:

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

Answer 2

If you want to as a values sepearated by coma

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

Or you can put it as an array

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