title: jQuery - Multiple Email Addresses in Input Field
body: <p>I am working on a form that would allow users to enter multiple email addresses in an input field. </p>
  
  <p>By searching around the net I cam across this jQuery plugin:
  <a href="http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/" rel="nofollow noreferrer">http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/</a></p>
  
  <pre><code>(function( $ ){
  
       $.fn.multipleInput = function() {
  
            return this.each(function() {
  
                 // create html elements
  
                 // list of email addresses as unordered list
                 $list = $('&lt;ul /&gt;');
  
                 // input
                 var $input = $('&lt;input type="text" /&gt;').keyup(function(event) {
  
                      if(event.which == 32 || event.which == 188) {
                           // key press is space or comma
                           var val = $(this).val().slice(0, -1); // remove space/comma from value
  
                           // append to list of emails with remove button
                           $list.append($('&lt;li class="multipleInput-email"&gt;&lt;span&gt; ' + val + '&lt;/span&gt;&lt;/li&gt;')
                                .append($('&lt;a href="#" class="multipleInput-close" title="Remove" /&gt;')
                                     .click(function(e) {
                                          $(this).parent().remove();
                                          e.preventDefault();
                                     })
                                )
                           );
                           $(this).attr('placeholder', '');
                           // empty input
                           $(this).val('');
                      }
  
                 });
  
                 // container div
                 var $container = $('&lt;div class="multipleInput-container" /&gt;').click(function() {
                      $input.focus();
                 });
  
                 // insert elements into DOM
                 $container.append($list).append($input).insertAfter($(this));
  
                 // add onsubmit handler to parent form to copy emails into original input as csv before submitting
                 var $orig = $(this);
                 $(this).closest('form').submit(function(e) {
  
                      var emails = new Array();
                      $('.multipleInput-email span').each(function() {
                           emails.push($(this).html());
                      });
                      emails.push($input.val());
  
                      $orig.val(emails.join());
  
                 });
  
                 return $(this).hide();
  
            });
  
       };
  })( jQuery );
  </code></pre>
  
  <p>I installed the plugin, below is a screenshot of my results:</p>
  
  <p><a href="https://i.stack.imgur.com/h56r4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h56r4.jpg" alt="enter image description here"></a></p>
  
  <p><strong>My Questions:</strong></p>
  
  <p>How can we edit the plugin to make sure that the last value (email address) does not have a comma at the end?</p>
  
  <p>Here is a Fiddle:  <a href="https://jsfiddle.net/William3780/oL14dgqp/" rel="nofollow noreferrer">https://jsfiddle.net/William3780/oL14dgqp/</a></p>
  
  <p>And here is a link to the live install I am working on:  <a href="http://51146.com/free/refer-a-friend/" rel="nofollow noreferrer">http://51146.com/free/refer-a-friend/</a>  *please fill out the "Friends' Emails" field and submit the form to see the issue. </p>
  
  <p>Your input is very much appreciated, thank you.</p>