get serialized jquery data in php

Question

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 :

PHP

<!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 11-Oct-13 20:53pm

kleymanx90

Updated 11-Oct-13 20:56pm

v2

Add a Solution

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

2 solutions

Solution 2

visit here..

access serialize jquery in php[^]

Posted 13-Oct-13 22:10pm

Rakesh Meel

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Akinmade Bond · Accepted Answer · 2013-10-13T21:25:00

Solution 1

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

JavaScript

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.

Posted 13-Oct-13 21:25pm

Akinmade Bond

Updated 14-Oct-13 9:18am

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. :)