title: SyntaxError: JSON.parse: unexpected end of data - but data is correct
body: <h2>Solution:</h2>
  
  <p>I had simply forgotten that I had a hidden input element with a max file size, which was also hit by</p>
  
  <pre><code>$(this).closest(".reginput").find("input").trigger("change");
  </code></pre>
  
  <p>To prevent it from being handled by my validation script, which won't know what to do with it and return the empty string which caused this error, I added</p>
  
  <pre><code>.not("[type='hidden']")
  </code></pre>
  
  <p>to exclude it.
  Now it works like it should. Thanks a bunch to Jared Farrish for bumping heads with me. :)</p>
  
  <h2>Original Question</h2>
  
  <p>I have a registration form which guides new users through one input at a time, and one of the inputs is of type="file".</p>
  
  <p>With jQuery, I check whether each input is a file when the user inputs something, to decide how to validate it. The value I need validated is sent as a JSON-formatted string to a PHP-script, using $.post() and .done().</p>
  
  <p>The file is an optional profile picture, and if the user selects a file for upload, I use the file API to check it's size and mime-type, which is sent as a JSON object to the server.</p>
  
  <p>On the first try everything goes well, the server returns a JSON formatted string with a custom response code, which is sent through JSON.parse().</p>
  
  <p>I have also added a button next to all inputs which triggers the change event when it is clicked. This is a fall back for users who need visual input on how to "send" the input value. However, if I try pressing this once the picture has already been validated, I get the error</p>
  
  <blockquote>
    <p>SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of
    the JSON data</p>
  </blockquote>
  
  <p>I have checked the returned value from my AJAX call, and it is correct:</p>
  
  <blockquote>
    <p>{"response":"OK","name":"picture"}</p>
  </blockquote>
  
  <p>I don't understand why this wouldn't be parsed properly, but maybe it has something to do with the change event being triggered by a different element?</p>
  
  <p>Here is the related code:</p>
  
  <h2>Triggering change event with button</h2>
  
  <pre><code>$(".sendinput").click(function(){
      if($(this).closest(".reginput").find("input").length == 0){ //if an input can't be found, operate with a select
          $(this).closest(".reginput").find("select").trigger("change");
      } else if ($(this).closest(".reginput").find("select").length == 0){ //if a select can't be found, operate with an input
          $(this).closest(".reginput").find("input").trigger("change");
      }
  </code></pre>
  
  <h2>Reacting to change event</h2>
  
  <pre><code>if($(this).attr("type") !== "file"){
  
      //Stuff to do if the input is NOT a file
  
  } else {
      $.post("checkinput.php",{"code":{"name":$(this).attr("name"),"size":e.target.files[0].size,"type":e.target.files[0].type}}).done(function(data){
      console.log(data);
      var datax = $.parseJSON(data);
      regCheckHandler(datax);
      });
      };
  });
  </code></pre>
  
  <h2>Show preview of profile picture</h2>
  
  <pre><code>$("input[type=file]").change(function(event){
  var prev = URL.createObjectURL(event.target.files[0]);
  console.log(prev);
  $("#pictureprev").css("background-image","url(" + prev + ")");
  });
  </code></pre>
  
  <p><strong>Sorry for the messy code! I've been rushing it a bit.</strong></p>
  
  <h2>Edit:</h2>
  
  <p><strong>The returned value is parsed correctly if I try switching image files, which triggers the change event natively. So I suppose the problem must lie with the trigger()ed event, although I still can't understand why!</strong></p>