Home/ Questions/Q 3353658
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T02:10:41+00:00

I am just starting out with JQuery and Javascript, and adapting a nested set

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I solved the issue by adding input elements inside each anchor tag, which are hidden by a bit of additional Javascript. A couple of additional lines in the jsTree script add ‘checked’ to the inputs when the jsTree generated input is checked, and vice versa if the input is returned to the form checked. If Javascript is switched off, the input checkboxes work as normal in an HTML form.I can post examples and the changes made to jsTree if anyone would like further explanation.

    I don’t doubt this is a bit of a ramshackled way to solve the problem, but that’s where I’m at in my currently unenlightened state of web development!

    • 0