从数据库中提取并将表单发送到电子邮件的 Jquery 元素

Question

好的。我会尽量说清楚，并提供我的源代码来帮助我解决我的问题。

所以我有这些可拖动元素，这些元素是通过数据库从一个区域拖动到可放置/可排序区域的。它们旨在在那里收集，以便以后可以提交它们的值（通过电子邮件发送给我和用户）。我正在尝试弄清楚代码应该如何准确地写入表单，这样我就可以确定在对可放置区域进行排序以发送到电子邮件后将其拾取。

这是我的参考代码（发送表单方面目前还没有实现，只是一个占位符）： jsfiddle: http://jsfiddle.net/Matuduke/Y86As/

<style>

    .tooltip { position:fixed; top: 0;left: 0;z-index: 3; display: none;}

    #send {float:left; position:relative; }
    #column_en { float:inherit;}
    #webwall { float:left; width:48%; padding: 3px; max-height:340px; min-height:340px; }
    #collectborder { float:left; width:50%; min-height:340px; padding: 0px; }


    #staticwall li {cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important; list-style-type: none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size:x-small; text-align: center; }

    #collection { list-style-type:none; min-height:340px; float:left; min-width:500px; border:dashed;background:#fff; height:30%; padding: .5% ; } * html #collecton { height: 0em; }
    #collection li { list-style-type:none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size: 1em; text-align: center;}


    </style>
<script>
    $(function() {
        var removeIntent = false;
    $( "#collection").sortable({
     over: function () {
            removeIntent = false;
        },
        out: function () {
            removeIntent = true;
        },
        beforeStop: function (event, ui) {
            if(removeIntent == true){
                ui.item.remove();
                    }
                 }
        });
        $( "#collection").disableSelection();
            });

        $(document).ready(function() {
        var source;
        var destination;
        var fn = function(event, ui) {
            toDrop = $(ui.draggable).clone();
            if ($("#collection").find("li[uIdentity=" + toDrop.attr("uIdentity") + "]").length >= 0) {
                $("#collection").prepend(toDrop);
            }
            else
                return false;
        };
        $("#staticwall li, #collection li").draggable({
            helper: 'clone',
            hoverClass: "ui-state-default"
        });

        $("#collection").droppable({
            accept: "#staticwall li" ,
            drop: fn 
                    });
                });
            $("#staticwall li").setPos('0,0');
            $('#staticwall').tinyscrollbar();
        $(function() {

        $("#collection li").draggable({
            revert: true
                    });
                    });
        </script>
        </head>
        <body>       
        <div id="column_en">
        <div id="webwall">
           Choose the pieces to add to your collection:
    <ul style="overflow:auto;height:300px;animation-timing-function:ease-in-out;" id="staticwall" class="ui-state-default">

        <?php 
        mysql_connect('localhost','user,'pass');
        mysql_select_db("houstop9_Spiritiles");
        $result = mysql_query("SELECT thumb, title, quote, sku FROM spiritiles ORDER BY `spiritiles`.`sku` DESC LIMIT 0, 120");

        // print the list items
            while ($row = mysql_fetch_array($result)) {
            echo "<li uIdentity='1' class='ui-state-default'>{$row['thumb']}\n {$row['sku']}</li>";

                }
                ?>

        </ul>
            </div>


        <div>Create your Collection here: </div>
        <div  id="collectborder" >
        <ul id="collection" class="ui-state-default">
            </ul>
            <div id="send"><form>
            <input type="text" accept="">
            <input type="image" accept="">

                <input type='submit' name='submit' value='Send Tiles'></form> 
            </div> 

            </div>
            </div>

            </body>

编辑： 好的，我想我明白你在说什么，但我不确定我是否理解 JQuery 中的 get 方法。当我提交表单时，我一直在尝试让它运行，但我认为我在捏造它：

     function getSku() 
        var myIds = new array();
        $("#collection li").each(function(index, element){
           getSelection(index + ': ' + $(this).text());
           myIds.push(element.id);

            });
         }
         $("form").submit(getSku);

Answer 1

使用 jQuery，您可以使用 .each() 迭代虚线框的元素，如下所示：

var myIds = new array();
$("#collection li").each(function(index, element){
  // get ids
  myIds.push(element.id);
});

然后你必须用你的对象的 id 创建一个数组，然后提交它们。使用 PHP，您可以通过电子邮件发送这些 ID。

编辑 在 PHP 中，当您创建 li 元素时，您必须这样做：

echo "<li uIdentity='1' class='ui-state-default' id='{$row['sku']}'>";
echo "  {$row['thumb']}\n {$row['sku']}";
echo "</li>";

我假设sku 是您表的主键。如果没有，id 属性应该反映您的主键