Home/ Questions/Q 418715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T18:42:21+00:00

The question might not be clear, so i will explain further. I saw some

  • 0

The question might not be clear, so i will explain further.
I saw some page like wordpress new post tag, they have something like

[input] 
x tag |  x tag  |  x tag

or Facebook Notes when you post a image…

the when you input a tag and press enter, a new tag is insert in to element in the page…

I don’t quite understand how can you parse that out and then submit to the form.

if anyone know please give me an idea.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One way is to keep track of the tags you add in a hidden form field, but actually display using divs or spans or whatever UI you want. In the case of facebook, I’d imagine they’re doing something somewhat similar, though I guess they could actually be adding form elements dynamically. Forgive the nasty code/css – just tossed it together. If you add tags and then hit submit, you’ll see the querystring that all the values are there.

    <!doctype html> 
<html lang="en"> 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
    $("#btnSuggest").click(function(){
        var $tagSuggest = $("#tagSuggest");
        if($tagSuggest.val() != "")
            AddTag($tagSuggest.val());
    });

    $("#tagSuggest").keyup(function(e){
        if(e.keyCode == 13 && $(this).val() != "")
            AddTag($(this).val());
    });
});

function AddTag(tag){
    $("<div>").text(tag).appendTo("#tags").click(function(){
        $(this).remove();
        UpdateTags();
    }).hover(function(){
        $(this).addClass("over");
    },function(){
        $(this).removeClass("over");    
    });

    UpdateTags();
}

function UpdateTags(){
    var allTags = "";   

    $("#tags div").each(function(){
        allTags += "," + $(this).text();
    });

    $("#hidTags").val(allTags.substring(1));
    $("#tagSuggest").val("");
}
</script>
<style type="text/css">
.main
{
    width: 400px; 
    padding: 10px; 
    margin: auto; 
    border: 1px solid black; 
    background-color: #e6e6e6;
    height: 600px;
}

#tags div
{
    padding: 3px;
    border: 1px solid black; 
    background-color: #e6e6e6;
    margin: 3px;
    height: 15px;
    width: auto;
    float: left;
    cursor: pointer;

}

#tags div.over
{
    background-color: red;
}
</style>
</head>
<body>
<div class="main">
    <form action="" method="get">
        <input type="hidden" name="hidTags" id="hidTags">

        <textarea name="Wallpost" style="width: 390px; height: 100px;"></textarea>
        <br />
        <input type="text" id="tagSuggest" style="width: 280px;" />
        <input type="button" id="btnSuggest" value="Add Tag" style="float: right;"/>
        <br />      
        <input type="Submit" name="cmdSubmit" value="Share" style="float: right;"/> 
    </form>
    <div id="tags">

    </div>
</div>
</body>
</html>
    • 0