1

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

我参加了一个慈善项目。我们有一个非常标准的 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 解决方案，因为这将是另一个需要学习的代码，但如果必须的话，我会的。

提前感谢您的任何帮助。

Ĵ

4

1 回答 1

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)。saveOrderitemid从下拉列表中的每个项目中获取 并将它们存储到隐藏字段中#saved_columns。

于 2013-10-02T12:39:14.497 回答