将脚本创建列表中的值连接到一个字段中

Question

How do I concatenate data from text fields in a script-created list, where the text field names will always be the same as each other? Allow me to explain:

I have a series of points that get added to a list that is create using javascript. This is the script to create the list:

var src = this.parentNode;
var field = $('<input type="text" id="savedpoints" name="savedpoints">').attr({'value': $(src).data('dbId')});
var but = $('<button>').append('&nbsp;&nbsp;Remove&nbsp;&nbsp;');
var newItem = $('<li>').append(field).append($(src).data('marker').title);
newItem.append('&nbsp;').append(but);
$(but).click(poi.removeItem);
$(poi.saveList).append(newItem);

So, there are items getting added to a list with a button next to them to remove them from the list if they are no longer needed. This list works perfectly.

What I need is to add the values to a text field at the bottom of the form (say, name="allpoints") that concatenates the field values from this list (the text field labelled "savedpoints", with the attribute 'dbId') into a string (e.g. "6, 7, 10, 13, 14,..." etc) whenever an item is removed from or added to the list. I can't work out how this might work!

Any help?

Answer 1

I would add an event handler to a common-ancestor of the remove button(s) and add button(s), which completely rebuilds the contents of "allpoints" when triggered:

$(commonParent).on('click', 'button.remove, button.add', function () {
    $('[name="allpoints"]').val($('[name="savedpoints"]').map(function () {
        return $(this).val();
    }).join(", "));
});

... if you wanted to, you could only add/remove the relevant element to/from the list, but you get the gist.

Note you'll need to add a class to your remove <button> (I've called it remove) in my example, and to your "Add" button.