Ok, full disclosure. I'm BRAND new here. This is my first question. My coding skills are weak but I'm learning.
I've taken on a charity project. We have a pretty standard HTML form to complete, but it has a section for language and we want to ask folks to re-order the languages -- drag and drop -- to indicate their fluency.
I then need all the fields (Name, Email Address, Language Preferences) to be emailed to me.
I can create the form; I can create the drag and drop, but I cannot figure out how to pass the contents of the reordered list.
<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>
The process.php I'm using once the submit is hit is pretty simple.
<?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
Email: $email
",
"From: Volunteer <do-not-reply@fakeemail.com>" );
echo "Sent, thanks!"
?>
So to be clear and repeat: How do I pass the contents of the two re-ordered lists to email? If at all possible, I'd like to avoid mysql or dbase solutions as that will be yet another code to learn, but I will if I have to.
Thanks in advance for any assistance.
J
You need to use javascript to store the list results into a hidden field. Bind it to the submit button.
For example: You have two lists: #columns and #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>
and use something like this for your javascript: (I'm using 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);
}
As you can see, DragSort is using a callback (saveOrder) each time an element is dragged-and-dropped. saveOrder takes the itemid from each item in the drop list and stores them into the hidden field #saved_columns.