Bootstrap tagsinput

Question

I downloaded the source JS and CSS for the bootstrap-tagsinput library from the following resource : http://timschlechter.github.io/bootstrap-tagsinput/examples/

In my asp.net website I used it in the following way :

 <asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />

 <script type="text/javascript">
    $('input #txtCompany').tagsinput();
    alert($('input #txtCompany').val());
 </script>

But the alert should actually return the tags I created, but instead it returns : undefined

The JS is written in Master Page. All the CSS and JS references too have been mentioned in the Master Page.

What is the problem here ?

EDIT :

The TextBox is rendered as following :

EDIT :

With the following jQuery code i was able to retrieve the contents of the div.

 $('#btn').click(function () {
                var div = document.getElementById("div");
                var spans = div.getElementsByTagName("span");

                for (i = 0; i < spans.length; i++) {
                    alert(spans[i].innerHTML);
                }
            });

But the problem is that it returns the following :

And another empty alert is also shown! I don't know why!

Answer 1

You have 2 options first one is to replace the id with the parsed on the browser

<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />

<script type="text/javascript">
    $('input #ContentPlaceHolder1_txtCompany').tagsinput();
    alert($('input #ContentPlaceHolder1_txtCompany').val());
 </script>

or you will add a class to the textbox as a second solution and replace the id in the jquery code with the class name not the id

<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" class="form-control txtcomp" placeholder="Add Company" />

<script type="text/javascript">
    $('input .txtcomp').tagsinput();
    alert($('input .txtcomp').val());
 </script>

try it and i think it's going to work

EDIT you can use this function to show the added item value in alert

 $('input').on('itemAdded', function (event) {
     alert(event.item)
 });