Question

好的，完全披露。我在这里是全新的品牌。这是我的第一个问题。我的编码技巧很弱，但我正在学习。

我参加了一个慈善项目。我们有一个非常标准的HTML表单来完成，但是它有一个语言部分，我们想让人们重新排序语言 - 拖放 - 以表明他们的流畅性。

然后我需要通过电子邮件将所有字段（姓名，电子邮件地址，语言首选项）发送给我。

我可以创建表单;我可以创建拖放，但我无法弄清楚如何传递重新排序列表的内容。

<body>
<header>
<h1>Preferences Form</h1>
</header>
<BR><BR>
<center>
   <form method="post" action="process.php">>
   <label>Your Name:</label>
   <input name="name" placeholder="Goes Here">
   <label>Your Email:</label>
   <input name="email" type="email" placeholder="Goes Here">

</center>
<section>
<h2>Language Fluency - Reorder Please</h2>
    <ul id="Language" class="handles list">
        <li><span>:: </span>English</li>
        <li><span>:: </span>French</li>
        <li><span>:: </span>German</li>
        <li><span>:: </span>Spanish</li>
    </ul>
</section>
<section>
    <h2>Volunteer Country</h2>
    <ul id="Country" class="handles list">
        <li><span>:: </span>Peru</li>
        <li><span>:: </span>Eritrea</li>
        <li><span>:: </span>Equatorial Guinea</li>
        <li><span>:: </span>Haiti</li>
    </ul>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.sortable.js"></script>
<script>
$(function() {
$('.sortable').sortable();
$('.handles').sortable({
    handle: 'span'
        });
        $('.connected').sortable({
            connectWith: '.connected'
        });
        $('.exclude').sortable({
            items: ':not(.disabled)'
        });
    });
</script>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
</body>
</html>

一旦提交被点击，我正在使用的process.php非常简单。

<?php
// Get Data 
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);

// Here I cannot work out the field/vars for the UIs if it's even possible

// Send Message
mail( "email@email.com", "Preferences List",
"Name: $name\nEmail: $email\n",
"From: Volunteer <do-not-reply@fakeemail.com>" );

echo "Sent, thanks!"

?>

所以要清楚并重复：如何将两个重新排序的列表的内容传递给电子邮件？如果可能的话，我想避免使用mysql或dbase解决方案，因为这将是另一个需要学习的代码，但如果必须的话，我会这样做。

提前感谢您的任何帮助。

Ĵ

Answer 1

您需要使用javascript将列表结果存储到隐藏字段中。将其绑定到提交按钮。

例如：您有两个列表：#columns和#selected_columns。

HTML：

<input id='saved_columns' type='hidden' name='TableColumns' />

<ul class='sortable' id='columns'>
    <li data-itemid='FirstName'>First Name</li>
    <li data-itemid='LastName'>Last Name</li>
    <li data-itemid='DayPhone'>Day Phone</li>
    <li data-itemid='Email'>Email</li>
</ul>

<ul class='sortable' id='selected_columns'>
</ul>

并为您的javascript使用类似的内容：（我正在使用jQuery List DragSort http://dragsort.codeplex.com/）

$("#columns,#selected_columns").dragsort({
    dragSelector: "li", 
    dragBetween: true, 
    dragEnd: saveOrder, 
    placeHolderTemplate: "<li class='placeHolder'></li>"
});

function saveOrder() {
    var data = $("#selected_columns li").map(function() { 
        return $(this).data("itemid");
    }).get();
    $('#saved_columns').val(data);
}

如您所见，DragSort每次拖放元素时都使用回调（saveOrder）。 saveOrder从下拉列表中的每个项目中获取itemid，并将它们存储到隐藏字段#saved_columns中。

保存拖放列表的结果

1 个答案: