Creating values for HTML post form from JStree checkbox list

Question

I am just starting out with JQuery and Javascript, and adapting a nested set of checkbox inputs to make use of jstree checkbox behaviours. After realising that each item had to be an anchor tag to be recognised by the jstree code, I am now unsure how to generate values from the items for a POST form submission. Previously they were checkbox inputs, and I would like to be able to keep them this way so that the form would still function if Javascript were turned off. wrapping inputs in the anchor tag resulted in two checkboxes for each item, one styled and behaviourally controlled by JStree, the other ignored. I assume this isn't the direction to go.

Any advice on how to achieve this would be gratefully received.

I am booting JStree with the following config code -

$(document).ready(function()
{
    $('.nested-category').jstree({ 
        ui: { theme_name : "checkbox" },
        plugins : ["checkbox", "themes", "html_data", "ui" ]
    });
}
);

Here is a simplified version of the form which the JStree code effects, but which can't submit values.

<form method="post" action="">

<div class="nested-category">

<ul class="">
    <li><a href="#">group1</a>
        <ul>
            <li><a href="#">subgroup1</a>
                <ul>
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                </ul>
            </li>
            <li><a href="#">subgroup2</a>
                <ul>
                    <li><a href="#">item4</a></li>
                    <li><a href="#">item5</a></li>
                    <li><a href="#">item6</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">group2</a>
        <ul>
            <li><a href="#">subgroup3</a>
                <ul>
                    <li><a href="#">item7</a></li>
                    <li><a href="#">item8</a></li>
                    <li><a href="#">item9</a></li>
                </ul>
            </li>
            <li><a href="#">subgroup4</a>
                <ul>
                    <li><a href="#">item10</a></li>
                    <li><a href="#">item11</a></li>
                    <li><a href="#">item12</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

<input class="form-submit" type="submit" name="submit" value="submit">
</form>

Answer 1

personally, i would use AJAX. $.post

give the anchors an ID, and in jsTree i'm sure there is a method that gets all selected ID's