使用ajax从新页面上的可放置区域打印变量数组

时间:2016-09-09 06:58:18

标签: php jquery ajax forms

我有拖放jquery。 Accordion允许用户将名称拖放到可放置区域。所以我想要做的是在用户点击提交后在新页面上显示删除的名称。但我不知道怎么做。我想也许它可以使用ajax但不确定如何完成。提前致谢。这是我的代码:

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

0 个答案:

没有答案