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 :

<!DOCTYPE>
<html>
<head>
    <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">
    $(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("http://localhost/LearnPHP/Tree/code/action.php", formData);
      });
    });
    </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>


and my action.php file :

print_r($_POST);
Posted
Updated 11-Oct-13 21:56pm
v2
Comments
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->http://www.8pic.ir/images/98588827135690915782.png

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) {
alert(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.

EDIT:

just before the alert you could do...
var p = document.createElement("input");
   // Add the new element to our form.
   $(form).append(p);
   p.name = "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.
   
v2
Comments
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.
</form>
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++) {
arr.push(ts[i].value);
}
$("#selcs").val(arr.join());

var formData = $("#f1").serializeArray();
formData = formData.concat(tree.serializeArray());
if (tree.getActiveNode()) {
formData.push({
name : "activeNode",
value : tree.getActiveNode().data.key
});
}
$("#f1").submit();
});
2-add
<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