Question: ```
 <div id="feedback"></div>  

     <form id="myForm" action="controller.php" method="post">

         location1: <input type="checkbox" name="location1" id="location1" value="location1"/>
         location2: <input type="checkbox" name="location2" id="location2" value="location2"/><br>
         <input type="submit" id="submit" value="Submit" />
     </form>

         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
         <script type="text/javascript">

            $(document).ready(function(){

               $('#submit').click(function(e){

                  var locations = [];

                 $('input:checkbox:checked').each(function(){

                      locations.push($(this).val());

                 });

                 locations.join(" ! ");

                 $('#feedback').text(locations);

                 e.preventDefault();
               });

            });

         </script>

```

In the code above output is always comming with comma(,) seperator. Also why $('#feedback').html(locations); is not making any seperation among locations' elements ?

[JSFiddle](http://jsfiddle.net/LPP5P/)

Answer: 
You have to assign the return value of `join()` to a variable, it will not change the array

```
var loc = locations.join(" ! ");
$('#feedback').text(loc);

```
The [join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) operation (which is core JavaScript, not jQuery) does not update the variable you're calling it on, i.e.

```
locations.join(" ! ");

```

is joining your array then throwing away the result. You'll need to save the result of this operation or just pass it straight into the .text, e.g.

```
$('#feedback').text(locations.join(" ! ");)

```