Print an array of variables from droppable area on a new page using ajax

PHP
, ,
1

I have drag and drop jquery. Accordion that allows user to drag and drop names into a droppable area. So what i want to do is to display dropped names on a new page after user click submit. But I cant get how to do it. I thought maybe its can be done using ajax but not sure how. Thanks in advance. Here is my code:

 <link href="jquery-ui/jquery-ui.css" rel="stylesheet" />
    <script src="jquery-ui/jquery.js"></script>
    <script src="jquery-ui/jquery-ui.js"></script>
    <script>
        $(document).ready(function(){
            $("#myAccordion"). accordion({heightStyle:"content", active: false, collapsible:true});
            $(".source li").draggable({helper:"clone"});
              $("#project ol").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function(event, ui) 
                {
                    $(this).find(".placeholder").remove();
                    $("<li></li>").text(ui.draggable.text())
                        .addClass("project-item")
                        .addClass('dropClass')
                        .appendTo(this);
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function() {
                    $(this).removeClass("ui-state-default");
                }
            });

            $("#myAccordion ul").droppable({
                drop: function(event, ui) {
                    $(ui.draggable).remove();
                },
                hoverClass: "ui-state-hover",
                accept: '.project-item'
            });

            $('#box').keyup(function(){
                var valThis = $(this).val().toLowerCase();
                if(valThis == ""){
                    $('.source > li').show();           
                } else {
                    $('.source > li').each(function(){
                        var text = $(this).text().toLowerCase();
                        (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
                    });
               };
            });
        }); 
    </script>
<div id="myAccordion" style="width:20%; float:left; margin-right:30px;">
<?php for($i=321; $i<347; $i++)
    {
        echo "<h3>".chr($i)."</h3>";
        echo '<ul class="source">'; 
        $sql = "SELECT username FROM user WHERE username LIKE '".chr($i+32)."%' ";
        $result = $conn->query($sql);       
        if ($result->num_rows > 0) 
        {
            // output data of each row
            while($row = $result->fetch_assoc()) 
            {  
                $name= $row["username"];    
                echo"<li class='ui-state-highlight'>". $name ."</li>";
            }
        } else 
        {
            echo "0 results";
        }                       
            echo '</ul>';                   
    }
?>  
</div>  
<form class="formcss" method="POST" action="create3.php">
    <fieldset style="background-color:white;">
        <div id="project" style="margin-left:10%;">
            <label>Leader:</label>
                <ol>
                    <li class="placeholder" name="leader[]" <?php if (isset($leader[$i])) echo 'value="'.$leader[$i].'"' ?>>Add leaders and checkers here</li>
                </ol>
            <br><br>
            <div class="row">
                <input type = "submit" name ="submit" class="button" value = "Create Project" onclick="userSubmitted = true;"/> 
            </div>
        </div>      
    </fieldset>
</form>
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.