add tags to formfield jquery

Question

What I would like to be able to do is add unordered list elements with tagit plugin. This works as shown in the code below. Once the list elements are added, I would like to get their values and add them to a form field in a comma separated list on submit.

The jquery listed is for a tagit script that I am using but shouldn't effect the list appending portion.

This is what I have so far:

<script type="text/javascript">
        $(document).ready(function() {
            $("#myTags").tagit();
        });
        </script>

        <ul id="myTags">
            <!-- Existing list items will be pre-added to the tags -->
            <li>Tag1</li>
            <li>Tag2</li>
        </ul>

Answer 1

Okay... I figured it out. What I did was this:

<script type="text/javascript">
        $(document).ready(function() {
                $("#myTags").tagit();
            $('#submit_button').click(function() {
                var optionTexts = [];
                    $("ul li").each(function() { optionTexts.push($(this).text()) });
                var taglist = '' + optionTexts.join(', ') + '';
                $('#field1').val(taglist);
                $('#form1').submit();
            });
        });
        </script>

        <ul id="myTags">
            <!-- Existing list items will be pre-added to the tags -->
            <li>Tag1</li>
            <li>Tag2</li>
        </ul>
        <form method="post" action="test.cfm">
            <input type="hidden" name="field1" id="field1" value="" /> 
            <input type="submit" id="submit_button" value="Submit">
        </form>

I think it needs to be cleaned up a bit but it populates the field.