<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Example</title> <script src="../assets/jquery/jquery.js" type="text/javascript"></script> <script src="../assets/jquery/jquery-ui.custom.js" type="text/javascript"></script> <script src="../assets/jquery/jquery.cookie.js" type="text/javascript"></script> <link href="../assets/css/ui.dynatree.css" rel="stylesheet" type="text/css"> <script src="../assets/js/jquery.dynatree.js" type="text/javascript"></script> <!-- (Irrelevant source removed.) --> <!-- Add code to initialize the tree when the document is loaded: --> <script type="text/javascript"> $(function(){ $("#tree").dynatree({ checkbox: true, // Override class name for checkbox icon, so rasio buttons are displayed: //classNames: {checkbox: "dynatree-radio"}, // Select mode 3: multi-hier selectMode: 3, children: [ {title: "Item 1", key: "node1"}, {title: "Folder 2", isFolder: true, key: "node2", children: [ {title: "Sub-item 2.1", key: "node2.1"}, {title: "Sub-item 2.2", key: "node2.2"} ] }, {title: "Item 3", key: "node3"} ] }); $("form").submit(function() { // Serialize standard form fields: var formData = $(this).serializeArray(); // then append Dynatree selected 'checkboxes': var tree = $("#tree").dynatree("getTree"); formData = formData.concat(tree.serializeArray()); // and/or add the active node as 'radio button': if(tree.getActiveNode()){ formData.push({name: "activeNode", value: tree.getActiveNode().data.key}); } alert("POSTing this:n" + jQuery.param(formData)); $.post ( 'action.php', { "formData": formData } , function(data) { alert(data); }); }); </script> </head> <body class="example"> <h1>Example: Form</h1> <p class="description"> This checkbox tree is embedded in a form. The [Submit] handler serializes the selected tree nodes as if they were standard checkboxes.<br> The values are then POSTed to the server (together with the other form elements). </p> <form action="http://localhost/LearnPHP/Tree/code/action.php" method="POST"> <!--<form method="POST">--> Username: <input type="text" name="userName" /> <br> <textarea name="comment"></textarea> <br> <input type="radio" name="rb1" value="foo" checked> Foo <input type="radio" name="rb1" value="bar"> Bar <input type="radio" name="rb1" value="baz"> Baz <br> <input type="checkbox" name="cb1" value="John" checked>John <input type="checkbox" name="cb1" value="Paul">Paul <input type="checkbox" name="cb1" value="George">George <input type="checkbox" name="cb1" value="Ringo">Ringo <br> <!-- The name attribute is used by tree.serializeArray() --> <div id="tree" name="selNodes"></div> <input type="submit" value="Send data"> </form> <!-- (Irrelevant source removed.) --> </body> </html>
Question and answer is powered by AnsPress.io