Click here to Skip to main content
14,695,784 members
Please Sign up or sign in to vote.
4.00/5 (2 votes)
See more:
hi , i used treeview from this site (please choose embed in forms) .
i want to get serialized data from my form and use it in my php file(action.php) but treeview data is not send ,could someone help me ?

here is my index.php file :

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynatree - 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">
        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':
          formData.push({name: "activeNode", value: tree.getActiveNode().data.key});

        alert("POSTing this:\n" + jQuery.param(formData));

        $.post("http://localhost/LearnPHP/Tree/code/action.php", formData);
<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
    <form action="http://localhost/LearnPHP/Tree/code/action.php" method="POST">
        <!--<form method="POST">-->
        Username: <input type="text" name="userName" />
        <textarea name="comment"></textarea>
        <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
        <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
        <!-- The name attribute is used by tree.serializeArray()  -->
        <div id="tree" name="selNodes"></div>
        <input type="submit" value="Send data">
    <!-- (Irrelevant source removed.) -->

and my action.php file :

Updated 11-Oct-13 21:56pm
Akinmade Bond 12-Oct-13 3:44am
Does alert("POSTing this:\n" + jQuery.param(formData)); display anything?
kleymanx90 12-Oct-13 3:49am
yes ,please see->

You might want to start by taking a look at the JQuery $.post API Documentation[^]

That said, your code shou;d be

$.post ( 'action.php', { "formData": formData } , function(data) {

The function should then show the serialized data from the server where you wrote print_r($_POST);

Note that since you are sending this via AJAX, your page will not reload.


just before the alert you could do...
var p = document.createElement("input");
   // Add the new element to our form.
   $(form).append(p); = "formData";
   p.type = "hidden"
   p.value = formData;

That will add a hidden input to your form containing the serialized values that can be sent to your server. Tty changing p.type to text to debug.
kleymanx90 14-Oct-13 5:50am
can i serialize tree with jquery but passing tree data in a usual way i.e without AJAX ?
Akinmade Bond 14-Oct-13 7:39am
Yes you could. Just create a form like so.

<form method="post" action="action.php">
//Data here.
kleymanx90 14-Oct-13 8:02am
I did it ,all form data was sent but tree data was not send, here is $_POST :

Array ( [userName] => test[comment] => test [rb1] => foo [cb1] => John )
Akinmade Bond 14-Oct-13 15:19pm
See the edited answer.
kleymanx90 15-Oct-13 2:14am
I tried it but did not work for me but i did sth like your code :
1- edit jquery code :
jQuery("#sub").click(function() {
var tree = $("#tree").dynatree("getTree");
var ts = tree.serializeArray();

var arr = [];
for (var i = 0; i < ts.length; i++) {

var formData = $("#f1").serializeArray();
formData = formData.concat(tree.serializeArray());
if (tree.getActiveNode()) {
name : "activeNode",
value : tree.getActiveNode().data.key
<input id="selcs" name="mySelects" type="hidden" value="">
3- edit :
<form id="f1" method="post" action="action.php" >
<input id="sub" type="button" value="Send data">
thank u : )
Akinmade Bond 15-Oct-13 14:14pm
Happy to help. Glad you got it working. :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900