I am working on a tag system: 1.you can select some tags from a list and display them in a tag container (the tag can be selected only once and the sum is limited to 10), and different tag has different colors. 2.you can delete some selected tags in the tag container 3.pass the information to the php and store in the database. 4. display the tags in another page and you can update the selected tag list in this page.
For now the first two steps has finished by javascript but I am quite confused how I can pass the selected information to the php and the database (the content and colors) so they can be displayed and updated in another page.Anyone can give me some suggestions? Thanks.
The link to the jsfiddle is http://jsfiddle.net/V9Euk/1015/
Here is the html:
<ul>
<li data-val="300"><span class="label label-morning">Morning</span></li>
<li data-val="301"><span class="label label-afternoon">Afternoon</span></li>
<li data-val="302"><span class="label label-evening">Evening</span></li>
</ul>
<div class="tagHandler">
<ul class="tagHandlerContainer" id="tag_handler">
</ul>
</div>
here is the javascript:
$(function(){
var tags = [];
function add_tag(that){
var tag = $(that).text();
if($.inArray(tag, tags)>=0|| tags.length >= 10) return;
tags.push(tag);
var singleValues = $(that).find('span').clone();
singleValues[0].innerHTML += "×";
$("#tag_handler").append(singleValues);/*display the selected tags in the tag_handler with × style*/
}
$("li").click(function(){
add_tag(this);
});/*add tags to the tag_container when click the li*/
$('#tag_handler').on('click', 'span', function(){
var tag = $(this).text();
var index = $.inArray(tag, tags);
tags.splice(index,1);
$(this).remove();
});/*remove the tag when click this tag in the tag_container*/
});