CODEWITHSUNDEEP
jquerytwitter-bootstrap
Zhen
Zhen

Reputation: 4283

Invisible File Input element doesn't work with javascript

I trying to get a better looking file input form element with bootstrap using a invisible element example with a code (simplified) like:

<div class="container">
  <form enctype="multipart/form-data" action="">
    <input class="hide" id="filesel" type="file" />
    <div class="input-append">
      <input id="filename" class="input-large" type="text" />
      <a class="btn" onclick="testFun();">Browse</a>
    </div>
  </form>
</div>

<script type="text/javascript">
  $('input[id=filesel]').change(function() {
  $('#filename').val($(this).val());
  });

  function testFun(){
  inp = $("#filesel").click();
  }
</script>

But it doesn't work as expected. If I remove the hide class to the file input tag, it works. How can i solve it?

UPDATE 1: Tested with more navigators:

My in Chromium the hide or style="display: none" affects also the File Browse window.

Upvotes: 0

Views: 758

Answers (2)

Goran Lepur
Goran Lepur

Reputation: 594

Setting display:none; won't work on file input. Although you can set visibility:hidden; or opacity:0; There is also a nice tutorial about styling file inputs here

Upvotes: 1

LeGEC
LeGEC

Reputation: 51850

What happens if you remove your hide class, and add style="display: none" (as per the example) ?

Upvotes: 1

Related Questions