Bootstrap Tags: how to retrieve items from the input list to server side?

Question

I am currently using the follow library: Bootstrap Tags

UI is working perfectly. But I am confuse as to how to retrieve all the values inside the input box? (I want the entire list of tags entered by user) and sent that information to server side. (First I want to print out using javascript then send to server using post request)

$("input").val()
$("input").tagsinput('items') //this is giving me error message

Here is my code:

 <!-- Textarea -->
                <div class="form-group">
                  <label class="col-md-3 control-label" for="textarea">Search Tags</label>
                  <div class="col-md-8">
                      <input class="form-control" id="tagTextarea" data-role="tagsinput" id="tagsInput" />
                  </div>
                </div>
                <script>
                    $('input').tagsinput({
                        trimValue: true

                    }

                    );
                    $('input').on('beforeItemAdd', function(event) {

                        // event.item: contains the item
                        // event.cancel: set to true to prevent the item getting added
                       //Now how do i retrieve those values inside?
                        console.log(tags);//<--how to print value?
                      });
                </script>

Answer 1

Ypu can use the serialize function of the jquery to get all the form values.

$('#formId').serialize();

You can loop through the result provided by that function to print in the client side as well as send the same result to server side code.

You can go through jQuery serialize()