title: With jQuery, I need to create a delimited string based on input values
body: <p>If I have the following:</p>
  
  <pre><code>&lt;div id="mypanel"&gt;
    &lt;input id="hiddeninput"&gt;&lt;/input&gt;
    &lt;div class="textbox"&gt;
      &lt;input&gt;
    &lt;/div&gt;
    &lt;div class="textbox"&gt;
      &lt;input&gt;
    &lt;/div&gt;
    &lt;div class="textbox"&gt;
      &lt;input&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On blur of any of those textboxes, I need to populate the hidden textbox with the values from each, separated by a "|" or a safer character if you have any suggestions. Whatever that delimiter character is I'll have to remove it on keyup while the user enters text.</p>
  
  <p>So the hidden textbox would be populated with:</p>
  
  <p>some text|some more text, and... etc.|and some more</p>
  
  <p>I've done something similar with comma as an array:</p>
  
  <pre><code> dataArray.push($(this).val().split(',')[0]);
  </code></pre>