title: File upload click simulation button triggers form
body: <p>I'm creating a gallery that allows the uploader to upload an image/multiple images at a time. As a default, one file input is displayed with a text input for the corresponding image description.</p>
  
  <p>I also have another button which simulates the file input being clicked for aesthetical purposes. Upon clicking this button, the file browser triggers but the form in which the file inputs are placed seems to submit?</p>
  
  <pre><code>&lt;button id="new-dialogue"&gt;add image&lt;/button&gt;
  &lt;form action="action.php" method="post" enctype="multipart/form-data"&gt;
      &lt;div class="create-upload"&gt;
          &lt;!-- SECTION REPEATED WITH DIFFERENT IDS AS #NEW-DIALOGUE CLICKED --&gt;
          &lt;div class="upload"&gt;
              &lt;input class="image-upload" type="file" id="input1" name="file[]"/&gt;
              &lt;button class="btn-select" id="1"&gt;select file&lt;/button&gt;
              &lt;input id="desc" type="text" name="desc[]"/&gt;
          &lt;/div&gt;
         &lt;!-- SECTION --&gt; 
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>with JavaScript</p>
  
  <pre><code>$('document').ready(function() {
  var i = 1;
  $('#new-dialogue').click(function() {
      i++
      if(i &gt;= 6) {
  
      } else {
          $('.create-upload').append('&lt;div class="upload"&gt;&lt;input class="image-upload" type="file" id="input' + i + '" name="file[]"/&gt;&lt;button class="btn-select" id="file' + i + '"&gt;select file&lt;/button&gt;&lt;input id="desc" type="text" name="desc[]"/&gt;&lt;/div&gt;');
          $('.image-upload').imgPreview();
      }
  });
  $('.btn-select').click(function () {
      var id = this.id;
      $('input#input' + id).click();
  });
  });
  </code></pre>